AJAX - 伺服器 回應
如需取得來自伺服器的回應,請使用 XMLHttpRequest 物件的 responseText 或 responseXML 屬性。
ResponseText和ResponseXML
# 回應資訊的內容可能有多種不同的形式,例如XML、純文字、(X)HTML或JavaScript物件符號(JSON) 。我們可以根據所接收到的資料格式的不同,用兩種不同的方法來處理:使用 responseText或responseXML。
responseText方法用於那些並非基於XML的格式。它把回應訊息當作字串,回傳精確的 內容。純文字、(X)HTML和JSON都使用responseText。 responseText不僅可以為頁面添加內容,它在調試AJAX請求的時候也有用處。例如,你可能還沒準備好分析數據,因為你還不知道所有的標籤 是什麼樣的,是XML格式的還是JSON檔案。這就要求有一種用來偵測被分析資料的途徑。一旦你知道了所有的標籤名稱,所需要做的事情就只是編寫程式碼 了。
responseXML的使用也相當簡單。但是與JSON格式類似,XML要求進行資料分析。我們需要執行的第一項事務是辨識出XML回應資訊中的根節點。
var response = ajax.request.responseXML.documentElement;
下一步,我們透過名稱取得所有的元素並得到它們的值:
#var header = response.getElementsByTagName('header')[0].firstChild.data;
var description = response.getElementsBy#var description = response.getElementsBy
#var description = response.getElementsBy#var description = response.getElementsBy
#var description = response.getElementsBy
#var description = response.getElementsBy
#var description = response.getElementsBy
#var description = response。 ')[0].firstChild.data;
var sourceUrl = response.getElementsByTagName('sourceUrl')[0].firstChild.data;
############# ###最後,我們把回應訊息顯示在對應的div標記中:#########$("body").html("<b>" + header + "</b> <br/>"### + description + "<br/>< '" + sourceUrl + "'>Download the source files< ;/a>";############responseText 屬性傳回字串形式的回應:#########
<!DOCTYPE html> <html> <head> <script> function loadXMLDoc() { var xmlhttp; if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest(); } else {// code for IE6, IE5 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.onreadystatechange=function() { if (xmlhttp.readyState==4 && xmlhttp.status==200) { document.getElementById("myDiv").innerHTML=xmlhttp.responseText; } } xmlhttp.open("GET","ajax_info.txt",true); xmlhttp.send(); } </script> </head> <body> <div id="myDiv"><h2>使用 AJAX 修改该文本内容</h2></div> <button type="button" onclick="loadXMLDoc()">修改内容</button> </body> </html>###如果來自伺服器的回應是XML,而且需要作為XML 物件進行解析,請使用responseXML 屬性######請求 cd_catalog.xml 文件,並解析回應:###
<!DOCTYPE html> <html> <head> <script> function loadXMLDoc() { var xmlhttp; var txt,x,i; if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest(); } else {// code for IE6, IE5 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.onreadystatechange=function() { if (xmlhttp.readyState==4 && xmlhttp.status==200) { xmlDoc=xmlhttp.responseXML; txt=""; x=xmlDoc.getElementsByTagName("ARTIST"); for (i=0;i<x.length;i++) { txt=txt + x[i].childNodes[0].nodeValue + "<br>"; } document.getElementById("myDiv").innerHTML=txt; } } xmlhttp.open("GET","cd_catalog.xml",true); xmlhttp.send(); } </script> </head> <body> <h2>My CD Collection:</h2> <div id="myDiv"></div> <button type="button" onclick="loadXMLDoc()">Get my CD collection</button> </body> </html>#########實例:##########
<!DOCTYPE HTML> <html> <head> <meta charset=utf-8" /> <title>Using responseText with innerHTML</title> <script type="text/javascript"> var xmlHttp; function createXMLHttpRequest(){ if(window.ActiveXObject){ xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); }else if(window.XMLHttpRequest){ xmlHttp = new XMLHttpRequest(); } } function startRequest(){ createXMLHttpRequest(); xmlHttp.onreadystatechange = handleStateChange; xmlHttp.open("GET","innerHTML.xml",true); xmlHttp.send(null); } function handleStateChange(){ if(xmlHttp.readyState == 4){ if(xmlHttp.status == 200){ document.getElementById("results").innerHTML=xmlHttp.responseText; } } } </script> </head> <body> <form> <input type="button" value="Search for Today's Activities" onclick="startRequest();"/> </form> <div id="results"></div> </body> </html>
innerHTML.xml檔
<?xml version="1.0" encoding="utf-8"?> <table border="1"> <tbody> <tr><th>Activity Name</th><th>Location</th><th>Time</th></tr> <tr><td>Waterskiing</td><td>Dock #1</td><td>9:00 AM</td></tr> <tr><td>Volleyball</td><td>East Court</td><td>2:00 PM</td></tr> <tr><td>Hiking</td><td>Trail 3</td><td>3:30 PM</td></tr> </tbody> </table>