HTML+AJAX+XML实现服务器异步请求

最新推荐文章于 2023-03-05 14:30:20 发布

dujingjing1230

最新推荐文章于 2023-03-05 14:30:20 发布

阅读量2.4k

点赞数

分类专栏： Javascript AJAX 文章标签： ajax 服务器 xml html xmlhttprequest javascript

本文链接：https://blog.csdn.net/dujingjing1230/article/details/4189563

版权

AJAX 同时被 2 个专栏收录

51 篇文章 0 订阅

订阅专栏

Javascript

30 篇文章 0 订阅

订阅专栏

在前面那篇笔记中使用ajax实现了向服务器发送一个input的value然后返回一个结果,这里我们再使用ajax来换取服务器的xml文件信息。

很感谢w3cSchool给出的这么多好东西,然后就是记住ajax必须用到的XMLHttpRequest()方法,会点php,asp和vb(C#)的知识就可以了。当然这都是对我这种初学者来说的,如果需要搞点比较牛X的东东就比较难了。不废话了,开始我们的javascirpt通过vb脚本读取xml文件的ajax例子吧。

首先我们会有个HTML文件包括dropdownlist和一个div。代码如下:

<html> <head> <mce:script src="selectcd.js" mce_src="selectcd.js"></mce:script> </head> <body> <form> Select a CD: <select name="cds" οnchange="showCD(this.value)"> <option value="Bob Dylan">Bob Dylan</option> <option value="Bonnie Tyler">Bonnie Tyler</option> <option value="Dolly Parton">Dolly Parton</option> </select> </form> <div id="txtHint"><b>CD info will be listed here.</b></div> </body> </html>

可以看到它用到了selectcd.js文件。html文件中的div是作为从服务器请求过来的数据的容器。我们要实现的功能就是当用户在下拉列表'Select a CD'中选择一个选项时,<div>中显示不同的数据。内部机制是每当下拉列表的onchange事件发生时页面都会调用'showCD()'这个方法.

下面是showCD()方法的代码:

var xmlhttp function showCD(str) { xmlhttp=GetXmlHttpObject(); if (xmlhttp==null) { alert ("Your browser does not support AJAX!"); return; } var url="getcd.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) { document.getElementById("txtHint").innerHTML=xmlhttp.responseText; } } function GetXmlHttpObject() { if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari return new XMLHttpRequest(); } if (window.ActiveXObject) { // code for IE6, IE5 return new ActiveXObject("Microsoft.XMLHTTP"); } return null; }

这里的大部分功能在前面几篇文章都有介绍,值得注意的是当xmlhttp得readystate为4时也就是当请求已经完成时传回来的文本在txthint中显示,但是现实的格式是在服务器端通过vb脚本来控制的。下面这个asp文件显示了如何通过vb脚本来控制responseText的现实:

<% response.expires=-1 q=request.querystring("q") set xmlDoc=Server.CreateObject("Microsoft.XMLDOM") xmlDoc.async="false" xmlDoc.load(Server.MapPath("cd_catalog.xml")) set nodes=xmlDoc.selectNodes("CATALOG/CD[ARTIST='" & q & "']") for each x in nodes for each y in x.childnodes response.write("<b>" & y.nodename & ":</b> ") response.write(y.text) response.write("<br />") next next %>

如果你仔细点就会发现前面的javascript返回的是一个string类型的,这就不怎么有意思了,应该返回个xml格式的该多好啊。呵呵,事实上确实可以返回个xml对象。下面就给个例子,这个例子是通过一个页面请求数据库的信息,先转化为xml格式的m然后再传输给DOM控件显示在页面上。

这个html页面和上面那个例子就不大一样了，这里先得定义好接受服务器传回来的xml文件的控件也就是那几个span。

<html> <head> <mce:script src="selectcustomer_xml.js" mce_src="selectcustomer_xml.js"></mce:script> </head> <body> <form action=""> Select a Customer: <select name="customers" οnchange="showCustomer(this.value)"> <option value="ALFKI">Alfreds Futterkiste</option> <option value="NORTS ">North/South</option> <option value="WOLZA">Wolski Zajazd</option> </select> </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>

然后是javasciprt:

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() { if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari return new XMLHttpRequest(); } if (window.ActiveXObject) { // code for IE6, IE5 return new ActiveXObject("Microsoft.XMLHTTP"); } return null; }

可以看出来这个javascript和上面那个例子的javascript差别相当大，它不再只是接受个resonsedText,而是需要定义出来每个responseXML的节点名字。

最后这个是用到的服务器文件,注意:这里用到了数据库northwind,没有的话可以随便下载个。很经典的一个数据库。

<% 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='utf-8'?>") 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 %>

,如果服务器文件是个xml文件那就更简单了,直接使用上面第一个例子的那个asp文件。

下面是xml文件的截图:

dujingjing1230

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
HTML+AJAX+XML实现服务器异步请求

在前面那篇笔记中使用ajax实现了向服务器发送一个input的value然后返回一个结果,这里我们再使用ajax来换取服务器的xml文件信息。很感谢w3cSchool给出的这么多好东西,然后就是记住ajax必须用到的XMLHttpRequest()方法,会点php,asp和vb(C#)的知识就可以了。当然这都是对我这种初学者来说的,如果需要搞点比较牛X的东东就比较难了。不废话了,开始
复制链接

扫一扫

专栏目录