溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

Ajax的返回值類型是什么

發(fā)布時(shí)間：2021-05-12 16:36:19 來源：億速云 閱讀：562 作者：Leah 欄目：web開發(fā)

這期內(nèi)容當(dāng)中小編將會(huì)給大家?guī)碛嘘P(guān)Ajax的返回值類型是什么，文章內(nèi)容豐富且以專業(yè)的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。

1、返回值之XML類型

如果服務(wù)器的響應(yīng)頭中Content-type的內(nèi)容為text/xml時(shí)，此時(shí)XMLHttpRequest對(duì)象的responseXML屬性才能使用。

2、返回值之文本類型

文本類型主要分為Html類型和json類型。

（1）Html類型

使用場景：一般返回需要重復(fù)復(fù)雜的操作。比如，頁面使用ajax從服務(wù)器請(qǐng)求了json格式數(shù)據(jù)，返回到頁面這，然后又要轉(zhuǎn)換為數(shù)組，又要遍歷，追加到頁面中，可以考慮返回Html類型，在服務(wù)器把html頁面封裝好，然后到頁面這只需要直接使用innerHTML追加到頁面即可。

（2）json類型

{
"name": "天龍八部",
"intro": "《天龍八部》是著名作家金庸的武俠代表作。著于1963年，歷時(shí)4年創(chuàng)作完成（部分內(nèi)容曾由倪匡代筆撰寫），前后共有三版，并在2005年第三版中經(jīng)歷6稿修訂，結(jié)局改動(dòng)較大。"
}

如果返回值是json文本，首先需要使用eval函數(shù)將文本轉(zhuǎn)換為js對(duì)象，然后才能使用其屬性。

案例：

使用Ajax返回值

文件結(jié)構(gòu)圖：

Ajax的返回值類型是什么

07-returntype-html文件：

頁面中有3個(gè)按鈕，分別實(shí)現(xiàn)了onclick事件，點(diǎn)擊每個(gè)按鈕就是從服務(wù)器獲取不同格式的數(shù)據(jù)，然后解析，顯示到頁面中。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>Ajax返回值類型</title>
  <link rel="stylesheet" href="">
</head>
<script>
  //創(chuàng)建XMLHttpRequest對(duì)象
  function createXhr(){
    var xhr = null;
    if(window.XMLHttpRequest){
      xhr = new XMLHttpRequest();//谷歌、火狐等瀏覽器
    }else if(window.ActiveXObject){
      xhr = new ActiveXObject("Microsoft.XMLHTTP");//ie低版本
    }
    return xhr;
  }
  //測試返回值為xml
  function test1(){
    //1、創(chuàng)建XMLHttpRequest
    var xhr = createXhr();
    //2、確定請(qǐng)求參數(shù)
    xhr.open('GET','./07-returntype-xml.php',true);
    //3、重寫回調(diào)函數(shù)
    xhr.onreadystatechange = function (){
      if(xhr.readyState == 4 && xhr.status == 200){
        var domxml = xhr.responseXML;
        var name = domxml.getElementsByTagName('book')[0].firstChild.firstChild.wholeText;
        var intro = domxml.getElementsByTagName('book')[0].lastChild.firstChild.wholeText;
        document.getElementById('name').value = name;
        document.getElementById('intro').value = intro;
      }
    }
    //4、發(fā)送請(qǐng)求
    xhr.send(null);
  }
  //測試返回值為文本-HTML
  function test2(){
    //1、創(chuàng)建XMLHttpRequest
    var xhr = createXhr();
    //2、確定請(qǐng)求參數(shù)
    xhr.open('GET','./07-returntype-html.php',true);
    //3、重寫回調(diào)函數(shù)
    xhr.onreadystatechange = function (){
      if(xhr.readyState == 4 && xhr.status == 200){
        var domxml = xhr.responseXML;
        document.getElementById('area').innerHTML = xhr.responseText;
      }
    }
    //4、發(fā)送請(qǐng)求
    xhr.send(null);
  }
  //測試返回值為文本-json
  function test3(){
    //1、創(chuàng)建XMLHttpRequest
    var xhr = createXhr();
    //2、確定請(qǐng)求參數(shù)
    xhr.open('GET','./07-returntype-json.php',true);
    //3、重寫回調(diào)函數(shù)
    xhr.onreadystatechange = function (){
      if(xhr.readyState == 4 && xhr.status == 200){
        var result = eval('('+xhr.responseText+')');
        document.getElementById('name').value = result.name;
        document.getElementById('intro').value = result.intro;
      }
    }
    //4、發(fā)送請(qǐng)求
    xhr.send(null);
  }
</script>
<body>
  <p>書名：<input type="text" id="name"/></p>
  <p>簡介：<input type="text" id="intro"/></p>
  <input type="button" onclick="test1();" value="測試xml"/>
  <input type="button" onclick="test2();" value="測試HTML" />
  <input type="button" onclick="test3();" value="測試json" />
  <p id="area"></p>
</body>
</html>

07-returntype-xml.php文件：

主要是返回xml格式的數(shù)據(jù)

<?php
/**
 * 返回xml數(shù)據(jù)
 * @author webbc
 */
header('Content-type:text/xml;charset=utf-8');
echo '<?xml version="1.0" encoding="UTF-8"?><bookstore><book><name>天龍八部</name><intro><![CDATA[《天龍八部》是著名作家金庸的武俠代表作。著于1963年，歷時(shí)4年創(chuàng)作完成（部分內(nèi)容曾由倪匡代筆撰寫），前后共有三版，并在2005年第三版中經(jīng)歷6稿修訂，結(jié)局改動(dòng)較大。]]></intro></book></bookstore>';
?>

07-returntype-html.php文件：

主要是返回html文本

<?php
/**
 * 返回html標(biāo)簽數(shù)據(jù)
 * @author webbc
 */
$arr = array('趙','錢','孫','李');
$str = '';
foreach ($arr as $v) {
  $str .= '<li>' . $v .'</li>';
}
echo $str;
?>

07-returntype-json.php文件：

主要是返回json格式數(shù)據(jù)

<?php
/**
 * 返回json格式數(shù)據(jù)
 * @author webbc
 */
header('Content-type:text/html;charset=utf-8');
echo '{"name":"天龍八部","intro":"《天龍八部》是著名作家金庸的武俠代表作。著于1963年，歷時(shí)4年創(chuàng)作完成（部分內(nèi)容曾由倪匡代筆撰寫），前后共有三版，并在2005年第三版中經(jīng)歷6稿修訂，結(jié)局改動(dòng)較大。"}';
?>

什么是ajax

ajax是一種在無需重新加載整個(gè)網(wǎng)頁的情況下，能夠更新部分網(wǎng)頁的技術(shù)，可以通過在后臺(tái)與服務(wù)器進(jìn)行少量數(shù)據(jù)交換，使網(wǎng)頁實(shí)現(xiàn)異步更新。

上述就是小編為大家分享的Ajax的返回值類型是什么了，如果剛好有類似的疑惑，不妨參照上述分析進(jìn)行理解。如果想知道更多相關(guān)知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道。

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請(qǐng)聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手