如何实现AJAX对服务器返回XML
短信预约 -IT技能 免费直播动态提醒
本篇内容主要讲解“如何实现AJAX对服务器返回XML”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“如何实现AJAX对服务器返回XML”吧!
具体分析如下：
在AJAX 中，服务器端如果返回的XML 文档，则可以通过异步对象的responseXML 属性来获取器XML 数据。而开发者可以利用DOM 的相关方法对其进行处理。
假设服务器返回的XML 文档，如下所示：
<?xml version="1.0" encoding="gb2312"?>
<list>
<caption>Member List</caption>
<member>
<name>isaac</name>
<class>W13</class>
<birth>Jun 24th</birth>
<constell>Cancer</constell>
<mobile>1118159</mobile>
</member>
<member>
<name>fresheggs</name>
<class>W610</class>
<birth>Nov 5th</birth>
<constell>Scorpio</constell>
<mobile>1038818</mobile>
</member>
<member>
<name>girlwing</name>
<class>W210</class>
<birth>Sep 16th</birth>
<constell>Virgo</constell>
<mobile>1307994</mobile>
</member>
<member>
<name>tastestory</name>
<class>W15</class>
<birth>Nov 29th</birth>
<constell>Sagittarius</constell>
<mobile>1095245</mobile>
</member>
<member>
<name>lovehate</name>
<class>W47</class>
<birth>Sep 5th</birth>
<constell>Virgo</constell>
<mobile>6098017</mobile>
</member>
<member>
<name>slepox</name>
<class>W19</class>
<birth>Nov 18th</birth>
<constell>Scorpio</constell>
<mobile>0658635</mobile>
</member>
<member>
<name>smartlau</name>
<class>W19</class>
<birth>Dec 30th</birth>
<constell>Capricorn</constell>
<mobile>0006621</mobile>
</member>
<member>
<name>tuonene</name>
<class>W210</class>
<birth>Nov 26th</birth>
<constell>Sagittarius</constell>
<mobile>0091704</mobile>
</member>
<member>
<name>dovecho</name>
<class>W19</class>
<birth>Dec 9th</birth>
<constell>Sagittarius</constell>
<mobile>1892013</mobile>
</member>
<member>
<name>shanghen</name>
<class>W42</class>
<birth>May 24th</birth>
<constell>Gemini</constell>
<mobile>1544254</mobile>
</member>
<member>
<name>venessawj</name>
<class>W45</class>
<birth>Apr 1st</birth>
<constell>Aries</constell>
<mobile>1523753</mobile>
</member>
<member>
<name>lightyear</name>
<class>W311</class>
<birth>Mar 23th</birth>
<constell>Aries</constell>
<mobile>1002908</mobile>
</member>
</list>客户端获得服务器端的该XML 数据，并将其显示在表格中。代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>responseXML</title>
<style>
<!--
.datalist{
border:1px solid #744011;
font-family:Arial;
border-collapse:collapse;
background-color:#ffd2aa;
font-size:14px;
}
.datalist th{
border:1px solid #744011;
background-color:#a16128;
color:#FFFFFF;
font-weight:bold;
padding-top:4px; padding-bottom:4px;
padding-left:12px; padding-right:12px;
text-align:center;
}
.datalist td{
border:1px solid #744011;
text-align:left;
padding-top:4px; padding-bottom:4px;
padding-left:10px; padding-right:10px;
}
.datalist tr:hover, .datalist tr.altrow{
background-color:#dca06b;
}
input{
border:1px solid #744011;
color:#744011;
}
-->
</style>
<script language="javascript">
var xmlHttp;
function createXMLHttpRequest(){
if(window.ActiveXObject)
xmlHttp = new ActiveXObject("Microsoft.XMLHttp");
else if(window.XMLHttpRequest)
xmlHttp = new XMLHttpRequest();
}
function getXML(addressXML){
var url = addressXML + "?timestamp=" + new Date();
createXMLHttpRequest();
xmlHttp.onreadystatechange = handleStateChange;
xmlHttp.open("GET",url);
xmlHttp.send(null);
}
function addTableRow(sName, sClass, sBirth, sConstell, sMobile){
//表格添加一行的相关操作，可参看7.2.1节
var oTable = document.getElementById("member");
var oTr = oTable.insertRow(oTable.rows.length);
var aText = new Array();
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(var i=0;i<aText.length;i++){
var oTd = oTr.insertCell(i);
oTd.appendChild(aText[i]);
}
}
function DrawTable(myXML){
//用DOM方法操作XML文档
var oMembers = myXML.getElementsByTagName("member");
var oMember = "", sName = "", sClass = "", sBirth = "", sConstell = "", sMobile = "";
for(var i=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);
}
}
function handleStateChange(){
if(xmlHttp.readyState == 4 && xmlHttp.status == 200)
DrawTable(xmlHttp.responseXML);//responseXML获取到XML文档
}
</script>
</head>
<body>
<input type="button" value="获取XML" onclick="getXML('9-4.xml');"><br><br>
<table class="datalist" summary="list of members in EE Studay" id="member">
<tr>
<th scope="col">Name</th>
<th scope="col">Class</th>
<th scope="col">Birthday</th>
<th scope="col">Constellation</th>
<th scope="col">Mobile</th>
</tr>
</table>
</body>
</html>我们可以看到，在客户端获得XML 文件的代码如下：
<input type="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>
<meta name="Author" content="xugang" />
<script language="javascript" class="lazy" data-src="jquery.min.js"></script>
<script type="text/javascript">
function getXML(addressXML){
//使用jquery的ajax方法
$.ajax({
type:"GET",
url:addressXML,
dataType:"xml", //返回类型(区分大小写)
success:function(myXML){
//each 遍历每个<member>标记
$(myXML).find("member").each(
function(){
var oMember="",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>
<input type="button" value="获取XML" onclick="getXML('9-4.xml');">
<br/>
<TABLE class="datalist" id="member">
<TR>
<TH scope="col">Name</TH>
<TH scope="col">Class</TH>
<TH scope="col">Birthday</TH>
<TH scope="col">Constellation</TH>
<TH scope="col">Mobile</TH>
</TR>
</TABLE>
</body>
</html>服务器端传递XML 数据的方式不变。
到此，相信大家对“如何实现AJAX对服务器返回XML”有了更深的了解，不妨来实际操作一番吧！这里是编程网网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
