如何实现AJAX对服务器返回XML

本篇内容主要讲解“如何实现AJAX对服务器返回XML”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“如何实现AJAX对服务器返回XML”吧!

十多年建站经验， 网站设计、网站制作客户的见证与正确选择。成都创新互联提供完善的营销型网页建站明细报价表。后期开发更加便捷高效，我们致力于追求更美、更快、更规范。

具体分析如下：

在AJAX 中，服务器端如果返回的XML 文档，则可以通过异步对象的responseXML 属性来获取器XML 数据。而开发者可以利用DOM 的相关方法对其进行处理。

假设服务器返回的XML 文档，如下所示：

 Member List
 
  isaac
  W13
  Jun 24th
  Cancer
  1118159
 
 
  fresheggs
  W610
  Nov 5th
  Scorpio
  1038818
 
 
  girlwing
  W210
  Sep 16th
  Virgo
  1307994
 
 
  tastestory
  W15
  Nov 29th
  Sagittarius
  1095245
 
 
  lovehate
  W47
  Sep 5th
  Virgo
  6098017
 
 
  slepox
  W19
  Nov 18th
  Scorpio
  0658635
 
 
  smartlau
  W19
  Dec 30th
  Capricorn
  0006621
 
 
  tuonene
  W210
  Nov 26th
  Sagittarius
  0091704
 
 
  dovecho
  W19
  Dec 9th
  Sagittarius
  1892013
 
 
  shanghen
  W42
  May 24th
  Gemini
  1544254
 
 
  venessawj
  W45
  Apr 1st
  Aries
  1523753
 
 
  lightyear
  W311
  Mar 23th
  Aries
  1002908
 

客户端获得服务器端的该XML 数据，并将其显示在表格中。代码如下：

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






 
  Name
  Class
  Birthday
  Constellation
  Mobile
 

我们可以看到，在客户端获得XML 文件的代码如下：

也就是说，是直接取得XML 数据的。而实际开发中返回XML 数据的工作是通过服务器端（如：ASP.NET、JSP等）的代码动态生成的。换句话说，getXML('...') 中的文件地址应该是.aspx 或.jsp等动态页面的后缀。

使用jQuery 框架实现

如果在客户端使用jQuery 框架，实现AJAX 获得服务器端的XML数据。

代码如下：

 
 
 
 
 function getXML(addressXML){
 //使用jquery的ajax方法
 $.ajax({
   type:"GET",
   url:addressXML,
   dataType:"xml", //返回类型(区分大小写)
   success:function(myXML){
   //each 遍历每个标记
   $(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($(""+sName
     +"" + sClass
     +"" + sBirth
     +"" + sConstell
     +"" + sMobile +""));
   }
   )
   }
 })
 }
 


 
 

 
 
 Name
 Class
 Birthday
 Constellation
 Mobile
 
 

服务器端传递XML 数据的方式不变。

到此，相信大家对“如何实现AJAX对服务器返回XML”有了更深的了解，不妨来实际操作一番吧！这里是创新互联网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！