强烈推荐-ajax开发者必看的文章第3/3页

更新时间：2007年03月07日 00:00:00 作者：

　例子7 -- sample6_1.htm：

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>无标题文档</title>
<script language="javascript">
function loadXML(handler) {
var url = "employees.xml";
if(document.implementation&&document.implementation.createDocument) {
var xmldoc = document.implementation.createDocument("", "", null);
xmldoc.onload = handler(xmldoc, url);
xmldoc.load(url);
}
else if(window.ActiveXObject) {
var xmldoc = new ActiveXObject("Microsoft.XMLDOM");
xmldoc.onreadystatechange = function() {
if(xmldoc.readyState == 4) handler(xmldoc, url);
}
xmldoc.load(url);
}
}
function makeTable(xmldoc, url) {
var table = document.createElement("table");
table.setAttribute("border","1");
table.setAttribute("width","600");
table.setAttribute("class","tab-content");
document.body.appendChild(table);
var caption = "Employee Data from " + url;
table.createCaption().appendChild(document.createTextNode(caption));
var header = table.createTHead();
var headerrow = header.insertRow(0);
headerrow.insertCell(0).appendChild(document.createTextNode("姓名"));
headerrow.insertCell(1).appendChild(document.createTextNode("职业"));
headerrow.insertCell(2).appendChild(document.createTextNode("工资"));
var employees = xmldoc.getElementsByTagName("employee");
for(var i=0;i<employees.length;i++) {
var e = employees[i];
var name = e.getAttribute("name");
var job = e.getElementsByTagName("job")[0].firstChild.data;
var salary = e.getElementsByTagName("salary")[0].firstChild.data;
var row = table.insertRow(i+1);
row.insertCell(0).appendChild(document.createTextNode(name));
row.insertCell(1).appendChild(document.createTextNode(job));
row.insertCell(2).appendChild(document.createTextNode(salary));
}
}
</script>
<link href="css/style.css" rel="stylesheet" type="text/css">
</head>
<body onLoad="loadXML(makeTable)">
</body>
</html>
供读取调用的XML文档 – employees.xml：

<?xml version="1.0" encoding="gb2312"?>
<employees>
<employee name="J.Doe">
<job>Programmer</job>
<salary>32768</salary>
</employee>
<employee name="A.Baker">
<job>Sales</job>
<salary>70000</salary>
</employee>
<employee name="Big Cheese">
<job>CEO</job>
<salary>100000</salary>
</employee>
</employees>

7.5、处理XML文档
　　脱离XML文档的AJAX是不完整的。在本部分未完成之前，有读者说AJAX改名叫AJAH（H应该代表HTML吧）比较合适。应该承认，XML文档在数据的结构化表示以及接口对接上有先天的优势，但也不是所有的数据都应该用XML表示。有些时候单纯的文本表示可能会更合适。下面先举个AJAX处理返回XML文档的例子再讨论什么时候使用XML。

7.5.1、处理返回的XML
　　 例子8 -- sample7_1.htm：
　　在这个例子中，我们采用之前确定的AJAX开发框架，稍微修改一下body内容和processRequest的相应方式，将先前的employees.xml的内容读取出来并显示。

　　body的内容如下：

<input type="button" name="read"
value="读取XML" onClick="send_request('employees.xml')">
processRequest()方法修改如下：
// 处理返回信息的函数
function processRequest() {
if (http_request.readyState == 4) { // 判断对象状态
if (http_request.status == 200) { // 信息已经成功返回，开始处理信息
var returnObj = http_request.responseXML;
var xmlobj = http_request.responseXML;
var employees = xmlobj.getElementsByTagName("employee");
var feedbackStr = "";
for(var i=0;i<employees.length;i++) { // 循环读取employees.xml的内容
var employee = employees[i];
feedbackStr += "员工：" + employee.getAttribute("name");
feedbackStr +=
" 职位：" + employee.getElementsByTagName("job")[0].firstChild.data;
feedbackStr +=
" 工资：" + employee.getElementsByTagName("salary")[0].firstChild.data;
feedbackStr += "\r\n";
}
alert(feedbackStr);
} else { //页面不正常
alert("您所请求的页面有异常。");
}
}
}

　　运行一下，看来效果还不错：

7.5.2、选择合适的XML生成方式

　　现在的web应用程序往往采用了MVC三层剥离的设计方式。XML作为一种数据保存、呈现、交互的文档，其数据往往是动态生成的，通常由JavaBean转换过来。由JavaBean转换成XML文档的方式有好几种，选择合适的转换方式往往能达到事半功倍的效果。下面介绍两种常用的方式，以便需要的时候根据情况取舍。

　　A、类自行序列化成XML
　　类自行序列化成XML即每个类都实现自己的toXML()方法，选择合适的API、适当的XML结构、尽量便捷的生成逻辑快速生成相应的XML文档。显然，这种方式必须要求每个类编写专门的XML生成代码，每个类只能调用自己的toXML()方法。应用诸如JDOM等一些现成的API，可以减少不少开发投入。例子9是一个利用JDOM的API形成的toXML()方法。

　　例子9 -- toXml() 的 JDOM 实现 -- Employ类的toXml()方法：

public Element toXml() {
Element employee = new Element(“employee”);
Employee.setAttribute(“name”,name);
Element jobE = new Element(“job”).addContent(job);
employee.setContent(jobE);
Element salaryE = new Element(“salary”).addContent(salary);
employee.setContent(salaryE);
return employee;
}

　　JDOM提供了现成的API，使得序列化成XML的工作更加简单，我们只需要把toXML()外面包装一个Document，然后使用XMLOutputter把文档写入servlet就可以了。toXml()允许递归调用其子类的toXML()方法，以便生成包含子图的XML文档。

　　使用类自行序列化成XML的方式，要每个类都实现自己的toXML()方法，而且存在数据模型与视图耦合的问题，即要么为每个可能的视图编写独立的toXML()方法，要么心甘情愿接收冗余的数据，一旦数据结构或者文档发生改变，toXML()就要做必要的修改。

　　B、页面模板生成XML方式
　　一般的，可以采用通用的页面模板技术来生成XML文档，这个XML文档可以符合任何需要的数据模型，供AJAX灵活的调用。另外，模板可以采用任何标记语言编写，提高工作效率。下面是一个采用Struts标签库编写的XML文档，输出之前提到的employees.xml：

　　Sample8_2.jsp：

<%@ page contentType="application/xml; charset=gb2312" import="Employee"%>
<%@ page import="java.util.Collection,java.util.ArrayList"%>
<?xml version="1.0"?>
<%@ taglib uri="/WEB-INF/struts-logic.tld" prefix="logic" %>
<%@ taglib uri="/WEB-INF/struts-bean.tld" prefix="bean"%>
<%
Employee em1 = new Employee();
em1.setName("J.Doe");
em1.setJob("Programmer");
em1.setSalary("32768");
Employee em2 = new Employee();
em2.setName("A.Baker");
em2.setJob("Sales");
em2.setSalary("70000");
Employee em3 = new Employee();
em3.setName("Big Cheese");
em3.setJob("CEO");
em3.setSalary("100000");
Collection employees = new ArrayList();
employees.add(em1);
employees.add(em2);
employees.add(em3);
pageContext.setAttribute("employees",employees);
%>
<employees>
<logic:iterate name="employees" id="employee">
<employee name="<bean:write name='employee' property='name'/>">
<job><bean:write name="employee" property="job"/></job>
<salary><bean:write name="employee" property="salary"/></salary>
</employee>
</logic:iterate>
</employees>

　　采用页面模板生成XML方式，需要为每个需要的的数据模型建立一个对立的JSP文件，用来生成符合规范的XML文档，而不能仅仅在类的toXML()方法中组织对象图来实现。不过，倒是可以更加方便的确保标记匹配、元素和属性的顺序正确以及XML实体正确转义。

　　参考资料中Philip McCarthy的文章还描述了一种Javascript对象标注的生成方式，本文在此不赘述。有兴趣的读者可以自行查看了解。

7.5.3、如何在使用XML还是普通文本间权衡
　　使用XML文档确实有其方便之处。不过XML文档的某些问题倒是要考虑一下，比如说延迟，即服务器不能立即解析XML文档成为DOM模型。这个问题在一定程度上会影响AJAX要求的快速反应能力。另外，某些情况下我们并不需要使用XML来表示数据，比如说数据足够简单成只有一个字符串而已。就好像我们之前提到的数据校验和级联菜单的例子一样。所以，个人认为在下面这些情况下可以考虑使用XML来作为数据表示的介质：

数据比较复杂，需要用XML的结构化方式来表示
不用考虑带宽和处理效率支出
与系统其他API或者其他系统交互，作为一种数据中转中介
需要特定各式的输出视图而文本无法表示的

　　总之，要认真评估两种表示方式的表示成本和效率，选择合适的合理的表示方式。　　

　　在关于AJAX的系列文章的下一篇，我们将综合使用DOM和XML，来实现一个可以持久化的简单留言簿。另外，还将试着模拟MSN Space的部分功能，来体会AJAX的魅力。

参考文章：

作者：	fanscial	标题：	《AJAX简介》
网址：	http://www.blogjava.net/fanscial/archive/2005/08/31/11628.html
作者：	Amour GUO	标题：	《AJAX内部交流文档》
网址：	http://www.dragonson.com/doc/ajax.html
作者：	MoztwWiki	标题：	《AJAX上手篇》
网址：	http://wiki.moztw.org/index.php/AJAX_%E4%B8%8A%E6%89%8B%E7%AF%87
作者：	Philip McCarthy	标题：	面向Java开发人员的Ajax:构建动态的Java应用程序
网址：	http://kb.csdn.net/java/Articles/200510/bed0423e-5297-49c9-9464-0e3eb733c8b5.html
作者：	Philip McCarthy	标题：	面向Java开发人员的Ajax:Ajax的Java对象序列化
网址：	http://kb.csdn.net/java/Articles/200510/a5b630cf-a2c2-46f1-8e3b-eadde723e734.html
作者：	David Flanagan	书名：	《Javascript权威指南》

上一页 1 23阅读全文

强烈推荐-ajax开发者必看的文章

如何解决Ajax访问不断变化的session的值不一致以及HTTP协议中的GET、POST的区别
这篇文章主要介绍了Ajax访问不断变化的session的值不一致解决方法以及HTTP协议中的GET、POST的区别的相关资料,需要的朋友可以参考下
2015-09-09
解决ajax传过来的值后台接收不到的问题
今天小编就为大家分享一篇解决ajax传过来的值后台接收不到的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-08-08
理解jquery ajax中的datatype属性选项值
jquery中ajax的dataType属性用于指定服务器返回的数据类型，如果不指定，jQuery 将自动根据HTTP包MIME信息来智能判断，如果datatype选项不填写的话，会将返回的数据当成字符串处理。
2015-10-10
Ajax基础与登入教程
Ajax 是 Asynchronous JavaScript and XML的缩写。其优点可以减轻服务器的负担,按需取数据,最大程度的减少冗余请求。接下来通过本文给大家介绍Ajax基础与登入教程，需要的的朋友参考下
2017-03-03
ajax获得json对象数组循环输出数据的方法
今天小编就为大家分享一篇ajax获得json对象数组循环输出数据的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-08-08
Ajax 向数据库修改和添加功能(较简答)
这篇文章主要介绍了Ajax 向数据库修改和添加功能(较简答)，非常不错，具有参考借鉴价值，需要的朋友可以参考下
2017-03-03
ajax+springmvc实现C与View之间的数据交流方法
下面小编就为大家带来一篇ajax+springmvc实现C与View之间的数据交流方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-03-03
用ajax实现预览链接可以看到链接的内容
用CSS设置预览弹出窗口的样式、用JavaScript进行服务器请求并且显示弹出窗口,需要的朋友可以参考下
2014-08-08
ajax 调用后台方法大家可以讨论下
我曾使用过的三种调用后台的代码，需要的朋友可以参考下，如果发现更好的可以留言。
2009-10-10
ajax详解_动力节点Java学院整理
这篇文章主要介绍了ajax详解，详细的介绍了Ajax 简史以及基本用法，有兴趣的可以了解一下
2017-07-07