Ajax返回值類型與用法實(shí)例分析
本文實(shí)例講述了Ajax返回值類型與用法。分享給大家供大家參考，具體如下：
Ajax返回值類型主要有XML類型和文本類型，其中文本類型又可以分為HTML、json類型等。
1、返回值之XML類型
如果服務(wù)器的響應(yīng)頭中Content-type的內(nèi)容為text/xml時(shí)，此時(shí)XMLHttpRequest對(duì)象的responseXML屬性才能使用。
2、返回值之文本類型
文本類型主要分為Html類型和json類型。
（1）Html類型
使用場(chǎng)景：一般返回需要重復(fù)復(fù)雜的操作。比如，頁(yè)面使用ajax從服務(wù)器請(qǐng)求了json格式數(shù)據(jù)，返回到頁(yè)面這，然后又要轉(zhuǎn)換為數(shù)組，又要遍歷，追加到頁(yè)面中，可以考慮返回Html類型，在服務(wù)器把html頁(yè)面封裝好，然后到頁(yè)面這只需要直接使用innerHTML追加到頁(yè)面即可。
（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)圖：
07-returntype-html文件：
頁(yè)面中有3個(gè)按鈕，分別實(shí)現(xiàn)了onclick事件，點(diǎn)擊每個(gè)按鈕就是從服務(wù)器獲取不同格式的數(shù)據(jù)，然后解析，顯示到頁(yè)面中。
<!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; } //測(cè)試返回值為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); } //測(cè)試返回值為文本-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); } //測(cè)試返回值為文本-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>簡(jiǎn)介：<input type="text" id="intro"/></p> <input type="button" onclick="test1();" value="測(cè)試xml"/> <input type="button" onclick="test2();" value="測(cè)試HTML" /> <input type="button" onclick="test3();" value="測(cè)試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)較大。"}";?>效果圖：
更多關(guān)于ajax相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《jquery中Ajax用法總結(jié)》、《JavaScript中ajax操作技巧總結(jié)》、《PHP+ajax技巧與應(yīng)用小結(jié)》及《asp.net ajax技巧總結(jié)專題》
希望本文所述對(duì)大家ajax程序設(shè)計(jì)有所幫助。
相關(guān)文章：
1. ajax實(shí)現(xiàn)頁(yè)面的局部加載2. 詳談ajax返回?cái)?shù)據(jù)成功 卻進(jìn)入error的方法3. axios和ajax的區(qū)別點(diǎn)總結(jié)4. 利用ajax+php實(shí)現(xiàn)商品價(jià)格計(jì)算5. 爬取今日頭條Ajax請(qǐng)求6. laravel ajax curd 搜索登錄判斷功能的實(shí)現(xiàn)7. SpringMVC+Jquery實(shí)現(xiàn)Ajax功能8. Ajax實(shí)現(xiàn)表格中信息不刷新頁(yè)面進(jìn)行更新數(shù)據(jù)9. AJAX的跨域問題解決方案10. Ajax?請(qǐng)求隊(duì)列解決方案并結(jié)合elementUi做全局加載狀態(tài)
網(wǎng)公網(wǎng)安備