您的位置：首页 > Web前端 > HTML

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

2009-05-15 16:38 736 查看
在前面那篇笔记中使用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" onchange="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" onchange="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文件的截图:

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航