您的位置：首页 > 其它

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

2011-03-08 23:47 411 查看
 原创地址：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:

<?xml version='1.0' encoding='UTF-8'?>  

<list>  

   <emp>  

     <empno>1</empno>  

     <empname>张三</empname>  

     <emppass>123</emppass>  

     <empsex>男</empsex>  

     <empsalary>10000</empsalary>  

   </emp>  

     

   <emp>  

     <empno>2</empno>  

     <empname>李四</empname>  

     <emppass>123</emppass>  

     <empsex>女</empsex>  

     <empsalary>10000</empsalary>  

   </emp>  

     

   <emp>  

     <empno>3</empno>  

     <empname>王五</empname>  

     <emppass>123</emppass>  

     <empsex>男</empsex>  

     <empsalary>10000</empsalary>  

   </emp>  

     

   <emp>  

     <empno>4</empno>  

     <empname>大头6</empname>  

     <emppass>123</emppass>  

     <empsex>男</empsex>  

     <empsalary>10000</empsalary>  

   </emp>  

   

</list>  

ajax请求的js代码ajax.js：

Code:

//ajax引擎函数  

function ajaxget(url,params,fun_name){  

  

//初始化Ajax引擎  

var xhr = new XMLHttpRequest();  

  

var url1=url+"?"+params+"&r="+Math.random();  

//创建一个新的请求  

xhr.open("get",url1,true);  

//发送请求，并且接收服务器回应  

xhr.send(null);  

//处理服务器返回的结果  

xhr.onreadystatechange=function (){  

//判断服务器交互状态值是否为4，为4表明交互完成  

     if(xhr.readyState==4){  

       //调用另外一个时间处理的方法  

       fun_name(xhr);  

     }  

  

   }  

  

     

}  

客户端代码请求：

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  

<html xmlns="http://www.w3.org/1999/xhtml">  

<head>  

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />  

<script language="javascript" type="text/javascript" src="../include/ajax.js"></script>  

<script language="javascript" type="text/javascript" >  

function dispTableXml(){  

//定义请求的url  

  var url="./response-xml-server.xml";  

//定义参数  

  var params="page=1";  

//调用ajax的引擎，由指定函数返回结果  

  ajaxget(url,params,disp);  

  

}  

  

function disp(xhr){  

//处理服务器端返回的xml代码  

  

//创建一个xml对象，根节点  

var dom = xhr.responseXML;  

  

var emp = dom.getElementsByTagName("emp");  

//alert(emp.length);  

//创建表格  

var table = document.createElement("table");  

var arr = new Array("empno","empname","emppass","empsex","empsalary");  

table.setAttribute("border","2");  

  

for(var i=0;i<emp.length;i++){  

   //创建每一行  

   var tr = document.createElement("tr");  

   for(var j=0;j<arr.length;j++){  

      //创建一列  

      var td = document.createElement("td");  

      //获取每一个emp对象的 属性值  

        

      var text=emp[i].getElementsByTagName(arr[j])[0].firstChild.nodeValue;  

      //创建一个文本节点  

      var textnode = document.createTextNode(text);  

      //把文本节点追加到td中  

       td.appendChild(textnode);  

      //把td追加到tr中  

       tr.appendChild(td);  

   }  

     

  //将每一行添加到table中  

  table.appendChild(tr);  

  

}  

  

//创建每一个文本节点  

var div=document.getElementById("div1");  

     div.appendChild(table);  

}  

  

  

</script>  

<title>无标题文档</title>  

</head>  

  

<body>  

<input type="button" name="button1" value="XML显示表格" onclick="dispTableXml()" />  

<hr />  

<div id="div1"></div>  

</body>  

</html>  

 

实现的效果：把xml文档的内容通过Javascript Dom方法转换成Html的table显示

有需要的朋友可以学习下

资源下载地址：ajax20110308.zip

原文地址：http://www.3gput.com/forum.php?mod=viewthread&tid=130&extra=

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  xml ajax 服务器 encoding table 语言
相关文章推荐
新的分享
章节导航