首页 > 开发 > AJAX > 正文

AJAX教程(12):AJAX ResponseXML 实例

2020-09-19 11:05:14
字体:
来源:转载
供稿:网友

与 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 文档。

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表