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

选取下拉列表中的名称

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

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

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

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

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

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() 就会被调用。

下面列出了 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技术用于创建交互式网页应用的网站开发,至于何为异步,后...

经验教程

623

收藏

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