| 学习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：
- <?xml?version='1.0'?encoding='UTF-8'?>??
- <list>??
- ???<emp>??
- ?????<empno>1</empno>??
- ?????<empname>张三</empname>??
- ?????<emppass>123</emppass>??
- ?????<empsex>男</empsex>??
- ?????<empsalary>10000</empsalary>??
- ???</emp>??
- ?????
- ?????<empno>2</empno>??
- ?????<empname>李四</empname>??
- ?????<empsex>女</empsex>??
- ?????<empno>3</empno>??
- ?????<empname>王五</empname>??
- ?????<empno>4</empno>??
- ?????<empname>大头6</empname>??
- ???
- </list>??
ajax请求的js代码ajax.js：
- ??
- function?ajaxget(url,params,fun_name){??
- ??
- ??
- var?xhr?=?new?XMLHttpRequest();??
- ??
- var?url1=url+"?"+params+"&r="+Math.random();??
- ??
- xhr.open("get",url1,true);??
- ??
- xhr.send(null);??
- ??
- xhr.onreadystatechange=function?(){??
- ??
- ?????if(xhr.readyState==4){??
- ?????????
- ???????fun_name(xhr);??
- ?????}??
- ???}??
- ?????
- }??
客户端代码请求：
<!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,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= |
