当前位置: 首页 > 图文教程 > 网络编程 > Javascript > AJAX教程(12):AJAX ResponseXML 实例

Javascript
jQuery开发者都需要知道的5个小技巧
Extjs学习笔记之六 面版
Javascript 中的类和闭包
IE6下JS动态设置图片src地址问题
Extjs学习笔记之七 布局
Extjs学习笔记之八 继承和事件基础
Extjs TriggerField在弹出窗口显示不出问题的解决方法
JavaScript中的集合及效率
利用js获取服务器时间的两个简单方法
在html页面上拖放移动标签
了解jQuery技巧来提高你的代码
JavaScript 页面坐标相关知识整理
Javascript UrlDecode函数代码
JQuery 遮罩层实现(mask)实现代码
jQuery 页面 Mask实现代码
Javascript的构造函数和constructor属性
js或css文件后面跟参数的原因说明
将CKfinder整合进CKEditor3.0的新方法
jQuery UI-Draggable 参数集合
jQuery 行级解析读取XML文件(附源码)

Javascript 中的 AJAX教程(12):AJAX ResponseXML 实例


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-09-28   浏览: 102 ::
收藏到网摘: n/a

与 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 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 来提取要显示的值。

AJAX 服务器页面

这个被 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 文档。