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

Javascript
javascript IFrame 强制刷新代码
JQuery 学习笔记 选择器之一
JQuery 学习笔记 选择器之二
JQuery 学习笔记 选择器之三
JQuery 学习笔记 element属性控制
Prototype 工具函数 学习
Prototype Selector对象学习
用JQuery 实现AJAX加载XML并解析的脚本
jquery 表单下所有元素的隐藏
javascript 动态table添加colspan\rowspan 参数的方法
利用javascript/jquery对上传文件格式过滤的方法
javaScript 判断字符串是否为数字的简单方法
jquery 将disabled的元素置为enabled的三种方法
javascript 解析后的xml对象的读取方法细解
IE中radio 或checkbox的checked属性初始状态下不能选中显示问题
javascript 一个函数对同一元素的多个事件响应
对象特征检测法判断浏览器对javascript对象的支持
javaScript Array(数组)相关方法简述
js 字符串操作函数
JavaScript中null与undefined分析

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


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-09-28   浏览: 134 ::
收藏到网摘: 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 文档。