AJAX教程(12):AJAX ResponseXML 实例

2016-02-20 00:49 3 1 收藏

今天给大家分享的是由图老师小编精心为您推荐的AJAX教程(12):AJAX ResponseXML 实例,喜欢的朋友可以分享一下,也算是给小编一份支持,大家都不容易啊!

【 tulaoshi.com - Web开发 】

与 responseText 以字符串返回 HTTP 响应不同,responseXML 以 XML 返回响应。

ResponseXML 属性返回 XML 文档对象,可使用 W3C DOM 节点树的方法和属性来检查和解析该对象。

AJAX ResponseXML 实例

在下面的 AJAX 实例中,我们将演示网页如何使用 AJAX 技术从数据库中读取信息。这次,这些从数据库中选取的数据将被转换为 XML 文档,然后我们将使用 DOM 来提取要显示的值。

选取下拉列表中的名称

AJAX 实例解释

上面的例子包含一个 HTML 表单,若干个保留所返回数据的 span 元素,以及指向一段 JavaScript 的链接:

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)
htmlheadscript src="selectcustomer_xml.js"/script/headbodyform action="" label选择客户:select name="customers" onchange="showCustomer(this.value)"option value="ALFKI"Alfreds Futterkiste/optionoption value="NORTS "North/South/optionoption value="WOLZA"Wolski Zajazd/option/select/label/formbspan id="companyname"/span/bbr /span id="contactname"/spanbr /span id="address"/spanspan id="city"/spanbr/span id="country"/span/body/html

上面的例子包含了一个 HTML 表单,该表单带有一个名为 "customers" 下拉框。

当用户选取下拉框中的客户时,函数 "showCustomer()" 就会被执行。事件 "onchange" 会触发该函数执行。换句话说,每当用户改变下拉框中的值时,函数 showCustomer() 就会被调用。

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)

下面列出了 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 文档。

来源:http://www.tulaoshi.com/n/20160220/1632604.html

延伸阅读
标签: Web开发
静态页面 代码如下: !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" html xmlns="http://www.w3.org/1999/xhtml" head title无标题页/title script type="text/javascript" src="jquery/jquery.js" //这里不可以用script type="" src="" / /script sc...
标签: Web开发
我们已看到AJAX可被用来创建更多交互性的应用程序。 AJAXSuggest实例 在下面的AJAX例子中,我们会演示当用户向一个标准的HTML表单中输入数据时网页如何与web服务器进行通信。 在下面的文本框中输入名字: FirstName: Suggestions: 例子解释-HTML表单 表单的HTML代码: ...
标签: Web开发
AJAX 使用 Http 请求 在传统的 JavaScript 编程中,假如您希望从服务器上的文件或数据库中得到任何的信息,或者向服务器发送信息的话,就必须利用一个 HTML 表单向服务器 GET 或 POST 数据。而用户则需要单击提交按钮来发送/获取信息,等待服务器的响应,然后一张新的页面会加载结果。 由于每当用户提交输入后服务器都会返回一张新的页面,...
标签: Web开发
网页制作Webjx文章简介:AJAX可用来与数据库进行动态地通信。 AJAX可用来与数据库进行动态地通信。 AJAX数据库实例 在下面的AJAX例子中,我们将演示如何使用AJAX技术令网页从数据库读取信息。 在下面的框中选择一个名字 请选择一位客户:AlfredsFutterkisteNorth/SouthWolskiZajazd AJAX...
标签: Web开发
对于一个像我一样刚刚接触Web开发且无多少实际项目经验的新手而言,AJAX技术显得复杂而又深奥。经过两天的baidu、google,我对AJAX的基本原理有了一个大致的认识,在此总结一下。 1. 什么是AJAX? AJAX全称是异步的JavaScript和XML,是Asynchronous JavaScript and XML的缩写。AJAX技术用于创建交互式网页应用的网站开发,至于何为异步,后...

经验教程

806

收藏

5
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部