與 responseText 以字符串返回 HTTP 響應不同,responseXML 以 XML 返回響應。
ResponseXML 屬性返回 XML 文檔對象,可使用 W3C DOM 節點樹的方法和屬性來檢查和解析該對象。
在下面的 AJAX 實例中,我們將演示網頁如何使用 AJAX 技術從數據庫中讀取信息。這次,這些從數據庫中選取的數據將被轉換為 XML 文檔,然后我們將使用 DOM 來提取要顯示的值。
上面的例子包含一個 HTML 表單,若干個保留所返回數據的 <span> 元素,以及指向一段 JavaScript 的鏈接:
<html> <head><script src="selectcustomer_xml.js"></script>
</head> <body><form action="">
<label>選擇客戶: <selectname="customers" onchange="showCustomer(this.value)"
> <option value="ALFKI">Alfreds Futterkiste</option> <option value="NORTS ">North/South</option> <option value="WOLZA">Wolski Zajazd</option> </select></label></form>
<b><span id="companyname"></span></b><br /> <span id="contactname"></span><br /> <span id="address"></span> <span id="city"></span><br/> <span id="country"></span> </body> </html>
上面的例子包含了一個 HTML 表單,該表單帶有一個名為 "customers" 下拉框。
當用戶選取下拉框中的客戶時,函數 "showCustomer()" 就會被執行。事件 "onchange" 會觸發該函數執行。換句話說,每當用戶改變下拉框中的值時,函數 showCustomer() 就會被調用。
下面列出了 JavaScript 代碼。
這是存儲在文件 "selectcustomer_xml.js" 中的 JavaScript 代碼:
var xmlHttp function showCustomer(str) { xmlHttp=GetXmlHttpObject(); if (xmlHttp==null) { alert ("Your browser does not support AJAX!"); return; } var url="getcustomer_xml.asp"; url=url+"?q="+str; url=url+"&sid="+Math.random(); xmlHttp.onreadystatechange=stateChanged; xmlHttp.open("GET",url,true); xmlHttp.send(null); } function stateChanged() { if (xmlHttp.readyState==4) { var xmlDoc=xmlHttp.responseXML.documentElement; document.getElementById("companyname").innerHTML= xmlDoc.getElementsByTagName("compname")[0].childNodes[0].nodeValue; document.getElementById("contactname").innerHTML= xmlDoc.getElementsByTagName("contname")[0].childNodes[0].nodeValue; document.getElementById("address").innerHTML= xmlDoc.getElementsByTagName("address")[0].childNodes[0].nodeValue; document.getElementById("city").innerHTML= xmlDoc.getElementsByTagName("city")[0].childNodes[0].nodeValue; document.getElementById("country").innerHTML= xmlDoc.getElementsByTagName("country")[0].childNodes[0].nodeValue; } } function GetXmlHttpObject() { var xmlHttp=null; try { // Firefox, Opera 8.0+, Safari xmlHttp=new XMLHttpRequest(); } catch (e) { // Internet Explorer try { xmlHttp=new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { xmlHttp=new ActiveXObject("Microsoft.XMLHTTP"); } } return xmlHttp; }
showCustomer() 和 GetXmlHttpObject() 與上一節相同。stateChanged() 函數稍早前也在本教程中使用過。不過,這次我們通過 responseXML 以 XML 文檔返回結果,并使用 DOM 來提取要顯示的值。
這個被 JavaScript 調用的服務器頁面,是名為 "getcustomer_xml.asp" 的簡單 ASP 文件。
該頁面使用 VBScript 編寫,針對 Internet 信息服務器 (IIS)?梢杂 PHP 或其他服務器語言,簡單地重寫該頁面。
請看在 PHP 中對應的例子(測試:缺具體頁面)。
這段代碼執行針對數據庫的 SQL 查詢,并以 XML 文檔返回結果:
<% response.expires=-1 response.contenttype="text/xml" sql="SELECT * FROM CUSTOMERS " sql=sql & " WHERE CUSTOMERID='" & request.querystring("q") & "'" on error resume next set conn=Server.CreateObject("ADODB.Connection") conn.Provider="Microsoft.Jet.OLEDB.4.0" conn.Open(Server.Mappath("/db/northwind.mdb")) set rs=Server.CreateObject("ADODB.recordset") rs.Open sql, conn if err <> 0 then response.write(err.description) set rs=nothing set conn=nothing else response.write("<?xml version='1.0' encoding='ISO-8859-1'?>") response.write("<company>") response.write("<compname>" &rs.fields("companyname")& "</compname>") response.write("<contname>" &rs.fields("contactname")& "</contname>") response.write("<address>" &rs.fields("address")& "</address>") response.write("<city>" &rs.fields("city")& "</city>") response.write("<country>" &rs.fields("country")& "</country>") response.write("</company>") end if on error goto 0 %>
請注意上面的 ASP 代碼中的第二行:response.contenttype="text/xml"。ContentType 屬性為 response 對象設置了 HTTP 內容類型。該屬性的默認值是 "text/html"。這次我們把內容類型設置為 XML。
然后我們從數據庫中選取數據,并使用這些數據構建 XML 文檔。