AJAX ResponseXML

AJAX ResponseXML


作者:w3pop.com 翻譯/整理:w3pop.com 發佈:2007-08-24 瀏覽:549 :: ::
While responseText returns the HTTP response as a string, responseXML returns the response as XML.
“responseText”屬性以字符串形式返回HTTP響應;“responseXML”屬性以XML形式返回HTTP響應。

The ResponseXML property returns an XML document object, which can be examined and parsed using W3C DOM node tree methods and properties.
“responseXML”屬性返回了一份XML文檔對象,可以使用W3C DOM節點樹方法和屬性對該XML文檔對象進行檢查和解析。


AJAX ResponseXML Example
AJAX ResponseXML 案例

In the following AJAX example we will demonstrate how a web page can fetch information from a database using AJAX technology. The selected data from the database will this time be converted to an XML document, and then we will use the DOM to extract the values to be displayed.
在下述AJAX案例中,我們將具體說明一張網頁是如何使用AJAX技術從數據庫中獲取信息的;從數據庫中選擇的數據將被即時轉換成一份XML文檔,並且,我們將使用DOM分離出需要顯示的值。


Select a Name in the Box Below
在下面的文本框中選擇一個名稱

Select a Customer:

AJAX Example Explained
AJAX 案例剖析

The example above contains an HTML form, several <span> elements to hold the returned data, and a link to a JavaScript:
上述案例包含了一份HTML表單,部分<span>元素保留了所返回的數據以及一個指向JavaScript的鏈接:

<html>
<head>
<script src="selectcustomer_xml.js"></script>
</head>
<body>
<form action=""> 
Select a Customer:

<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>
</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>

The example above contains an HTML form with a drop down box called "customers".
上述案例列舉了一份包含名爲“customers [客戶]”下拉菜單框的HTML表單。

When the user selects a customer in the dropdown box, a function called "showCustomer()" is executed. The execution of the function is triggered by the "onchange" event. In other words: Each time the user change the value in the drop down box, the function showCustomer() is called.
當用戶在下拉菜單框中選擇一個客戶時,將執行“showCustomer()”函數。該函數的執行是由“onchange”事件激發的;換句話說:每當用戶改變下拉菜單框中的值的時候,函數“showCustomer()”將被執行。

The JavaScript code is listed below.
具體的JavaScript代碼將在下面列出。


The AJAX JavaScript
AJAX JavaScript 腳本

This is the JavaScript code stored in the file "selectcustomer_xml.js":
下面列舉了儲存在“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;
}

The showCustomer() and GetXmlHttpObject() functions above are the same as in previous chapters. The stateChanged() function is also used earlier in this tutorial, however; this time we return the result as an XML document (with responseXML) and uses the DOM to extract the values we want to be displayed.
上述的“showCustomer()”函數和“GetXmlHttpObject()”函數與上一章我們提到過的相同。在這份教程的前面部分中,我們還使用了“stateChanged()”函數。然而,這次我們使用“responseXML”屬性返回了一份XML文檔,並且,我們將使用DOM分離出需要顯示的值。


The AJAX Server Page
AJAX 服務器頁面

The server page called by the JavaScript, is a simple ASP file called "getcustomer_xml.asp".
這份被JavaScript請求的服務器頁面是一份名爲“getcustomer_xml.asp”的簡單ASP文件。

The page is written in VBScript for an Internet Information Server (IIS). It could easily be rewritten in PHP, or some other server language. Look at a corresponding example in PHP.
該頁面是由VBScript書寫的,並且支持網絡信息服務器(iis)。使用PHP或其它程序語言也可以非常方便地對它進行重寫。請看相應的PHP案例

The code runs an SQL query against a database and returns the result as an XML document:
下面的代碼運行了用於查詢數據庫數據的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
%>

Notice the second line in the ASP code above: response.contenttype="text/xml". The ContentType property sets the HTTP content type for the response object. The default value for this property is "text/html". This time we want the content type to be XML.
請注意上述ASP代碼的第二行:response.contenttype="text/xml"。“ContentType [內容類型]”屬性爲“response”屬性設置了HTTP內容類型。該屬性的默認值爲“text/html”。這一次,我們希望將它設置成XML。

Then we select data from the database, and builds an XML document with the data.
然後,我們將從數據庫中選擇數據,並且創建一份包含具體數據的XML文檔。

 
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章