现在的位置: 首页 > 综合 > 正文

[原创] ajax解析xml详解，看后不用再看别的帖子了

2013年10月04日 ⁄ 综合 ⁄ 共 4005字 ⁄ 字号 小 中 大 ⁄ 评论关闭

 原创地址：http://www.3gput.com/forum.php?mod=viewthread&tid=130  也是本人原创论坛，请大家支持

学习ajax的朋友一定知道，ajax的服务端可以返回多种格式的数据给客户端，以达到方便交互的效果，服务器返回Xml有的优点是：
1） 表现更加清晰，很容易看明白，也很通用
2）实现数据和视图的分离，使得客户端可以灵活的运用数据，显示不同的效果等
说了那么多xml,肯定有好多朋友还在犯嘀咕，xml到底是什么东西啊？下面给大家提供些资料仅供参考

Xml的基本概念：

      XML（Extensible Markup Language）即可扩展标记语言，它与HTML一样，都是SGML(Standard Generalized Markup Language,标准通用标记语言)。Xml是Internet环境中跨平台的，依赖于内容的技术，是当前处理结构化文档信息的有力工具。扩展标记语言XML是一种简单的数据存储语言，使用一系列简单的标记描述数据，而这些标记可以用方便的方式建立，虽然XML占用的空间比二进制数据要占用更多的空间，但XML极其简单易于掌握和使用。


      XML与HTML的设计区别是：XML是用来存储数据的，重在数据本身。而HTML是用来定义数据的，重在数据的显示模式。

  XML的简单使其易于在任何应用程序中读写数据，这使XML很快成为数据交换的唯一公共语言，虽然不同的应用软件也支持其它的数据交换格式，但不久之后他们都将支持XML，那就意味着程序可以更容易的与Windows、Mac OS, Linux以及其他平台下产生的信息结合，然后可以很容易加载XML数据到程序中并分析他，并以XML格式输出结果。


Xml的基本格式： 文档中成对的自定义标签出现
看一个实例：
<?xml version='1.0' encoding='UTF-8'?>
<list>
   <emp>
     <empno>1</empno>
     <empname>张三</empname>
     <emppass>123</emppass>
     <empsex>男</empsex>
     <empsalary>10000</empsalary>
   </emp>
</list>

那如果ajax和服务端交互的过程中，服务器返回一个xml,我们怎么处理呢？下面我们用一个实例来看看
客户端请求代码 responseXML.html：

Code:

  1. <?xml version='1.0' encoding='UTF-8'?>  
  2. <list>  
  3.    <emp>  
  4.      <empno>1</empno>  
  5.      <empname>张三</empname>  
  6.      <emppass>123</emppass>  
  7.      <empsex>男</empsex>  
  8.      <empsalary>10000</empsalary>  
  9.    </emp>  
  10.      
  11.    <emp>  
  12.      <empno>2</empno>  
  13.      <empname>李四</empname>  
  14.      <emppass>123</emppass>  
  15.      <empsex>女</empsex>  
  16.      <empsalary>10000</empsalary>  
  17.    </emp>  
  18.      
  19.    <emp>  
  20.      <empno>3</empno>  
  21.      <empname>王五</empname>  
  22.      <emppass>123</emppass>  
  23.      <empsex>男</empsex>  
  24.      <empsalary>10000</empsalary>  
  25.    </emp>  
  26.      
  27.    <emp>  
  28.      <empno>4</empno>  
  29.      <empname>大头6</empname>  
  30.      <emppass>123</emppass>  
  31.      <empsex>男</empsex>  
  32.      <empsalary>10000</empsalary>  
  33.    </emp>  
  34.    
  35. </list>  

ajax请求的js代码ajax.js：

Code:

  1. //ajax引擎函数  
  2. function ajaxget(url,params,fun_name){  
  3.   
  4. //初始化Ajax引擎  
  5. var xhr = new XMLHttpRequest();  
  6.   
  7. var url1=url+"?"+params+"&r="+Math.random();  
  8. //创建一个新的请求  
  9. xhr.open("get",url1,true);  
  10. //发送请求，并且接收服务器回应  
  11. xhr.send(null);  
  12. //处理服务器返回的结果  
  13. xhr.onreadystatechange=function (){  
  14. //判断服务器交互状态值是否为4，为4表明交互完成  
  15.      if(xhr.readyState==4){  
  16.        //调用另外一个时间处理的方法  
  17.        fun_name(xhr);  
  18.      }  
  19.   
  20.    }  
  21.   
  22.      
  23. }  

客户端代码请求：

Code:

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />  
  5. <script language="javascript" type="text/javascript" src="../include/ajax.js"></script>  
  6. <script language="javascript" type="text/javascript" >  
  7. function dispTableXml(){  
  8. //定义请求的url  
  9.   var url="./response-xml-server.xml";  
  10. //定义参数  
  11.   var params="page=1";  
  12. //调用ajax的引擎，由指定函数返回结果  
  13.   ajaxget(url,params,disp);  
  14.   
  15. }  
  16.   
  17. function disp(xhr){  
  18. //处理服务器端返回的xml代码  
  19.   
  20. //创建一个xml对象，根节点  
  21. var dom = xhr.responseXML;  
  22.   
  23. var emp = dom.getElementsByTagName("emp");  
  24. //alert(emp.length);  
  25. //创建表格  
  26. var table = document.createElement("table");  
  27. var arr = new Array("empno","empname","emppass","empsex","empsalary");  
  28. table.setAttribute("border","2");  
  29.   
  30. for(var i=0;i<emp.length;i++){  
  31.    //创建每一行  
  32.    var tr = document.createElement("tr");  
  33.    for(var j=0;j<arr.length;j++){  
  34.       //创建一列  
  35.       var td = document.createElement("td");  
  36.       //获取每一个emp对象的 属性值  
  37.         
  38.       var text=emp[i].getElementsByTagName(arr[j])[0].firstChild.nodeValue;  
  39.       //创建一个文本节点  
  40.       var textnode = document.createTextNode(text);  
  41.       //把文本节点追加到td中  
  42.        td.appendChild(textnode);  
  43.       //把td追加到tr中  
  44.        tr.appendChild(td);  
  45.    }  
  46.      
  47.   //将每一行添加到table中  
  48.   table.appendChild(tr);  
  49.   
  50. }  
  51.   
  52. //创建每一个文本节点  
  53. var div=document.getElementById("div1");  
  54.      div.appendChild(table);  
  55. }  
  56.   
  57.   
  58. </script>  
  59. <title>无标题文档</title>  
  60. </head>  
  61.   
  62. <body>  
  63. <input type="button" name="button1" value="XML显示表格" onclick="dispTableXml()" />  
  64. <hr />  
  65. <div id="div1"></div>  
  66. </body>  
  67. </html>  

 

实现的效果：把xml文档的内容通过Javascript Dom方法转换成Html的table显示
有需要的朋友可以学习下
资源下载地址：ajax20110308.zip

原文地址：http://www.3gput.com/forum.php?mod=viewthread&tid=130&extra=
返回
【上篇】
【下篇】

作者:

抱歉!评论已关闭.

返回首页

Copyright © 2013-2018 学步园  保留所有权利.
软文销售 QQ客服：2265327166 点击这里给我发消息（其他合作也可洽谈）
必威体育
必威电竞