AJAX Basic
AJAX基础
AJAX HOME
AJAX首页
AJAX Intro
AJAX简介
AJAX Request
AJAX请求
AJAX Example
AJAX实例
AJAX Browsers
AJAX浏览器
AJAX XMLHttpRequest
AJAX XMLHttpRequest对象
AJAX Server
AJAX服务器端
AJAX Server Script
AJAX服务器脚本
AJAX Advanced
AJAX高阶
AJAX Suggest
AJAX建议
AJAX Source
AJAX源码
AJAX Database
AJAX数据库
AJAX XML File
AJAX XML文件
AJAX ResponseXML
AJAX响应XML
AJAX Examples
AJAX范例
AJAX ResponseXML Example
AJAX ResponseXML 实例
responseText returns the HTTP response as a string.
responseText返回HTTP响应转为一个字符串。
responseXML returns the response as XML.
responseXML返回响应转为XML
AJAX ResponseXML example
AJAX ResponseXML 实例
The ResponseXML property returns an XML document object, which can be examined and parsed using the DOM.
ResponseXML属性返回XML文本对象，DOM籍此审查解析之。
The following example will demonstrate how a web page can fetch information from a database with 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技术获取服务器端数据库信息，并将查询的数据转换为XML文档，同时我们将使用DOM去提取XML值并显示出来。
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”下拉框的HMTL表单。
When the user selects a customer in the drop-down 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 AJAX JavaScript
AJAX的JavaScript
This is the JavaScript code stored in the file "selectcustomer_xml.js":
这是JavaScript代码存储于“selectcustomer_xml.js”文件中：
| 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() { if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari return new XMLHttpRequest(); } if (window.ActiveXObject) { // code for IE6, IE5 return new ActiveXObject("Microsoft.XMLHTTP"); } return null; } |
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()函数也是教程前面较早介绍到的，总之，这次我们将用XML文档（用responseXML对象）和使用DOM去解析我们想要展示的数据。
The AJAX server page
AJAX服务器端页面
The server page called by the JavaScript, is an ASP file called "getcustomer_xml.asp".
服务器端ASP文件“getcustomer_xml.asp”用于被JavaScript调用。
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 a query against a database and returns the result as an XML document:
源码运行了数据库查询语句并返回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）属性为响应对象设置了HTTP内容类型。而默认的此属性值为"text/html"。但这次我们要的是XML的内容类型。
Then we select data from the database, and builds an XML document with the data.
这时我们就从数据库中查询了数据，并用它创建了XML文档。