AJAX对服务器返回XML的处理方法

程序员文章站 2022-06-14 15:21:31

本文实例讲述了ajax对服务器返回xml的处理方法。分享给大家供大家参考。具体分析如下：在ajax 中，服务器端如果返回的xml 文档，则可以通过异步对象的respon...

本文实例讲述了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程序设计有所帮助。

上一篇：基于firefox实现ajax图片上传

下一篇： Ajax加载外部页面弹出层效果实现方法

AJAX对服务器返回XML的处理方法

Nginx服务器中处理AJAX跨域请求的配置方法讲解

Ajax上传实现根据服务器端返回数据进行js处理的方法

AJAX对服务器返回XML的处理方法

js对ajax返回数组的处理介绍

ThinkPHP处理Ajax返回的方法

js+ajax处理java后台返回的json对象循环创建到表格的方法

AJAX处理以XML返回的响应

Ajax对xml信息的接收和处理操作实例分析

Ajax对缓存的处理方法实例分析

ajax处理返回的json格式数据方法