• 企业400电话
  • 微网小程序
  • AI电话机器人
  • 电商代运营

    • 全 部 栏 目

    企业400电话 网络优化推广 AI电话机器人 呼叫中心 网站建设 商标✡知产 微网小程序 电商运营 彩铃•短信 增值拓展业务
    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;iaText.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;ioMembers.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程序设计有所帮助。

    您可能感兴趣的文章:
    • JS使用ajax从xml文件动态获取数据显示的方法
    • Ajax核心XMLHttpRequest总结
    • php+xml结合Ajax实现点赞功能完整实例
    • Jquery Ajax解析XML数据(同步及异步调用)简单实例
    • Jquery通过Ajax访问XML数据的小例子
    • AJAX解析XML实例之下拉框省、市二级联动
    • AJAX使用post发送数据xml格式接受数据
    • AJAX(XMLHttpRequest.status)状态码
    • 如何用ajax来创建一个XMLHttpRequest对象
    • ajax遍历xml文档的方法
    上一篇：JavaScript基于Ajax实现不刷新在网页上动态显示文件内容
    下一篇：AJAX使用get与post模式的区别分析
  • 相关文章
    • 

    © 2016-2020 巨人网络通讯 版权所有

    《增值电信业务经营许可证》 苏ICP备15040257号-8

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