学习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>
-
-
<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:
-
-
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,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=
|