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\" 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程序设计有所帮助。
本文地址：https://www.stayed.cn/item/7809
转载请注明出处。
本站部分内容来源于网络,如侵犯到您的权益,请 联系我
我的博客
人生若只如初见，何事秋风悲画扇。
我的标签
随笔档案
- 2024-02(2)
- 2023-06(1)
- 2023-05(1)
- 2023-04(14)
- 2023-03(3)
- 2023-01(6)
- 2022-12(5)
- 2022-11(5)
- 2022-07(2)
- 2022-06(4)
- 2022-05(3)
- 2022-03(1)
- 2021-12(6)
- 2021-11(1)
- 2021-10(3)
- 2021-09(5)
- 2021-07(5)
- 2021-02(2)
- 2021-01(7)
- 2020-12(18)
- 2020-11(14)
- 2020-10(12)
- 2020-09(10)
- 2020-08(22)
- 2020-07(2)
- 2020-06(1)
- 2020-04(5)
- 2020-03(9)
- 2020-02(7)
- 2020-01(9)
- 2019-12(8)
- 2019-11(10)
- 2019-10(11)
- 2019-09(17)
- 2019-08(16)
- 2019-07(6)
- 2019-06(3)
- 2019-04(1)
- 2019-03(8)
- 2019-02(5)
- 2019-01(1)
- 2018-11(2)
- 2018-10(3)
- 2018-09(1)
- 2018-08(3)
- 2018-07(3)
- 2018-06(7)
- 2018-04(4)
- 2018-03(5)
- 2018-02(4)
- 2018-01(22)
- 2017-12(3)
- 2017-11(5)
- 2017-10(15)
- 2017-09(26)
- 2017-08(1)
- 2017-07(3)