AJAX对服务器返回XML的处理方法
- 作者: 爱冰冰
- 来源: 51数据库
- 2021-08-27
本文实例讲述了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程序设计有所帮助。
推荐阅读
