AJAX ResponseXML 執行個體

來源:互聯網
上載者:User

與 responseText 以字串返回 HTTP 響應不同,responseXML 以 XML 返迴響應。

ResponseXML 屬性返回 XML 文檔對象,可使用 W3C DOM 節點樹的方法和屬性來檢查和解析該對象。

AJAX ResponseXML 執行個體

在下面的 AJAX 執行個體中,我們將示範網頁如何使用 AJAX 技術從資料庫中讀取資訊。這次,這些從資料庫中選取的資料將被轉換為 XML 文檔,然後我們將使用 DOM 來提取要顯示的值。

選取下拉式清單中的名稱

AJAX 執行個體解釋

上面的例子包含一個 HTML 表單,若干個保留所返回資料的 <span> 元素,以及指向一段 JavaScript 的連結:

<html><head><script src="selectcustomer_xml.js"></script></head><body><form action=""> <label>選擇客戶:<select name="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 代碼。

AJAX JavaScript

這是儲存在檔案 "selectcustomer_xml.js" 中的 JavaScript 代碼:

var xmlHttpfunction 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 來提取要顯示的值。

AJAX 伺服器頁面

這個被 JavaScript 調用的伺服器頁面,是名為 "getcustomer_xml.asp" 的簡單 ASP 檔案。

該頁面使用 VBScript 編寫,針對 Internet 資訊服務器 (IIS)。可以用 PHP 或其他伺服器語言,簡單地重寫該頁面。

請看在 PHP 中對應的例子(測試:缺具體頁面)。

這段代碼執行針對資料庫的 SQL 查詢,並以 XML 文檔返回結果:

<%response.expires=-1response.contenttype="text/xml"sql="SELECT * FROM CUSTOMERS "sql=sql & " WHERE CUSTOMERID='" & request.querystring("q") & "'"on error resume nextset 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, connif err <> 0 thenresponse.write(err.description)set rs=nothingset conn=nothingelseresponse.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 ifon error goto 0%>

請注意上面的 ASP 代碼中的第二行:response.contenttype="text/xml"。ContentType 屬性為 response 對象設定了 HTTP 內容類型。該屬性的預設值是 "text/html"。這次我們把內容類型設定為 XML。

然後我們從資料庫中選取資料,並使用這些資料構建 XML 文檔。

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.