AJAX对服务器返回XML的处理方法
本文实例讲述了AJAX对服务器返回XML的处理方法。分享给大家供大家参考。具体分析如下：
在AJAX中，服务器端如果返回的XML文档，则可以通过异步对象的responseXML属性来获取器XML数据。而开发者可以利用DOM的相关方法对其进行处理。
假设服务器返回的XML文档，如下所示：
<?xmlversion="1.0"encoding="gb2312"?> <list> <caption>MemberList</caption> <member> <name>isaac</name> <class>W13</class> <birth>Jun24th</birth> <constell>Cancer</constell> <mobile>1118159</mobile> </member> <member> <name>fresheggs</name> <class>W610</class> <birth>Nov5th</birth> <constell>Scorpio</constell> <mobile>1038818</mobile> </member> <member> <name>girlwing</name> <class>W210</class> <birth>Sep16th</birth> <constell>Virgo</constell> <mobile>1307994</mobile> </member> <member> <name>tastestory</name> <class>W15</class> <birth>Nov29th</birth> <constell>Sagittarius</constell> <mobile>1095245</mobile> </member> <member> <name>lovehate</name> <class>W47</class> <birth>Sep5th</birth> <constell>Virgo</constell> <mobile>6098017</mobile> </member> <member> <name>slepox</name> <class>W19</class> <birth>Nov18th</birth> <constell>Scorpio</constell> <mobile>0658635</mobile> </member> <member> <name>smartlau</name> <class>W19</class> <birth>Dec30th</birth> <constell>Capricorn</constell> <mobile>0006621</mobile> </member> <member> <name>tuonene</name> <class>W210</class> <birth>Nov26th</birth> <constell>Sagittarius</constell> <mobile>0091704</mobile> </member> <member> <name>dovecho</name> <class>W19</class> <birth>Dec9th</birth> <constell>Sagittarius</constell> <mobile>1892013</mobile> </member> <member> <name>shanghen</name> <class>W42</class> <birth>May24th</birth> <constell>Gemini</constell> <mobile>1544254</mobile> </member> <member> <name>venessawj</name> <class>W45</class> <birth>Apr1st</birth> <constell>Aries</constell> <mobile>1523753</mobile> </member> <member> <name>lightyear</name> <class>W311</class> <birth>Mar23th</birth> <constell>Aries</constell> <mobile>1002908</mobile> </member> </list>
客户端获得服务器端的该XML数据，并将其显示在表格中。代码如下：
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>responseXML</title>
<style>
<!--
.datalist{
border:1pxsolid#744011;/*表格边框*/
font-family:Arial;
border-collapse:collapse;/*边框重叠*/
background-color:#ffd2aa;/*表格背景色*/
font-size:14px;
}
.datalistth{
border:1pxsolid#744011;/*行名称边框*/
background-color:#a16128;/*行名称背景色*/
color:#FFFFFF;/*行名称颜色*/
font-weight:bold;
padding-top:4px;padding-bottom:4px;
padding-left:12px;padding-right:12px;
text-align:center;
}
.datalisttd{
border:1pxsolid#744011;/*单元格边框*/
text-align:left;
padding-top:4px;padding-bottom:4px;
padding-left:10px;padding-right:10px;
}
.datalisttr:hover,.datalisttr.altrow{
background-color:#dca06b;/*动态变色*/
}
input{/*按钮的样式*/
border:1pxsolid#744011;
color:#744011;
}
-->
</style>
<scriptlanguage="javascript">
varxmlHttp;
functioncreateXMLHttpRequest(){
if(window.ActiveXObject)
xmlHttp=newActiveXObject("Microsoft.XMLHttp");
elseif(window.XMLHttpRequest)
xmlHttp=newXMLHttpRequest();
}
functiongetXML(addressXML){
varurl=addressXML+"?timestamp="+newDate();
createXMLHttpRequest();
xmlHttp.onreadystatechange=handleStateChange;
xmlHttp.open("GET",url);
xmlHttp.send(null);
}
functionaddTableRow(sName,sClass,sBirth,sConstell,sMobile){
//表格添加一行的相关操作，可参看7.2.1节
varoTable=document.getElementById("member");
varoTr=oTable.insertRow(oTable.rows.length);
varaText=newArray();
aText[0]=document.createTextNode(sName);
aText[1]=document.createTextNode(sClass);
aText[2]=document.createTextNode(sBirth);
aText[3]=document.createTextNode(sConstell);
aText[4]=document.createTextNode(sMobile);
for(vari=0;i<aText.length;i++){
varoTd=oTr.insertCell(i);
oTd.appendChild(aText[i]);
}
}
functionDrawTable(myXML){
//用DOM方法操作XML文档
varoMembers=myXML.getElementsByTagName("member");
varoMember="",sName="",sClass="",sBirth="",sConstell="",sMobile="";
for(vari=0;i<oMembers.length;i++){
oMember=oMembers[i];
sName=oMember.getElementsByTagName("name")[0].firstChild.nodeValue;
sClass=oMember.getElementsByTagName("class")[0].firstChild.nodeValue;
sBirth=oMember.getElementsByTagName("birth")[0].firstChild.nodeValue;
sConstell=oMember.getElementsByTagName("constell")[0].firstChild.nodeValue;
sMobile=oMember.getElementsByTagName("mobile")[0].firstChild.nodeValue;
//添加一行
addTableRow(sName,sClass,sBirth,sConstell,sMobile);
}
}
functionhandleStateChange(){
if(xmlHttp.readyState==4&&xmlHttp.status==200)
DrawTable(xmlHttp.responseXML);//responseXML获取到XML文档
}
</script>
</head>
<body>
<inputtype="button"value="获取XML"onclick="getXML('9-4.xml');"><br><br>
<tableclass="datalist"summary="listofmembersinEEStuday"id="member">
<tr>
<thscope="col">Name</th>
<thscope="col">Class</th>
<thscope="col">Birthday</th>
<thscope="col">Constellation</th>
<thscope="col">Mobile</th>
</tr>
</table>
</body>
</html>
我们可以看到，在客户端获得XML文件的代码如下：
<inputtype="button"value="获取XML"onclick="getXML('9-4.xml');">
也就是说，是直接取得XML数据的。而实际开发中返回XML数据的工作是通过服务器端（如：ASP.NET、JSP等）的代码动态生成的。换句话说，getXML('...')中的文件地址应该是.aspx或.jsp等动态页面的后缀。
使用jQuery框架实现
如果在客户端使用jQuery框架，实现AJAX获得服务器端的XML数据。
代码如下：
<html>
<head>
<title>demo</title>
<metaname="Author"content="xugang"/>
<scriptlanguage="javascript"src="jquery.min.js"></script>
<scripttype="text/javascript">
functiongetXML(addressXML){
//使用jquery的ajax方法
$.ajax({
type:"GET",
url:addressXML,
dataType:"xml",//返回类型(区分大小写)
success:function(myXML){
//each遍历每个<member>标记
$(myXML).find("member").each(
function(){
varoMember="",sName="",sClass="",sBirth="",sConstell="",sMobile="";
sName=$(this).find("name").text();
sClass=$(this).find("class").text();
sBirth=$(this).find("birth").text();
sConstell=$(this).find("constell").text();
sMobile=$(this).find("mobile").text();
//添加行
$("#member").append($("<tr><td>"+sName
+"</td><td>"+sClass
+"</td><td>"+sBirth
+"</td><td>"+sConstell
+"</td><td>"+sMobile+"</td></tr>"));
}
)
}
})
}
</script>
</head>
<body>
<inputtype="button"value="获取XML"onclick="getXML('9-4.xml');">
<br/>
<TABLEclass="datalist"id="member">
<TR>
<THscope="col">Name</TH>
<THscope="col">Class</TH>
<THscope="col">Birthday</TH>
<THscope="col">Constellation</TH>
<THscope="col">Mobile</TH>
</TR>
</TABLE>
</body>
</html>
服务器端传递XML数据的方式不变。
希望本文所述对大家的Ajax程序设计有所帮助。