国产亚洲漂亮白嫩美女在线,亚洲精品无码专区2,久久亚洲AV成人无码

TrampEagle — Sat, 11 Feb 2006 06:06:00 GMT

摘要: 原文引自�Q�http://www.javaeye.com/pages/viewpage.action?pageId=1131 prototype1.3.1源代码解�?作者：醒来�~�辑�Q�robbinprototype.js/** * 定义一个全局对象, 属�?Version 在发布的时候会替换为当前版本号 */ var Prototype = { Version: '1.3.1', ... 阅读全文

TrampEagle 2006-02-11 14:06 发表评论

TrampEagle — Fri, 13 Jan 2006 04:50:00 GMT

引自�Q?a href="/zyb9114/articles/23357.html">http://www.tkk7.com/zyb9114/articles/23357.html

AJAX全称为“Asynchronous JavaScript and XML”（异步JavaScript和XML�Q�，是指一�U�创��Z��互式�|�页应用的网��开发技术。它有机地包含了以下几种技术：

Ajax�Q�Asynchronous JavaScript + XML�Q�的定义

��Z��web标准�Q�standards-based presentation�Q�XHTML+CSS的表�C�；

使用 DOM�Q�Document Object Model�Q�进行动态显�C�及交互�Q?

使用 XML �?XSLT �q�行数据交换及相��x��作；

使用 XMLHttpRequest �q�行异步数据查询、检索；

使用 JavaScript ��所有的东西�l�定在一赗��?br />
�c�M��于DHTML或LAMP�Q�AJAX不是指一�U�单一的技术，而是有机地利用了一�p�d��相关的技术。事实上�Q�一些基于AJAX的“派�?合成”式�Q�derivative/composite�Q�的技术正在出玎ͼ�如“AFLAX”�?/p>

AJAX的应用��用支持以上技术的web��览器作��行��^台。这些浏览器目前包括�Q�Mozilla、Firefox、Internet Explorer、Opera、Konqueror及Safari。但是Opera不支持XSL格式对象�Q�也不支持XSLT。[1]

与传�l�的web应用比较

传统的web应用允许用户填写表单(form)�Q�当提交表单时就向web服务器发送一个请求。服务器接收�q�处理传来的表单�Q�然后返回一个新的网��c��这个做法浪费了许多带宽�Q�因为在前后两个��面中的大部分HTML代码往往是相同的。由于每�ơ应用的交互都需要向服务器发送请求，应用的响应时间就依赖于服务器的响应时间。这��D��了用��L��面的响应比本地应用慢得多�?/p>

与此不同�Q�AJAX应用可以仅向服务器发送�ƈ取回必需的数据，它��用SOAP或其它一些基于XML的web service接口�Q��ƈ在客��L��采用JavaScript处理来自服务器的响应。因为在服务器和��览器之间交换的数据大量减少�Q�结果我们就能看到响应更快的应用。同时很多的处理工作可以在发��求的客户端机器上完成�Q�所以Web服务器的处理旉��也减��了�?br />

传统web应用与AJAX应用的比较：处理用户交互

传统web应用与AJAX应用的比较：交互模式

微��Y的Ajax

微��Y目前目前对于通过Ajax风格的编�E�在��览器中实现日益��行的富客户端应用比较感兴趣。今后的IE中将拥有Ajax的所有东襎쀔—DHTML、JScript和XmlHttp。实际上Outlook Web Acces�?998�q�开始就已经提供了这�U�伟大的��览体验了。在ASP.NET 2.0中，微��Y使用异步回调及舒适的Ajax风格的应用程序的�~�写更加��单，�q�且�Q�微软�ؓ此提供了内徏的控件�?/p>

最�q�，几乎所有的��览器都提供了Ajax所需的技术，使用�q�种模式的富客户端应用程序也不断出现。今天，世界上出��C��不计其数的Ajax风格的站点，包括Google的很多站炏V��A9和Flickr。微软的很多站点也��用了�q�项技术，如Start.com和MSN虚拟地球�?/p>

Ajax的风行说明用户对于丰富的Web体验的需求日益增�ѝ��然而，开发和调试Ajax风格的Web应用�E�序是一��w��常艰隄��工作。要�~�写一个丰富的Web UI�Q�开发者需要详�l�地掌握DHTML和JavaScript�Q��ƈ且还要掌握各�U�浏览器之间在设计细节上的不同。然而没有那些工兯��够简化这些应用程序的设计和开发。最后，调试和测试这些应用程序会变得异常困难�?/p>

微��Y致力于简化Ajax风格Web应用的开发，�q�提供丰富的、可交互的和个性化的用户体验。开发者可以对客户端脚本不甚了解；但他们可以很�Ҏ��地开发和调试�q�种应用�E�序�?/p>

��Z��q�一目的�Q�微软启动了一个新的项目，研发代号“Atlas”。Atlas为开发这带来了如下特性：
·Atlas客户端脚本框�?br class="" />·Atlas的ASP.NET服务器控�?br class="" />·ASP.NET Web Services集成
·Atlas的ASP.NET构徏�?br class="" />·客户端构建块服务

你可能会问的一个问题是�Q�Atlas如何在Avalon和智能客��L��上��用？

我们可以看到�Q�Atlas是编写丰富的、可交互的和个性化的Web��览器应用程序的最好方式。而Avalon是微软的下一代表现层模型�Q�可以在Windows�q�_��上提供最丰富的用户体验。Avalon��用最新的媒体集成功能和硬件加速设备，提供卓越的视觉体验。Avalon��带来超��浏览器的体验�?/p>

当然�Q�当你构建Avalon应用�E�序的时候，你依然可以重用ASP.NET和Atlas中的�~�程模型。例如，Avalon客户端上依然可以使用ASP.NET构徏块服务和客户端构建块服务。这�U�模型可以��你��^滑地�q�渡��C��一代应用程序上�?/p>

微��Y提供了一个工具包�Q�用来完成Ajax的功能，�U�C��Atlas。从微��Y的Scott Guthrie的blog上看来，�q�个东西应该是ASP.NET 2.0里面的。Scott肯定地表�C�，“Atlas客户端脚本框�Ӟ��Client Script Framework�Q�可以运行在所有的��C��览器上�q�且何以与�Q何Web服务器交互”，�q�说明他们正在以跨浏览器的态度来开发Ajax风格的远�E�脚本，�q�无疑是一个巨大的转变�Q�过�ȝ��微��Y�Q�把��M��东西都搞成了特定于IE的，而一旦其开发工兯��够真的提供彻底的跨浏览器支持�Q�将能够�W�络更多的ASP.ENT开发者，他们无需了解��M��l�节��可以创��览器代码�?/p>

Atlas客户端脚本框架是可扩展的�Q?00%面向对象的JavaScript客户端脚本框�Ӟ��允许开发这很容易地构徏拥有丰富的UI工能�q�且可以�q�接Web Services的Ajax风格��览器应用程序。��用Atlas�Q�开发者可以��用DHTML、JavaScript和XMLHTTP来编写Web应用�E�序�Q�而无��L��握这些技术的�l�节�?/p>

Atlas客户端脚本框架可以在所有的��C��览器上�q�行�Q�而不需要Web服务器。它�q�完全不需要安装，只要在页面中引用正确的脚本文件即可�?/p>

Atlas客户端脚本框架包含下列组�Ӟ��
·一个可扩展的和新框�Ӟ��其中为JavaScript��d��了很多新�Ҏ��，如生存期��理、集成、多播事件处理器和接�?br class="" />·一个基��c�d��Q�提供了通用�Ҏ��，如丰富的字符串操作功能、计时器和运行�Q务等
·一个UI框架�Q�可以跨��览器实现动态行�?br class="" />·一个网�l�栈�Q�用于简化对服务器的�q�接和对Web Services的访�?br class="" />微��Y为ASP.NET应用�E�序专门设计了一�l�Ajax风格的服务器控�g�Q��ƈ且加��Z��现有的ASP.NET��面框架和控�Ӟ��以便支持Atlas客户端脚本框架�?br class="" />ASP.NET 2.0中有一��称作异步客��L��回调的新�Ҏ��，使得构徏无中断的��面变得很容易。异步客��L��回调包装了XMLHTTP�Q�能够在很多��览器上工作。ASP.NET本��n包括了很多��用回调的控�g�Q�包括具有客��L��分页和排序功能的GridView和DetalsView控�g�Q�以及TreeView�I�间的虚拟列表支持�?br class="" />Atlas客户端脚本框架将完全支持ASP.NET 2.0回调�Q�但微��Y希望�q�一步增强浏览器和服务器之间的集成性。例如，你可以将Atlas客户端控件的数据�l�定指定为服务器上的ASP.NET数据源控�Ӟ��q�且可以从客��L��异步地控制Web��面的个性化特征�?/p>

和�Q何客��L��应用�E�序一��P��一个Ajax风格的Web应用�E�序通常也需要访问Web服务器的一些功能。Atlas应用�E�序�q�接服务器的模型和其他��^台类��|��都是使用Web Services来实现�?/p>

通过ASP.NET Web Services集成�Q�Atlas应用�E�序��可以在��M��支持XMLHTTP的浏览器上通过Atlas客户端将本框架来直接讉K��M��宿主于ASP.NET的asmx或Indigo服务。该框架��会自动处理代理和脚本到对象、对象到脚本的序列化问题。通过使用Web Services集成�Q�开发者可以��用单一的编�E�模型来�~�写Web Services�Q��ƈ且在��M��应用�E�序中��用它们，不论是基于浏览器的站点上�q�是��客户端应用程序中�?/p>

在ASP.NET 2.0中，微��Y构徏了一�l�丰富的构徏块服务（Building Block Services�Q�，�q��得构建强大、个性化的Web应用�E�序变得不可思议的简单。这些构建块极大地降低了在开发通用的Web应用�E�序�q�程中需要编写的代码数量�Q�比如管理用戗��通过角色验证用户和存储用��L��个性化讄��信息�{��?/p>

使用Atlas�Q�我们可以在��M��览器上的�Q何客��L��应用�E�序中向讉K��Web Services那样讉K��q�些功能。例如，如果你正在开发一个站点，来显�C�用��L��TO-DO��目�Q�你可以使用ASP.NET的Profile服务来将他们存放在服务器上的用户自定义配�|�文件中。这样即使用户从一台机器上转移到另一台机器上�Q�也同样可以讉K��q�些��目�?/p>

微��Y��提供的服务包括�Q�全部是��Z��ASP.NET 2.0的）�Q?br class="" />- Profile�Q�在服务器上存放每个用户�Ҏ��的数�?br class="" />- UI个性化�Q�在服务器上存放个性化的UI讄��信息
- 验证�Q�验证用�?br class="" />- 角色�Q�基于用��L��角色验证用户��d��和提供不同的UI
�׃��q�些构徏块是服务器端的，开发者需要对他们应用和其他站点一��L��安全模型。这些服务不需要客��L��下在��M��东西——只要在��览器中引用脚本代理卛_��。所有的ASP.NET 2.0构徏块服务都是可插拔的，�q��用一�U�通用的提供者模型可扩展模式在后台实现。微软提供的内徏提供�E�序允许开发这使用SQL Server数据库或Active Directory作�ؓ存储容器�Q�开发者也可以很容易地插接自己的提供程序。例如，你可能希望��用集��而不是数据库服务器来存放用户的配�|�文�Ӟ��q�时你只需��你的提供程序插接近来即可�?/p>

除了DHTML、JScript和XMLHTTP�Q�微软还提供了一�l�附加的服务来加强客��L��的功能�ƈ提供增强的体验。对于这��L��服务�Q�本地浏览器�~�存��是一个很好的例子。当启用了本地浏览器�~�存�Ӟ��Web站点��可以将内容存储到患从中�Q��ƈ在需要的时候很快地取出。但��览器�ƈ未提供向�~�存中存放数据的API�Q�而且象Google Map或OWA�q�样的应用程序不得不通过很多工作产生一个唯一的URL才能使浏览器�~�存它。在Atlas中，微��Y提供了可�~�程的本地存�?�~�存�Q�因此应用程序可以很方便、有效�ƈ且安全在本地�~�存数据�?/p>

同其他应用程序的集成是检验Web体验是否丰富的另一个新的标准。例如，当一个用��h��览一个拍卖网站�ƈ对一件商品出��h��Q�他可能想随时知道这个拍卖什么时候结束，但他如何才能��这个事件添加到他们个�h的日历程序中�Q�Atlas带来了一�p�d��客户端构建块服务�Q�当用于选择“添加到日历”时�Q�浏览器��调用接驳点来获取日历数据，�q�将其传递到本地的日历程序中。此旉��面上无须下蝲或运行�Q何特�D�的代码或执行�Q何初始化动作�Q�因此，�q�比ActiveX要安全得多�?br />
��Z��Ajax的应用程序架�?/strong>

��览器端框架被划分成两大�c�：

·应用�E�序框架�Q�提供浏览器的功能，但是�总�包括�H�口��部件抽象和另外的部件而出名，其功能主要围�l�桌面GUI框架�?/p>

·基本�l�构框架�Q�提供基本的��道和可�U�L��的浏览器抽象�Q�让开发者去创徏内容。典型的功能�Q?/p>

* 针对XMLHttpRequest的包装器以封装浏览器-服务器的交互�?所有的框架都提供这一功能)�?/p>

* XML操作和查询�?/p>

* �Ҏ��来自XMLHttpRequest的应�{�执行DOM操作�?/p>

* 在一些情况中�Q�与另外的浏览器端技术如Flash(和潜在的Java applets)集成在一赗��?/p>

而服务器端框枉��常以下面两�U�方式工�?��管它们在这里根据语�a�的不同进行了分类)�Q?/p>

·HTML/JS生成�Q�服务器提供完整的HTML/Javascript代码生成和浏览器-服务器协调，�l�果是只有浏览器端编码可以被定制�?/p>

·�q�程调用�Q�Javascript调用直接被�\由到服务器端功能(例如Java�Ҏ��)�q�返回到Javascript回叫处理器；或者Javascript调用服务器以提取信息�Q�例如会话细节，数据库查询等�?/p>

1 �U�Javascript�Q�应用程序框�?/strong>

1.1 Bindows(自从2003�q?

�|�址是：http://www.bindows.net�Q�Bindows是一个��Y件开发包(SDK)�Q�它�Q�通过强力联合DHTML�Q�JavaScript�Q�CSS和XML�{�技术，能生成高度交互的互联�|�应用程�?成�ؓ��C��的桌面应用程序的强有力对手。Bindows应用�E�序不要求下载和也不需要在用户端安�?仅要求有一个浏览器(也不需要Java�Q�Flash或者ActiveX)。Bindows有可能领导面向对象开发的AJAX应用�E�序的��^台�?/p>

·它是商业化的�Q��用来自于MB的技�?总部位于GA USA�Q�主要开发中心在瑞典�Q�成立于2002�q?�?/p>

Bindows框架提供�l�你�Q?/p>

·��Z��cȝ��面向对象的API

·一套完整的�H�口�pȝ��Q�提供宽范围的窗口小部�g支持�Q�包括菜单、表单、格子、滑动条、量�E�，甚至更多

·用于开发zero-footprint SOA客户端应用程序的领先的工��L��

·本机的XML�Q�SOAP和XML-RPC支持

·单用户到企业�U�的支持

·内徏的对AJAX的支�?/p>

Bindows开发环境：

·支持企业�U�规模的工程开�?/p>

·跨浏览器�Q�跨�q�_��支持

·服务器独立结�?/p>

·与新的和现有资源的互操作�?/p>

·一致性开发方法学

1.2 BackBase(自从2003�q?

�|�址是：http://www.backbase.com�Q�是一个全面的��览器端框架�Q�支持丰富的��览器功能以及与.NET和Java的集成�?/p>

·商业化，来自于Backbase B.V(总部在Amsterdam�Q�成立于2003�q?�?/p>

1.3 DOJO(开发中;自从2004�q?�?

�|�址是：http://dojotoolkit.org/�Q�提供全面窗口小�l��g和浏览器-服务器消息支持�?/p>

·为创建定制的Javascript�H�口��组件提供框架支持�?

·预置的窗口小�l��g库�?/p>

·��览�?服务器消息支�?XMLHttpRequest和另外的机制�?/p>

·支持��览器中的URL操纵功能�?/p>

·开源许�?学术自由许可2.1(http://opensource.org/licenses/afl-2.1.php))�Q�由JotSpot(http://www.jot.com/)的Alex Russell(http://alex.dojotoolkit.org/)所领导�?/p>

1.4 Open Rico(开发中;自从2005�q?�?��Z��早期的私有框�?

�|�址是：http://openrico.org/demos.page�Q�是一多用途框�Ӟ��支持Ajax基础�l�构和用户交互�?/p>

·一个XMLHttpRequest应答能被路由��C��个或者更多回叫操作，DOM对象�Q�或者Javascript对象�?/p>

·�Ҏ��鼠标拖动支持�?/p>

·Ajax动画�Q�例如羃攑֒�变换�?/p>

·"行�ؓ"-实质上是�H�口��组件库�?/p>

·使用指南(http://www.mirimar.net/mailbrowser/)�Q�由RussMirimar的Yonah所提供

·开源。源于Sabre航空公司解决�Ҏ��Q�由Bill Scott(http://looksgoodworkswell.blogspot.com)�Q�Darren James及另外一些�h所支持�?/p>

1.5 qooxdoo(开发中;自从2005�q?�?

�|�址是：http://qooxdoo.sourceforge.net/�Q�是另一个雄心勃勃的框架�Q�提供宽范围的UI支持和正在开发中的基��l�构�Ҏ��?/p>

·基础�l�构�Q?/p>

* DOM和事�?焦点��理的可�U�L��的抽象�?/p>

* 调试支持�?/p>

* 易于旉��调度的Timer�c�R�?

* Getter/Setter支持�?/p>

·UI�Q?/p>

* �H�口��组件框架和预置的窗口小�l��g库�?/p>

* 布局��理器�?/p>

* 囑փ��~�冲和可�U�L��的PNG透明性�?/p>

·开�?LGPL)。来自多斚w��的�A献者�?/p>

1.6 Tibet(开发中;自从2005�q?�?

�|�址是：http://www.technicalpursuit.com/�Q�目的是提供高度可移植的和全面的Javascript API�Q�结果是�Q�可能自动生成大量的客户端代码。自�U�是"企业�U�Ajax"�?/p>

·�q�程脚本�q�行在XMLHttpRequest包装之上-通过协调调用�l�果支持工作��管理，例如应答可以发生在只有当两个分离的调用返回时�?/p>

·URI支持�?/p>

·所有的HTTP�Ҏ��-不仅�?GET"�?POST"�?/p>

·低��的协�?File://和WebDav以及HTTP�?/p>

·Web服务调用-SOAP�Q�XML-RPC�Q�等�{��?/p>

·预置的针对Google API�Q�Amazon API�{�等服务的支持�?/p>

·由高�U�Javascript对象�l�成一个巨大的库�?/p>

·许多XML操作�?/p>

·IDE和开发工兗��?/p>

·开源许�?昄��l�过OSI认证�Q�但是细节不�?�?br />
2 �U�Javascript�Q�基��l�构框架

2.1 AjaxCaller(Alpha版本;自从5�?005�q?

�|�址是：http://ajaxify.com/run/testAjaxCaller/�Q�是一基本的线�E�安全的XMLHttpRequest包装器，主要针对Ajax新手�Q�仍处于原始的alpha开发阶�D�，目前仅与AjaxPatterns的在�U�搜索范例一��h��包�?/p>

·实现�Ҏ��务器的调�?GET/POST/PUT/DELETE)�Q�用路由��C��个回叫操作的plain-text或者XML完成�?/p>

·使用�q�的XMLHttpRequest对象的析构�?/p>

·Response�~�冲(计划�?�?/p>

·针对Ajax新手-�q��性能优化�Q�该库主要用于实现易�ȝ��基础代码�q�将提供调试支持�?/p>

·开源许可。由Michael Mahemoff(http://softwareas.com)(��h��John Wehr和Richard Schwartz的一些思想)�l�护�?/p>

2.2 Flash JavaScript集成�?/p>

�|�址是：http://www.osflash.org/doku.php?id=flashjs�Q�允许JavaScript和Flash内容的集成：

·使JavaScript能够调用ActionScript功能和反�q�来的实现�?/p>

·所有主要的数据�c�d��能在�q�两�U�环境之间传递�?/p>

·开源许可。由多个开源Flash贡献者提供支持�?/p>

2.3 Google AJAXSLT(发行�?005�q?�?

�|�址是：http://goog-ajaxslt.sourceforge.net/�Q�是一个Javascript框架�Q�用来执行XSLT转换以及XPath查询�?/p>

·建立在Google地图工作基础之上�?/p>

·开源许�?BSD)。由一家创新搜索方案公司支持，自称�?Google"�?/p>

2.4 HTMLHttpRequest(Beta版；始于2005�q?

HtmlHttpRequest(http://www.twinhelix.com/javascript/htmlhttprequest/)�Q�它使用了XMLHttpRequest和Iframes以改�q�兼�Ҏ��?/p>

·��试�q��ƈ能工作在:IE6/Win�Q�IE5.5/Win�Q�IE5/Win�Q�IE4/Win�Q�Mozilla/Win�Q�Opera7/Win�Q�Safari/Mac�Q�IE5/Mac�?/p>

·未测试，可能能工作在�Q�IE4/Mac�Q�Mozilla/Mac�Q�Opera/Other�Q�Konqueror/Linux。你正在使用�q�些之一吗？作者正在请求兼�Ҏ��信息�?/p>

·开源许�?LGPL)。由Twin Helix Designs(http://www.twinhelix.com/)的Angus Turnbull�l�护�?/p>

2.5 交互式网站框�?自从2005�q?�?

交互式网站框�?http://sourceforge.net/projects/iwf/�Q�是一个项目，目的是从��览器端对Ajax基础�l�构的多斚w��予以支持。自描述�?使用javascript�Q�css�Q�xml�Q�和html来创造高度交互网站的框架。包括一个定制的针对高度可读的javascript的xml分析器。实质上�Q�是建立��Z��AJAX的网站的基础�Q�还有另外一些通用脚本"�?/p>

·�U�程安全的XMLHttpRequest实现�?/p>

·针对XML文档的包装器�Q�以便你能够创徏更具可读性的代码�Q?/p>

var node = doc.groceries.frozen[0].pizza[0].size;

代替手工的导航：

var node = doc.documentElement.firstChild.firstChild.getAttribute("size");

·开源许可。由Weaver(http://circaware.com|Brock)�l�护�?/p>

2.6 LibXMLHttpRequest(发行�?003�q?�?

libXmlRequest(http://www.whitefrost.com/servlet/connector?file=reference/2003/06/17/libXmlRequest.html)�Q�是XMLHttpRequest的一个瘦包装器�?/p>

·getXML()和postXML()�Ҏ��?/p>

·XMLHttpRequest对象池支持�?/p>

·Response�~�冲�?/p>

·可用源码(明显)�Q�但是受标准版权的保护，由Stephen W.Coate(http://www.whitefrost.com/index.jsp)所�l�护�?/p>

2.7 RSLite(x)

�|�站是：http://www.ashleyit.com/rs/main.htm�Q�是一个针对XMLHttpRequest的瘦包装器�?/p>

·一个简单的�l��g�Q�作为Brent Ashley的更全面的远�E�脚本工�?参见Javascript�q�程脚本-JSRS在多语言服务器端)的一部分发行�?/p>

2.8 Sack(在开发中�Q�自�?005�q?�?

�|�站是：http://twilightuniverse.com/2005/05/sack-of-ajax/�Q�是一个针对XMLHttpRequest的瘦包装器�?/p>

·调用者能指定回叫函数或者回叫DOM对象。借助于回叫DOM�Q�应�{�文本直接被推入到DOM�?/p>

2.9 Sarissa(发行�?月，2003�q?

�|�站是：http://sarissa.sf.net�Q�是一�U�Javascript API�Q�它��装了在��览器端可以独立调用XML的功能�?/p>

·可移植的XMLHttpRequest创徏

·可移植的XPath查询

·可移植的DOM操作

·可移植的XSLT

·可移植的XML串行�?/p>

·开�?GPL2.0和LGPL2.1)。来自多斚w��贡献者�?/p>

2.10 XHConn(发行于自�?月，2005�q?

�|�站是：http://xkr.us/code/javascript/XHConn/�Q�是一个对XMLHttpRequest的瘦包装器�?/p>

·例如

ew XHConn().connect("mypage.php"�Q?POST"�Q?foo=bar&baz=qux"�Q�fnWhenDone);

·开源许可。由Brad Fults所�l�护�?br />
3 服务器端�Q�多�U�语�a�

3.1 跨��^台异步的接口工具��?5�?005�q?

CPAINT�Q?a >http://cpaint.sourceforge.net/�Q�是一真正的支持PHP和ASP/Vbscript的Ajax实现和JSRS(JavaScript�q�程脚本)实现。CPAINT提供�l�你需求的代码在后台实现AJAX和JSRS�Q�而返回的数据以JavaScript形式在前台操作，格式化和昄��。这允许你创��提供接近实时的反馈给用户的web应用�E�序�?/p>

·支持PHP&ASP

·针对所有函数的一致的JavaScript文�g

·支持�q�程脚本和XML

·支持本地和远�E�函�?/p>

·单个或者多个XMLHTTP对象

·以文本或者JavaScript XML/DOM文档对象方式�q�回后台数据

·能支持POST和GET��h��

·后台代理函数来访问远�E�函数和数据

·在所有的主要��览器上��试�q?/p>

·在GNU GPL&LGPL保护下发�?/p>

3.2 SAJAX(可用�Q�但是不�?.0版本;自从3�?005�q?

�|�站是：http://www.modernmethod.com/sajax/�Q�直接把调用从Javascript发送到你的服务器端语言�q�再�ơ回�q�。例如，调用一个javascript�Ҏ��x_calculateBudget()�Q�将先到达服务器和调用一个Java calculateBudget()�Ҏ��Q�然后以javascript方式把��D��回到x_calculateBudget_cb()�?/p>

·便利从Javascript代理函数到后台操作的映射�?/p>

·能够代理对众多服务器端��^収ͼ�ASP/ColdFusion/Io/Lua/Perl/PHP/Python/Ruby�Q�的调用�?/p>

·开源许可。来自多斚w��贡献者�?/p>

3.3 Javascipt对象标志(JSON)和JSON-RPC

JSON(http://www.crockford.com/JSON/index.html)�Q�是一�?胖的自由的XML选择"�Q�而JSON-RPC(http://www.json-rpc.org/)是一�U�远�E�过�E�协议，�c�M��于XML-RPC�Q�强有力支持Javascript客户�?/p>

·实现多服务器端��^�?http://www.json-rpc.org/impl.xhtml)�Q�Java�Q�Python�Q�Ruby�Q�Perl�?/p>

·针对每种�q�_��有独立的打包和许可，如JSON-RPC-Java(http://oss.metaparadigm.com/jsonrpc/)�?/p>

3.4 Javascript�q�程脚本(JSRS)(自从2000�q?

�|�址是：http://www.ashleyit.com/rs/jsrs/test.htm�Q�直接把调用从Javascript发送到你的服务器端语言�q�再�ơ回�q��?/p>

·知名的浏览器�Q�IE4+�Q�NS4.x�Q�NS6.x�Q�Mozilla�Q�Opera7和Galeon�?/p>

·服务器端支持�Q�ASP�Q�ColdFusion�Q�PerlCGI�Q�PHP,Python和JSP(servlet)�?/p>

·开源许可。由Brent Ashley(http://www.ashleyit.com/)提供支持�?/p>

4 服务器端�Q�Java

注意�Q�许多现有的框架最�q�正在添加Java支持(例如struts)�Q�我��在后面指出�?/p>

4.1 WebORB for Java(自从2005�q?�?

�|�址�Q?a >http://www.themidnightcoders.com/weborb/aboutWeborb.htm�Q�是一个��^収ͼ�支持开发AJAX和基于Flash的胖客户端应用程序，�q�可以把它们与Java对象和XML Web服务相系��h��。在�U��D�?http�Q?/www.themidnightcoders.com/examples)

·WebORB包括一个称作丰富的客户�pȝ��(http://www.themidnightcoders.com/rcs/index.htm)的客��L��库。该丰富的客��L��l�提供一��单的在线api来绑定到�q�调用�Q何Java对象�Q�XML Web服务或者EJB上的�Ҏ��?/p>

·支持同步的和异步的方法调用�?/p>

·�q�不要求在服务器端代码上作�Q何修改，不需要定制方法属性，特别的签名或者参数类型。★不要求设计时生成代理�?/p>

·同步调用�q�回来自于该调用(不需要回�?的数据。异步的调用依赖于一个回叫实现�?/p>

·��M��服务器端�Ҏ��能被同步地或者异步地调用�?/p>

·客户应用�E�序能向服务器对象请求指定的�z�d��方式。结果，对象能被��L��地创��不需��M��Ҏ��的编�E��?/p>

·提供一个特定API来处理数据库查询�l�果-服务器代码能�q�回Data集合或者Data表，而客��L��以一个特�D�RecordSet JavaScript对象来显�C��个结果。该对象提供一个方法以��索列名和行数据�?/p>

·支持数据分页技术。客户应用程序能��索页面中的数据�?/p>

·支持所有的服务器端参数�c�d��q�返回�?原型�Q�字�W�串�Q�复合类型，数组�Q�本�?net集合�Q�远�E�参考�?/p>

·共有两种版本可用�Q�标准版(自由)和专业版(商业许可)

4.2 Echo 2(自从3�?005�q?

�|�址是：http://www.nextapp.com/products/echo2/�Q�允�怽�用纯Java代码�~�写Ajax应用软�g(范例(http://demo.nextapp.com/InteractiveTest/ia))�?/p>

自动地生成HTML和Javascript�?/p>

·协调��览器和服务器之间的消息。消息�Ş式�ؓXML�?/p>

·如果需要，可以手工�~�写定制的Javascript部�g�?/p>

·开源许�?Mozilla公共许可或者GNU LGPL)。源于Next App,Inc.(http://www.nextapp.com/)�?/p>

4.3 Direct Web Remoting (DWR)(2005�q?

�|�址是：http://www.getahead.ltd.uk/dwr/�Q�是一个框�Ӟ��用于直接从Javascript代码中调用Java�Ҏ��?/p>

·象SAJAX�Q�能把Javascript中的调用传递到Java�Ҏ��Q��ƈ�q�回到Javascript回叫�?/p>

·能与��M��web框架�Q�Struts�Q�Tapestry�Q�等�{�）一起��用�?/p>

·开源许�?Apache(http://www.apache.org/LICENSE.txt))。由Joe Walker(http://www.getahead.ltd.uk/sg/space/joe/)所支持。被加入到WebWork(http://www.opensymphony.com/webwork/)版本�?/p>

4.4 SWATO(2005�q?

�|�址是：http://swato.dev.java.net/�Q�是一套可重用的和良好集成的Java/JavaScript库，它实��C��一�U�更�Ҏ��的方式来改变你的web应用�E�序的交互，它是通过AJAX方式实现�?/p>

·服务器端Java库能被容易地配置到所有的Servlet 2.3+匚w��的容器中�?/p>

·客户端JavaScript库能工作在支持HttpXMLRequest的各�U�浏览器中�?/p>

·使用JSON来在服务器端�~�组你的POJO数据。这样你能存取在��M��JavaScript环境(HTML�Q�XUL�Q�SVG)中的�q�程数据�Q�这�U�存取可以容易地通过��编码或者与某种成熟的JavaScript库集成来实现�?/p>

·提供一个简单的接口来��你的JavaScript代码可以与暴露在客户端的�q�程POJO交互(RPC�{?�?/p>

·使用web.xml中的�?lt;filter>的容易且灉|��的配�|�，�q�能(但不是依�?与Spring集成��C��赗��?/p>

·提供了几个可帮助你快速开发web应用�E�序的组�?如自动完成的文本框，在线表单�Q�在�U�列表，�{�等)�?br />
5 服务器端�Q�Lisp

5.1 CL-Ajax

�|�址�Q?a >http://cliki.net/cl-ajax�Q�实现Javascript直接调用服务器端Lisp函数�?/p>

·如下输出函数�Q?/p>

(export-函数 #’my-函数)

·可以产生带有参数的Javascript代理�?/p>

·能回叫Javascript函数或者DOM对象�?/p>

·可以被集成进SAJAX�?/p>

·开�?定制�Q�非常灵�z�，许可)。由[Richard Newman](http://www.holygoat.co.uk/)所�l�护�?/p>

6 服务器端�Q?NET

6.1 WebORB for.NET(自从8�?005�q?

�|�址�Q?a >http://www.themidnightcoders.com/weborb/aboutWeborb.htm�Q�是一个��^収ͼ�用于开发AJAX和基于Flash的胖客户端应用程序，�q�能把它们连接到.NET对象和XML Web服务�?在线举例(http://www.themidnightcoders.com/examples))

·WebORB包括一个客��L��库，名叫Rich Client System(http://www.themidnightcoders.com/rcs/index.htm)。Rich Client System提供一��单的在线api以绑定到和调用�Q�?NET对象或者XML Web服务上的��M��Ҏ��?/p>

·支持同步和异步的�Ҏ��调用

·�q�不要求在服务器端代码上作�Q何修改，不需要定制方法属性，特别的签名或者参数类型�?*不要求设计时代理生成�?/p>

·同步调用�q�回来自于该调用的数�?不需要回�?。异步的调用依赖于一个回叫实现�?/p>

·��M��服务器端�Ҏ��能被同步地或者异步地调用�?/p>

·客户应用�E�序能向服务器对象请求指定的�z�d��方式。结果，对象能被��L��地创��不需��M��Ҏ��的编�E��?/p>

·提供一个特定API来处理数据库查询�l�果-服务器代码能�q�回DataSet或者DataTable�Q�而客��L��以一个特�D�RecordSet JavaScript对象来显�C��个结果。该对象提供一个方法以��索列名和行数�?/p>

·支持数据��面技术。客��L��应用�E�序能检索页面中的数据�?/p>

·支持所有的服务器端参数�c�d��q�返回�?原型�Q�字�W�串�Q�复合类型，数组�Q�本�?net集合�Q�远�E�参�?/p>

·共有两种版本可用的：标准�?自由)和专业版(商业许可)

6.2 Ajax.NET(自从3�?005�q?

�|�址是：http://ajax.schwarz-interactive.de/�Q�是一个库�Q�实��C��Javascript到服务器�?NET的存取�?/p>

·象SAJAX�Q�能把Javascript中的调用传递到.NET�Ҏ��Q��ƈ�q�回到Javascript回叫�?/p>

·能存取来自于JavaScript的会话数据�?/p>

·�~�存�l�果

·自由使用�Q�可用的源码�Q�未指定使用许可。由Michael Schwarz(http://weblogs.asp.net/mschwarz/)所�l�护�?/p>

·不允许改变源代码�Q�用属性标记方�?/p>

·完整的类支持以返回客��L��JavaScript�?/p>

·使用HtmlControls来进行输入和�q�回�?/p>

·可以�q�回数据表，数据集，数据视图�Q�数�l�和集合

7 服务器端�Q�PHP

7.1 AjaxAC(自从2005�q?�?

�|�址是：http://ajax.zervaas.com.au/�Q�用单个的PHP�c�d��装了完整的应用程序�?/p>

·所有的应用�E�序代码是自包含在单个类�?附加另外一些JavaScript�?

·�q�净利烦地调用PHP文�g/HTML��面。只需创徏应用�E�序�c�，然后参照应用�E�序JavaScript和依附�Q何需要的HTML元素到该应用�E�序�?

·�Ҏ��地处理JavaScript事�g的内嵌功�?/p>

·创徏子需要�ƈ处理它们的内嵌功�?/p>

·允许定制的配�|��|��因此某些单元能在�q�行旉��讄��

·无凌��q��JavaScript代码�Ҏ��在调用HTML的代码中-所有的事�g是被动态依附的

·�׃��以上两个原因�Ҏ��和模板引擎集成到一�?/p>

·�Ҏ��钩到�Q�hook in to�Q�已有的PHP�c�L��者MySQL数据库以�q�回来自于子需求的数据

·能够�Ҏ��地进一步生成JavaScript对象的可扩展的窗口小�l��g�l�构(但是�q�需要做一些工�?

背景�Q?/p>

·开源许�?Apache2.0)。由Zervaas Enterprises(http://ajax.zervaas.com.au/)支持

7.2 JPSpan

�|�址是：http://jpspan.sourceforge.net/wiki/doku.php�Q�直接把Javascript调用传递到PHP函数�?/p>

·�q�行了严肃的单元��试�?/p>

·开源许�?PHP)�?/p>

7.3 XAJAX

�|�址是：http://xajax.sf.net�Q�直接把Javascript调用传递到PHP函数�?/p>

·使用Javascript代理来调用PHP脚本�?/p>

·开源。由J.Max Wilson所创�?/p>

8 服务器端�Q�Ruby

Ruby On Rails(http://www.rubyonrails.org/)是一个通常的强力支持Ajax的web框架�Q?/p>

·当Ajax出现的时候Rails�q�处于其发展的早期，因此Ajax可能逐渐成�ؓRails框架的核心�?/p>

·生成��览器中大多�?全部的窗口小�l��g和动�ȝ��Javascript脚本�?/p>

·支持服务器端调用�?/p>

·调度支持。　

·开源许可�?/p>

TrampEagle 2006-01-13 12:50 发表评论

AJAX开发简�?(�W�二部分)

TrampEagle — Fri, 13 Jan 2006 02:01:00 GMT

引自�Q?a >http://blog.chinaunix.com/u/12958/?u=http://blog.chinaunix.com/u/12958/showart.php?id=67064

AJAX开发简�?(�W�二部分)

AJAX开�?/a>

7.1、AJAX应用到的技�?/font>

7.2、AJAX开发框�?/font>

7.3、简单的�C�Z��

7.4、文档对象模型（DOM�Q?/font>

7.5、处理XML文档

参考文�?/font>

七、AJAX开�?/strong>
　　到这里，已经可以清楚的知道AJAX是什么，AJAX能做什么，AJAX什么地方不好。如果你觉得AJAX真的能给你的开发工作带来改�q�的话，那么�l�箋看看怎么使用AJAX吧�?a name="a71">

7.1、AJAX应用到的技�?/strong>
　　AJAX涉及到的7��Ҏ��术中�Q�个��为Javascript、XMLHttpRequest、DOM、XML比较有用�?br />
A、XMLHttpRequest对象
　　XMLHttpRequest是XMLHTTP�l��g的对象，通过�q�个对象�Q�AJAX可以像桌面应用程序一样只同服务器�q�行数据层面的交换，而不用每�ơ都��h��界面�Q�也不用每次��数据处理的工作都交�l�服务器来做�Q�这��h��减轻了服务器负担又加快了响应速度、羃短了用户�{�待的时间�?

　　IE5.0开始，开发�h员可以在Web��面内部使用XMLHTTP ActiveX�l��g扩展自��n的功能，不用从当前的Web��面��D��可以直接传输数据到服务器或者从服务器接收数据�?Mozilla1.0以及NetScape7则是创徏�l�承XML的代理类XMLHttpRequest�Q�对于大多数情况�Q�XMLHttpRequest对象和XMLHTTP�l��g很相��|��Ҏ��和属性类��|��只是部分属性不同�?/p>
XMLHttpRequest对象初始化：
7.3、简单的�C�Z��
　　接下来，我们利用上面的开发框架来做两个简单的应用�?br />
A、数据校�?br />　　在用��h��册的表单中，�l�常��到要检验待注册的用户名是否唯一。传�l�的做法是采用window.open的弹出窗口，或者window. showModalDialog的对话框。不�q�，�q�两个都需要打开�H�口。采用AJAX后，采用异步方式直接��参数提交到服务器，用window.alert��服务器�q�回的校验信息显�C�出来。代码如下：
　　�?lt;body>之间增加一�D�form表单代码�Q?/p>

用户名：

　　在开发框架的基础上再增加一个调用函敎ͼ�
function userCheck() { var f = document.form1; var username = f.username.value; if(username=="") { window.alert("用户名不能�ؓ�I��?); f.username.focus(); return false; } else { send_request('sample1_2.jsp?username='+username); } }
　　看看sample1_2.jsp做了什么：
<%@ page contentType="text/html; charset=gb2312" errorPage="" %> <% String username = request.getParameter("username"); if("educhina".equals(username)) out.print("用户名已�l�被注册�Q�请更换一个用户名�?); else out.print("用户名尚未被使用�Q�您可以�l�箋�?); %>
　　�q�行一下，嗯，没有弹出�H�口�Q�没有页面刷斎ͼ�跟预想的效果一栗��如果需要的话，可以在sample1_2.jsp中实现更复杂的功能。最后，只要��反馈信息打印出来就可以了�?/p>

B、��联菜�?br />　　我们在第五部分提到利用AJAX改进�U�联菜单的设计。接下来�Q�我们就演示一下如何“按需取数据”�?
　　首先�Q�在中间增加如下HTML代码�Q?/p>

�l�理�?lt;/a>

开发部

　　在框架的基础上增加一个响应函数showRoles(obj)�Q?/p>
//昄��部门下的岗位 function showRoles(obj) { document.getElementById(obj).parentNode.style.display = ""; document.getElementById(obj).innerHTML = "正在��d��数据..." currentPos = obj; send_request("sample2_2.jsp?playPos="+obj); }
　　修改框架的processRequest函数�Q?/p>
// 处理�q�回信息的函�? function processRequest() { if (http_request.readyState == 4) { // 判断对象状�? if (http_request.status == 200) { // 信息已经成功�q�回�Q�开始处理信�? document.getElementById(currentPos).innerHTML = http_request.responseText; } else { //��面不正�? alert("您所��h��的页面有异常�?); } } }
　　最后就是smaple2_2.jsp了：
<%@ page contentType="text/html; charset=gb2312" errorPage="" %>
<%
String playPos = request.getParameter("playPos"); if("pos_1".equals(playPos)) out.print(" �ȝ��?lt;br> 副�ȝ��?); else if("pos_2".equals(playPos)) out.println(" ��d��E�师
 软�g工程�?);
%>
　　�q�行一下看看效果：
7.4、文档对象模型（DOM�Q?/strong>
　　文档对象模型�Q�DOM�Q�是表示文档�Q�比如HTML和XML�Q�和讉K��、操作构成文档的各种元素的应用程序接口（API�Q�。一般的�Q�支持Javascript的所有浏览器都支持DOM。本文所涉及的DOM�Q�是指W3C定义的标准的文档对象模型�Q�它以树形结构表�C�HTML和XML文档�Q�定义了遍历�q�个树和��查、修�Ҏ��的节点的�Ҏ��和属性�?br />
7.4.1、DOM��g��的HTML文档�Q�树
　　在DOM��g��Q�HTML跟XML一��h��一�U�树形结构的文档�Q?lt;html>是根�Q�root�Q�节点，�?lt;title>�?lt;body>�?lt;html>的子�Q�children�Q�节点，互相之间是兄弟（sibling�Q�节点；下面才是子节�?lt;table>�?lt;span>�?lt;p>�{�等。如下图�Q?
　　
　　�q�个是不是跟XML的结构有点相似呢。不同的是，HTML文档的树形主要包含表�C�元素、标记的节点和表�C�文本串的节炏V�?/p>
7.4.2、HTML文档的节�?br />　　DOM下，HTML文档各个节点被视为各�U�类型的Node对象。每个Node对象都有自己的属性和�Ҏ��Q�利用这些属性和�Ҏ��可以遍历整个文档树。由于HTML文档的复杂性，DOM定义了nodeType来表�C��点的�c�d��。这里列出Node常用的几�U�节点类型：
接口 nodeType帔R�� nodeType�?/td> 备注
Element Node.ELEMENT_NODE 1 元素节点
Text Node.TEXT_NODE 3 文本节点
Document Node.DOCUMENT_NODE 9 document
Comment Node.COMMENT_NODE 8 注释的文�?/td>
DocumentFragment Node.DOCUMENT_FRAGMENT_NODE 11 document片断
Attr Node.ATTRIBUTE_NODE 2 节点属�?/td>
　　DOM树的根节�Ҏ��个Document对象�Q�该对象的documentElement属性引用表�C�文档根元素的Element对象�Q�对于HTML文档�Q�这个就�?lt;html>标记�Q�。Javascript操作HTML文档的时候，document��x��向整个文档，�?lt;table>�{�节点类型即为Element。Comment�c�d��的节点则是指文档的注释。具体节点类型的含义�Q�请参考《Javascript权威指南》，在此不赘�q��?/p>
　　Document定义的方法大多数是生产型�Ҏ��Q�主要用于创建可以插入文档中的各�U�类型的节点。常用的Document�Ҏ��有：
�Ҏ�� 描述
createAttribute() 用指定的名字创徏新的Attr节点�?/td>
createComment() 用指定的字符串创建新的Comment节点�?/td>
createElement() 用指定的标记名创建新的Element节点�?/td>
createTextNode() 用指定的文本创徏新的TextNode节点�?/td>
getElementById() �q�回文档中具有指定id属性的Element节点�?/td>
getElementsByTagName() �q�回文档中具有指定标记名的所有Element节点�?/td>
　　对于Element节点�Q�可以通过调用getAttribute()、setAttribute()、removeAttribute()�Ҏ��来查询、设�|�或者删除一个Element节点的性质�Q�比�?lt;table>标记的border属性。下面列出Element常用的属性：
属�?/td> 描述
tagName 元素的标记名�U�ͼ�比如
元素为P。HTML文档�q�回的tabName均�ؓ大写�?/td>
　　Element常用的方法：
�Ҏ�� 描述
getAttribute() 以字�W�串形式�q�回指定属性的倹{�?/td>
getAttributeNode() 以Attr节点的�Ş式返回指定属性的倹{�?/td>
getElementsByTabName() �q�回一个Node数组�Q�包含具有指定标记名的所有Element节点的子孙节点，光��序�ؓ在文档中出现的顺序�?/td>
hasAttribute() 如果该元素具有指定名字的属性，则返回true�?/td>
removeAttribute() 从元素中删除指定的属性�?/td>
removeAttributeNode() 从元素的属性列表中删除指定的Attr节点�?/td>
setAttribute() 把指定的属性设�|��ؓ指定的字�W�串��|��如果该属性不存在则添加一个新属性�?/td>
setAttributeNode() 把指定的Attr节点��d��到该元素的属性列表中�?/td>
　　Attr对象代表文档元素的属性，有name、value�{�属性，可以通过Node接口的attributes属性或者调用Element接口的getAttributeNode()�Ҏ��来获取。不�q�，在大多数情况下，使用Element元素属性的最��单方法是getAttribute()和setAttribute()两个�Ҏ��Q�而不是Attr对象�?
7.4.3、��用DOM操作HTML文档
　　Node对象定义了一�p�d��属性和�Ҏ��Q�来方便遍历整个文档。用parentNode属性和childNodes[]数组可以在文档树中上下移动；通过遍历childNodes[]数组或者��用firstChild和nextSibling属性进行��@环操作，也可以��用lastChild和previousSibling�q�行逆向循环操作�Q�也可以枚�D指定节点的子节点。而调用appendChild()、insertBefore()、removeChild()、replaceChild()�Ҏ��可以改变一个节点的子节点从而改变文档树�?
　　需要指出的是，childNodes[]的值实际上是一个NodeList对象。因此，可以通过遍历childNodes[]数组的每个元素，来枚举一个给定节点的所有子节点�Q�通过递归�Q�可以枚举树中的所有节炏V��下表列��Z��Node对象的一些常用属性和�Ҏ��Q?/p>
　　Node对象常用属性：
属�?/td> 描述
attributes 如果该节�Ҏ��一个Element�Q�则以NamedNodeMap形式�q�回该元素的属性�?/td>
childNodes 以Node[]的�Ş式存攑ֽ�前节点的子节炏V��如果没有子节点�Q�则�q�回�I�数�l��?/td>
firstChild 以Node的�Ş式返回当前节点的�W�一个子节点。如果没有子节点�Q�则为null�?/td>
lastChild 以Node的�Ş式返回当前节点的最后一个子节点。如果没有子节点�Q�则为null�?/td>
nextSibling 以Node的�Ş式返回当前节点的兄弟下一个节炏V��如果没有这��L��节点�Q�则�q�回null�?/td>
nodeName 节点的名字，Element节点则代表Element的标记名�U��?/td>
nodeType 代表节点的类型�?/td>
parentNode 以Node的�Ş式返回当前节点的父节炏V��如果没有父节点�Q�则为null�?/td>
previousSibling 以Node的�Ş式返回紧挨当前节炏V��位于它之前的兄弟节炏V��如果没有这��L��节点�Q�则�q�回null�?/td>
　　Node对象常用�Ҏ��Q?/p>
�Ҏ�� 描述
appendChild() 通过把一个节点增加到当前节点的childNodes[]�l�，�l�文档树增加节点�?/td>
cloneNode() 复制当前节点�Q�或者复制当前节点以及它的所有子孙节炏V�?/td>
hasChildNodes() 如果当前节点拥有子节点，则将�q�回true�?/td>
insertBefore() �l�文档树插入一个节点，位置在当前节点的指定子节点之前。如果该节点已经存在�Q�则删除之再插入到它的位�|��?/td>
removeChild() 从文档树中删除�ƈ�q�回指定的子节点�?/td>
replaceChild() 从文档树中删除�ƈ�q�回指定的子节点�Q�用另一个节�Ҏ��换它�?/td>
　　接下来，让我们��用上�q�的DOM应用�~�程接口�Q�来试着操作HTML文档�?/p>
　　A、遍历文档的节点
　　DOM把一个HTML文档视�ؓ树，因此�Q�遍历整个树是应该是家常侉K��。跟之前说过的一��P��q�里我们提供两个遍历树的例子。通过它，我们能够学会如何使用childNodes[]和firstChile、lastChild、nextSibling、previousSibling遍历整棵树�?/p>
　　例子1-- sample3_1.htm�Q?br />　　�q�个例子使用了childNodes[]和递归方式来遍历整个文档，�l�计文档中出现的Element元素��L��Q��ƈ把Element标记名全部打印出来。需要特别注意的是，在��用DOM�Ӟ��必须�{�文档被装蝲完毕再执行遍历等行�ؓ操作文档。sample3_1.htm具体代码如下�Q?/p>
无标题文�?lt;/title> <script language="javascript"> var elementName = ""; //全局变量�Q�保存Element标记名，使用完毕要清�I? function countTotalElement(node) { //参数node是一个Node对象 var total = 0; if(node.nodeType == 1) { //��查node是否为Element对象 total++; //如果是，计数器加1 elementName = elementName + node.tagName + "\r\n"; //保存标记�? } var childrens = node.childNodes; //获取node的全部子节点 for(var i=0;i<childrens.length;i++) { total += countTotalElement(childrens[i]); //在每个子节点上进行递归操作 } return total; } </script> </head> <body> <a href="javascript:void(0)" onClick="alert('标记��L��Q? + countTotalElement(document) + '\r\n 全部标记如下�Q�\r\n' + elementName);elementName='';">开始统�?lt;/a> </body> </html></pre>　　例子2 �?sample3_2.htm�Q?br />　　接下来��用firstChile、lastChild、nextSibling、previousSibling遍历整个文档树。修改一下countTotalElement函数�Q�其他跟sample3_1.htm一��P��<pre class="precode">function countTotalElement(node) { //参数node是一个Node对象 var total = 0; if(node.nodeType == 1) { //��查node是否为Element对象 total++; //如果是，计数器加1 elementName = elementName + node.tagName + "\r\n"; //保存标记�? } var childrens = node.childNodes; //获取node的全部子节点 for(var m=node.firstChild; m!=null;m=m.nextSibling) { total += countTotalElement(m); //在每个子节点上进行递归操作 } return total; } </pre>　　B、搜索文档中特定的元�?br />　　在��用DOM的过�E�中�Q�有时候需要定位到文档中的某个特定节点�Q�或者具有特定类型的节点列表。这�U�情况下�Q�可以调用Document对象的getElementsByTagName()和getElementById()�Ҏ��来实现�?/p>　　document.getElementsByTagName()�q�回文档中具有指定标记名的全部Element节点数组�Q�也是NodeList�c�d��Q�。Element出现在数�l�中的顺序就是他们在文档中出现的��序。传递给getElementsByTagName()的参数忽略大��写。比如，惛_��位到�W�一�?lt;table>标记�Q�可以这样写�Q�document.getElementsByTagName(“table�?[0]。例外的�Q�可以��用document.body定位�?lt;body>标记�Q�因为它是唯一的�?/p>　　getElementsByTagName()�q�回的数�l�取决于文档。一旦文档改变，�q�回�l�果也立��x��变。相比，getElementById()则比较灵�z�，可以随时定位到目标，只是要实现给目标元素一个唯一的id属性倹{��这个我们在《AJAX开发简略》的“��联菜单”例子中已经使用�q�了�?/p>　　Element对象也支持getElementsByTagName()和getElementById()。不同的是，搜烦领域只针对调用者的子节炏V�?/p>　　C、修�Ҏ��档内�?br />　　遍历整棵文档树、搜索特定的节点�Q�我们最�l�目的之一是要修改文档内容。接下来的三个例子将使用Node的几个常用方法，来演�C�如何修�Ҏ��档内宏V�?/p>　　例子3 -- sample4_1.htm�Q?br />　　�q�个例子包含三个文本节点和一个按钮。点��L��钮后�Q�三个文本节点和按钮的顺序将被颠倒。程序��用了Node的appendChild()和removeChild()�Ҏ��?/p><pre class="precode"><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>无标题文�?lt;/title> <script language="javascript"> function reverseNode(node) { // 颠倒节点node的顺�? var kids = node.childNodes; //获取子节点列�? var kidsNum = kids.length; //�l�计子节�Ҏ��L�� for(var i=kidsNum-1;i>=0;i--) { //逆向遍历子节点列�? var c = node.removeChild(kids[i]); //删除指定子节点，保存在c�? node.appendChild(c); //��c攑֜��C��|�上 } } </script> </head> <body> �W�一�?lt;/p> �W�二�?lt;/p> �W�三�?lt;/p> <input type="button" name="reverseGo" value="颠�? onClick="reverseNode(document.body)"> </body> </html> </pre>　　例子4-- sample4_2.htm�Q?br />　　例子1通过直接操作body的子节点来修�Ҏ��档。在HTML文档中，布局和定位常帔R��过表格<table>来实现。因此，例子4��演�C�操作表格内容，��表格的四个单元行顺序颠倒。如果没有��?lt;tbody>标签�Q�则<table>把全部的<tr>当做是属于一个子节点<tbody>�Q�所以我们采用数�l�缓存的方式�Q�把行数据颠倒一下。这个例子同时也演示了如何��用DOM创徏表格单元行�?/p><pre class="precode"><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>无标题文�?lt;/title> <script language="javascript"> function reverseTable() { var node = document.getElementsByTagName("table")[0]; //�W�一个表�? var child = node.getElementsByTagName("tr"); //取得表格内的所有行 var newChild = new Array(); //定义�~�存数组�Q�保存行内容 for(var i=0;i<child.length;i++) { newChild[i] = child[i].firstChild.innerHTML; } node.removeChild(node.childNodes[0]); //删除全部单元�? var header = node.createTHead(); //新徏表格行头 for(var i=0;i<newChild.length;i++) { var headerrow = header.insertRow(i); //插入一个单元行 var cell = headerrow.insertCell(0); //在单元行中插入一个单元格 //在单元格中创建TextNode节点 cell.appendChild(document.createTextNode(newChild[newChild.length-i-1])); } } </script> </head> <body> <table width="200" border="1" cellpadding="4" cellspacing="0"> <tr> <td height="25">�W�一�?lt;/td> </tr> <tr> <td height="25">�W�二�?lt;/td> </tr> <tr> <td height="25">�W�三�?lt;/td> </tr> <tr> <td height="25">�W�四�?lt;/td> </tr> </table> <input type="button" name="reverse" value="开始颠�? onClick="reverseTable()"> </body> </html> </pre>　　例子5 -- sample4_3.htm�Q?br />　　正如我们在Node节点介绍部分所指出的那��P��appendChild()、replaceChild()、removeChild()、insertBefore()�Ҏ��会立��x��变文档的�l�构。下面的例子包含两个表格�Q�我们试着把表��g��的内�Ҏ��换表��g��的内宏V�?/p><pre class="precode"><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>无标题文�?lt;/title> <script language="javascript"> function replaceContent() { var table1 = document.getElementsByTagName("table")[0]; var table2 = document.getElementsByTagName("table")[1]; var kid1 = table1.firstChild.firstChild.firstChild; //定位�?lt;td>节点 var kid2 = table2.firstChild.firstChild.firstChild; //定位�?lt;td>节点 var repKid = kid2.firstChild; //定位到表��g��<td>内含的TextNode节点 try { //用表��g��的单元格内容替换表格一的单元格内容�Q�表��g��变成没有单元格内�? kid1.replaceChild(repKid,kid1.firstChild); //下面注释如果开放，��出现object error�Q�因��g��已经被改�? //kid2.replaceChild(kid1.firstChild,kid2.firstChild); }catch(e){ alert(e); } } </script> </head> <body> <table width="200" border="1" cellspacing="0" cellpadding="0"> <tbody> <tr> <td>表格一</td> </tr> </tbody> </table> <table width="200" border="1" cellspacing="0" cellpadding="0"> <tbody> <tr> <td>表格�?lt;/td> </tr> </tbody> </table> <input type="button" name="replaceNode" value="替换" onClick="replaceContent()"> </body> </html> </pre>　　注意�Q�当执行kid1.replaceChild(repKid,kid1.firstChild);的时候，table2的子节点已经被�{�U�d��table1了，table2已经没有子节点，不能再调用table2的子节点。看看代码的注释�Q�试着�q�行一下，应该��q��道文档是怎么改变的了�?/p>　　D、往文档��d��新内�?br />　　在学会遍历、搜索、修�Ҏ��档之后，我们现在试着�|�文档添加新的内宏V��其实没有什么新意，只是利用我们上述提到的Node的属性和�Ҏ��而已�Q�还是操�?lt;table>标记的内宏V��有新意的是�Q�我们要实现一个留�a��ѝ��是的，留言��，你可以往里面留言�Q�只是不能刷新噢�?/p>　　例子6 �?sample5_1.htm�Q?/strong><pre class="precode"><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>无标题文�?lt;/title> <script language="javascript"> function insertStr() { var f = document.form1; var value = f.str.value; if(value!="") { // 从最�l�的TextNode节点开始，慢慢形成<tbody>�l�构 var text = document.createTextNode(value); //新徏一个TextNode节点 var td = document.createElement("td"); //新徏一个td�c�d��的Element节点 var tr = document.createElement("tr"); //新徏一个tr�c�d��的Element节点 var tbody = document.createElement("tbody"); //新徏一个tbody�c�d��的Element节点 td.appendChild(text); //��节点text加入td�? tr.appendChild(td); //��节点td加入tr�? tbody.appendChild(tr); //��节点tr加入tbody�? var parNode = document.getElementById("table1"); //定位到table�? parNode.insertBefore(tbody,parNode.firstChild); //��节点tbody插入到节炚w��? //parNode.appendChild(tbody); //��节点tbody加入节点��N�� } } </script> </head> <body> <form name="form1" method="post" action=""> <input name="str" type="text" id="str" value=""> <input name="insert" type="button" id="insert" value="留言" onClick="insertStr()"> </form> <table width="400" border="1" cellspacing="0" cellpadding="0" id="table1"> <tbody> <tr> <td height="25">�|�友留言列表�Q?lt;/td> </tr> </tbody> </table> </body> </html> </pre>　　我们之前说过�Q?lt;table>的子节点�?lt;tbody>�Q?lt;tbody>的子节点才是<tr>�Q?lt;tr>�?lt;td>的父节点�Q�最�?lt;td>内部的TextNode节点。所以，往<table>增加单元��D��要逐��形成�Q�就像往树里面添加一个枝桠一��P��要有叶子有径。看看，�q�个留言��是不是很简单啊。这个例子同时也演示了往<table>表格标记里面增加内容的另一�U�方法�?/p> 　　E、��用DOM操作XML文档 　　在数据表�C�方面，XML文档更加�l�构化。DOM在支持HTML的基��上提供了一�p�d��的API�Q�支持针对XML的访问和操作。利用这些API�Q�我们可以从XML中提取信息，动态的创徏�q�些信息的HTML呈现文档。处理XML文档�Q�通常遵��@“加载XML文档à提取信息à加工信息à创徏HTML文档”的�q�程。下面的例子演示了如何加载�ƈ处理XML文档�?/p>　　�q�个例子包含两个JS函数。loadXML()负责加蝲XML文档�Q�其中既包含加蝲XML文档�?�U�DOM代码�Q�又有实现同��h��作的Microsoft专有API代码。需要提醒注意的是，文档加蝲�q�程不是瞬间完成的，所以对loadXML()的调用将在加载文档完成之前返回。因此，需要传递给loadXML()一个引用，以便文档加蝲完成后调用�?/p>　　例子中的另外一个函数makeTable()�Q�则在XML文档加蝲完毕之后�Q��用最后前介绍�q�的DOM应用�~�程接口��d��XML文档信息�Q��ƈ利用�q�些信息形成一个新的table表格�?/p>　　例子7 -- sample6_1.htm�Q?/strong><pre class="precode"><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>无标题文�?lt;/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�Q?/strong> <?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> </pre><a name="a75"></a>7.5、处理XML文档 　　��q��XML文档的AJAX是不完整的。在本部分未完成之前�Q�有读者说AJAX改名叫AJAH�Q�H应该代表HTML吧）比较合适。应该承认，XML文档在数据的�l�构化表�C�Z��及接口对接上有先天的优势�Q�但也不是所有的数据都应该用XML表示。有些时候单�U�的文本表示可能会更合适。下面先举个AJAX处理�q�回XML文档的例子再讨论什么时候��用XML�?br /> 7.5.1、处理返回的XML 　　 例子8 -- sample7_1.htm�Q?br />　　在这个例子中�Q�我们采用之前确定的AJAX开发框�Ӟ��E�微修改一下body内容和processRequest的相应方式，��先前的employees.xml的内容读取出来�ƈ昄��?　　body的内容如下：<pre class="precode"><input type="button" name="read" value="��d��XML" onClick="send_request('employees.xml')"> processRequest()�Ҏ��修改如下�Q? // 处理�q�回信息的函�? function processRequest() { if (http_request.readyState == 4) { // 判断对象状�? if (http_request.status == 200) { // 信息已经成功�q�回�Q�开始处理信�? 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++) { // 循环��d��employees.xml的内�? var employee = employees[i]; feedbackStr += "员工�Q? + employee.getAttribute("name"); feedbackStr += " 职位�Q? + employee.getElementsByTagName("job")[0].firstChild.data; feedbackStr += " 工资�Q? + employee.getElementsByTagName("salary")[0].firstChild.data; feedbackStr += "\r\n"; } alert(feedbackStr); } else { //��面不正�? alert("您所��h��的页面有异常�?); } } } </pre>　　�q�行一下，看来效果�q�不错：<a name="_Toc119127385"></a>7.5.2、选择合适的XML生成方式 　　现在的web应用�E�序往往采用了MVC三层剥离的设计方式。XML作�ؓ一�U�数据保存、呈现、交互的文档�Q�其数据往往是动态生成的�Q�通常由JavaBean转换�q�来。由JavaBean转换成XML文档的方式有好几�U�，选择合适的转换方式往往能达��C��半功倍的效果。下面介�l�两�U�常用的方式�Q�以侉K��要的时候根据情况取舍�?/p>　　A、类自行序列化成XML 　　�c�自行序列化成XML��x��个类都实现自��q��toXML()�Ҏ��Q�选择合适的API、适当的XML�l�构、尽量便��L��生成逻辑快速生成相应的XML文档。显�Ӟ��q�种方式必须要求每个�cȝ��写专门的XML生成代码�Q�每个类只能调用自己的toXML()�Ҏ��。应用诸如JDOM�{�一些现成的API�Q�可以减��不��开发投入。例�?是一个利用JDOM的API形成的toXML()�Ҏ��?/strong>　　例子9 -- toXml() �?JDOM 实现 -- Employ�cȝ��toXml()�Ҏ��Q?/strong><pre class="precode">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; } </pre>　　JDOM提供了现成的API�Q��得序列化成XML的工作更加简单，我们只需要把toXML()外面包装一个Document�Q�然后��用XMLOutputter把文档写入servlet��可以了。toXml()允许递归调用其子�cȝ��toXML()�Ҏ��Q�以便生成包含子囄��XML文档�?/p>　　使用�c�自行序列化成XML的方式，要每个类都实现自��q��toXML()�Ҏ��Q�而且存在数据模型与视图耦合的问题，卌��么�ؓ每个可能的视囄��写独立的toXML()�Ҏ��Q�要么心甘情愿接收冗余的数据�Q�一旦数据结构或者文档发生改变，toXML()��p��做必要的修改�?/p>　　B、页面模板生成XML方式 　　一般的�Q�可以采用通用的页面模板技术来生成XML文档�Q�这个XML文档可以�W�合��M��需要的数据模型�Q�供AJAX灉|��的调用。另外，模板可以采用��M��标记语言�~�写�Q�提高工作效率。下面是一个采用Struts标签库编写的XML文档�Q�输��Z��前提到的employees.xml�Q?/p>　　Sample8_2.jsp�Q?/strong><pre class="precode"><%@ 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> </pre>　　　　采用��面模板生成XML方式�Q�需要�ؓ每个需要的的数据模型徏立一个对立的JSP文�g�Q�用来生成符合规范的XML文档�Q�而不能仅仅在�cȝ��toXML()�Ҏ��中组�l�对象图来实现。不�q�，倒是可以更加方便的确保标记匹配、元素和属性的��序正确以及XML实体正确转义�?/p>　　参考资料中Philip McCarthy的文章还描述了一�U�Javascript对象标注的生成方式，本文在此不赘�q�。有兴趣的读者可以自行查看了解�?/p><a></a>7.5.3、如何在使用XML�q�是普通文本间权衡 　　使用XML文档��实有其方便之处。不�q�XML文档的某些问题倒是要考虑一下，比如说�g�q�，��x��务器不能立即解析XML文档成�ؓDOM模型。这个问题在一定程度上会媄响AJAX要求的快速反应能力。另外，某些情况下我们�ƈ不需要��用XML来表�C�数据，比如说数据��够简单成只有一个字�W�串而已。就好像我们之前提到的数据校验和�U�联菜单的例子一栗��所以，个�h认�ؓ在下面这些情况下可以考虑使用XML来作为数据表�C�的介质�Q?<ul><li>数据比较复杂�Q�需要用XML的结构化方式来表�C? </li><li>不用考虑带宽和处理效率支�? </li><li>与系�l�其他API或者其他系�l�交互，作�ؓ一�U�数据中转中�? </li><li>需要特定各式的输出视图而文本无法表�C�的 </li></ul>　　��M��Q�要认真评估两种表示方式的表�C�成本和效率�Q�选择合适的合理的表�C�方式。　　 　　在关于AJAX的系列文章的下一��，我们��综合��用DOM和XML�Q�来实现一个可以持久化的简单留�a��ѝ��另外，�q�将试着模拟MSN Space的部分功能，来体会AJAX的魅力�?a name="a8"></a><a>参考文章：</a> <table cellspacing="1" cellpadding="4" bgcolor="#000000"><tbody><tr bgcolor="#ffffff"><td valign="top" width="69">作者：</td><td valign="top" width="150">fanscial</td><td valign="top" width="75">标题�Q?/td><td valign="top" width="416">《AJAX��介�?/td></tr><tr bgcolor="#ffffff"><td valign="top" width="69">�|�址�Q?/td><td valign="top" width="641" colspan="3"><a href="/fanscial/archive/2005/08/31/11628.html" target="_blank">http://www.tkk7.com/fanscial/archive/2005/08/31/11628.html</a></td></tr><tr bgcolor="#ffffff"><td valign="top" width="69">作者：</td><td valign="top" width="150">Amour GUO</td><td valign="top" width="75">标题�Q?/td><td valign="top" width="416">《AJAX内部交流文档�?/td></tr><tr bgcolor="#ffffff"><td valign="top" width="69">�|�址�Q?/td><td valign="top" width="641" colspan="3"><a target="_blank">http://www.dragonson.com/doc/ajax.html</a></td></tr><tr bgcolor="#ffffff"><td valign="top" width="69">作者：</td><td valign="top" width="150">MoztwWiki</td><td valign="top" width="75">标题�Q?/td><td valign="top" width="416">《AJAX上手��?/td></tr><tr bgcolor="#ffffff"><td valign="top" width="69">�|�址�Q?/td><td valign="top" width="641" colspan="3"><a target="_blank">http://wiki.moztw.org/index.php/AJAX_%E4%B8%8A%E6%89%8B%E7%AF%87</a></td></tr><tr bgcolor="#ffffff"><td valign="top" width="69">作者：</td><td valign="top" width="150">Philip McCarthy</td><td valign="top" width="75">标题�Q?/td><td valign="top" width="416">面向Java开发�h员的Ajax:构徏动态的Java应用�E�序</td></tr><tr bgcolor="#ffffff"><td valign="top" width="69">�|�址�Q?/td><td valign="top" width="641" colspan="3"><a target="_blank">http://kb.csdn.net/java/Articles/200510/bed0423e-5297-49c9-9464-0e3eb733c8b5.html</a></td></tr><tr bgcolor="#ffffff"><td valign="top" width="69">作者：</td><td valign="top" width="150">Philip McCarthy</td><td valign="top" width="75">标题�Q?/td><td valign="top" width="416">面向Java开发�h员的Ajax:Ajax的Java对象序列�?/td></tr><tr bgcolor="#ffffff"><td valign="top" width="69">�|�址�Q?/td><td valign="top" width="641" colspan="3"><a target="_blank">http://kb.csdn.net/java/Articles/200510/a5b630cf-a2c2-46f1-8e3b-eadde723e734.html</a></td></tr><tr bgcolor="#ffffff"><td valign="top" width="69">作者：</td><td valign="top" width="150">David Flanagan</td><td valign="top" width="75">书名�Q?/td><td valign="top" width="416">《Javascript权威指南�?/td></tr></tbody></table>　　OpenDoc版权说明�Q?/strong> 　　本文档版权归原作者所有�?br />　　在免贏V��且无�Q何附加条件的前提下，可在�|�络媒体�?/strong>自由传播�?br />　　如需部分或者全文引用，请事先征求作者意见�?br />　　如果本文�Ҏ��有些许帮助，表达谢意的最好方式，是将您发现的问题和文档改�q�意见及时反馈给作者。当�Ӟ��倘若有时间和能力�Q�能为技术群体无偿�A献自��q��所学�ؓ最好的回馈�?/p>参与讨论�Q?a target="_blank">http://dev2dev.bea.com.cn/bbs/thread.jspa?forumID=121&threadID=28135&start=0&tstart=0</a><div id="ecgassi" class="dot001"></div><table cellspacing="0" cellpadding="3" width="100%" border="0"><tbody><tr valign="bottom"><td colspan="2" height="20"> 作者简�?/span></td></tr><tr><td valign="top" align="middle" width="0"></td><td>dev2dev ID: educhina, 软�g工程师，联络方式<a href="mailto:eamoi@163.com">eamoi@163.com</a>�Q�技术） <a href="mailto:zcke0728@hotmail.com">zcke0728@hotmail.com</a>�Q�版权）�?Blog: <a href="/eamoi/" target="_blank">http://www.tkk7.com/eamoi/</a></td></tr></tbody></table> <div align=right><a style="text-decoration:none;" href="http://www.tkk7.com/TrampEagle/" target="_blank">TrampEagle</a> 2006-01-13 10:01 <a href="http://www.tkk7.com/TrampEagle/articles/27853.html#Feedback" target="_blank" style="text-decoration:none;">发表评论</a></div> </article> <article> TrampEagle — Tue, 10 Jan 2006 05:31:00 GMT 引自�Q?A >http://www.matrix.org.cn/resource/article/43/43910_Java_Ajax.html</A> <div id="ikeoqqm" class=title> <H2>面向Java开发�h员的Ajax: Ajax 的Java 对象序列�?/H2><A >pawenwen</A> 发表�?2005-10-31 点击�?606 评论�?1 评�h:11/3 关键�?ajax </DIV> <div id="yquwqww" class=summary> <div id="gsmwqge" class=left></DIV> <div id="gqcwowk" class=center> <H4>摘要:</H4>�q�篇文章侧重于可以用来生�?Java 对象以数据�ؓ中心的视囄��技术。我��演�C�可以把 JavaBeans 变成 XML 文档的各�U�方法，�q�且讨论每种�Ҏ��的优劣。您��看��Cؓ什�?XML �q�不��L��最好的途径�Q�对于简单的 Ajax ��h��来说�Q�传输纯文本更好。最后，我将介绍 JavaScript 对象标注�Q�JSON�Q�。JSON 允许数据以序列化�?JavaScript 对象囄��形式传输�Q�在客户端代码中处理序列化的 JavaScript 对象图极为容易�?</DIV> <div id="qicwqeu" class=right> <div id="aseycyy" class=help> <H4>文章工具</H4><A >收藏</A> <A >投票评分</A> <A >发表评论</A> <A onclick="copyLink('面向Java开发�h员的Ajax: Ajax 的Java 对象序列�?);" >复制链接</A> </DIV></DIV></DIV> <div id="coysccq" class=overflow id=text> <CENTER>面向 Java 开发�h员的 Ajax: Ajax �?Java 对象序列�?/SPAN></CENTER> <CENTER>�?Ajax 应用�E�序中序列化数据的五�U�途径</CENTER> <CENTER>Philip McCarthy , 软�g开发顾�? 独立��N��</CENTER> <CENTER>2005 �q?10 �?24 �?/CENTER> 如果您正在��用异�?JavaScript �?XML�Q�Ajax�Q�进�?Java? Web 开发，那么您最兛_��的问题可能就是把数据从服务器传递给客户机。在面向 Java 开发�h员的 Ajax �p�d��的第二篇文章中，Philip McCarthy 介绍�?Java 对象序列化的五种方式�Q��ƈ提供了选择最适合应用�E�序的数据格式和技术所需要的全部信息�?BR>在这个系列的 �W�一��文�?中，我介�l�了 Ajax 的构造块�Q?BR> 如何�?JavaScript XMLHttpRequest 对象�?Web ��面向服务器发送异步请求�?BR>如何�?Java servlet 处理和响应请求（向客��h��q�回 XML 文档�Q��?BR>如何在客��L��用响应文档更新页面视图�?BR>�q�一�ơ，我将�l�箋讨论 Ajax 开发的基础知识�Q�但是将侧重于许�?Java Web 开发�h员最兛_��的问题：为客��h��生成数据�?BR> 多数 Java 开发�h员已�l�把模型-视图-控制器（MVC�Q�模式应用在他们�?Web 应用�E�序上。在传统�?Web 应用�E�序中，视图�l��g�?JSP 或者其他表�C�技术（例如 Velocity 模板�Q�构成。这些表�C�组件动态地生成全新�?HTML ��面�Q�替代用户以前正在查看的��面�Q�从而更新用��L��面。但是，�?Java Web 应用�E�序使用 Ajax UI 的情况下�Q�基于从 XMLHttpRequest 的响应接收到的数据，JavaScript 客户端代码对于更新用��L��到的内容负有最�l�责仅R��从服务器的角度来看�Q�视图成为它响应客户��求而发送的数据表示�?BR> �q�篇文章侧重于可以用来生�?Java 对象以数据�ؓ中心的视囄��技术。我��演�C�可以把 JavaBeans 变成 XML 文档的各�U�方法，�q�且讨论每种�Ҏ��的优劣。您��看��Cؓ什�?XML �q�不��L��最好的途径�Q�对于简单的 Ajax ��h��来说�Q�传输纯文本更好。最后，我将介绍 JavaScript 对象标注�Q�JSON�Q�。JSON 允许数据以序列化�?JavaScript 对象囄��形式传输�Q�在客户端代码中处理序列化的 JavaScript 对象图极为容易�?BR> 关于�C�Z�� 我将使用一个示例应用程序和几个用例来演�C��里讨论的技术特性和技术。图 1 昄��的极为简单的数据模型可以表示�C�Z��用例。这个模型代表在�U�商店中的顾客帐戗��顾客拥有以前订单的集合�Q�每个订单包含几个商品�?BR> 虽然 XMLHttpRequest 对于发送数据��用的格式没有做�Q何限�Ӟ��但是对于多数目的来说�Q�只发送传�l�的表单数据是适合的，所以我的讨论集中在服务器的响应上。响应也可以有基于文本的格式�Q�但是正如它的名字表�C�的�Q�XMLHttpRequest ��h��内置的处�?XML 响应数据的能力。这�?XML 成�ؓ Ajax 响应的默认选择�Q�所以我们从 XML 格式开始讨论�?BR> �?Java �c�M��?XML �?Ajax 响应作�ؓ XML 来传递有许多原因�Q�每个支�?Ajax 的浏览器都有��D�� XML 文档的方法，也有许多服务器端技术可以处�?XML 数据。通过制定一个方案，描述要交换的文档�c�d��Q�在 Ajax 客户端和服务器端之间很容易定义合�U�，而且如果服务器端架构采用面向服务的方式，那么使用 XML 也可以允讔R�� Ajax 客户��Z��用您提供的数据�?BR> 我将考虑�?Java 对象产生 XML 数据的三�U�方法，�q�讨论每�U�方法的优劣�?BR> 自行�q�行序列�?/B> 首先�Q�可以从对象图以�~�程的方式生�?XML。这�U�方式可以简单到只是在每�?JavaBean �c�M��实现 toXml() �Ҏ��卛_��。然后就可以选择合适的 XML API�Q�让每个 bean 提供表示自己状态的元素�Q��ƈ递归地对自己的成员调用对象图。显�Ӟ��q�种方式无法扩展到大量的�c�，因�ؓ每个�c�都需要专门编写自��q�� XML 生成代码。从好的斚w��来看�Q�这是一个实现�v来简单的方式�Q�没有额外的配置支出或者更复杂的构��E�支出，��M�� JavaBean ��N��可以只用几个调用��变�?XML 文档�?BR> 在本�p�d�� 前一��文�?的示例代码中�Q�我�?XML 标记字符串连接在一��P��实现�?toXml() �Ҏ��。上�ơ我��提到过�Q�这是个�p�糕的方法，因�ؓ它把��保标记配对、实体编码等工作的负担放在每�?toXml() �Ҏ��的代码中。在 Java �q�_��上有几个 XML API 可以替您做这些工作，�q�样您就可以把精力集中在 XML 的内容上。清�?1 �?JDOM API 实现了在�U�商店示例中表示订单的类中的 toXml()�?BR> 清单 1. Order �cȝ�� toXml() �?JDOM 实现 <PRE class=overflow>public Element toXml() { Element elOrder = new Element("order"); elOrder.setAttribute("id",id); elOrder.setAttribute("cost",getFormattedCost()); Element elDate = new Element("date").addContent(date); elOrder.addContent(elDate); Element elItems = new Element("items"); for (Iterator<Item> iter = items.iterator() ; iter.hasNext() ; ) { elItems.addContent(iter.next().toXml()); } elOrder.addContent(elItems); return elOrder; }</PRE> 在这里可以看到用 JDOM 创徏元素、��用属性和��d��元素内容有多么简单。递归地调用复�?JavaBean �?toXml() �Ҏ��是�ؓ了取得它们子囄�� Element 表示。例如，items 元素的内�Ҏ��通过调用 Order 聚合的每�?Item 对象上的 toXml() 得到的�?BR> 一旦所有的 JavaBean 都实��C�� toXml() �Ҏ��Q�那么把��L��对象囑ֺ�列化�?XML 文档�q�返回给 Ajax 客户机就��单了�Q�如清单 2 所�C��?BR> 清单 2. �?JDOM 元素生成 XML 响应 <PRE class=overflow>public void doGet(HttpServletRequest req, HttpServletResponse res) throws java.io.IOException, ServletException { String custId = req.getParameter("username"); Customer customer = getCustomer(custId); Element responseElem = customer.toXml(); Document responseDoc = new Document(responseElem); res.setContentType("application/xml"); new XMLOutputter().output(responseDoc,res.getWriter()); } </PRE> JDOM 再次把工作变得非常简单。只需要在对象图返回的 XML 元素外面包装一�?Document�Q�然后用 XMLOutputter 把文档写�?servlet 响应卛_��。清�?3 昄��了用�q�种方式生成�?XML �C�Z��Q�用 JDOM Format.getPrettyFormat() �?XMLOutputter �q�行初始化，格式化得非常好。在�q�个�C�Z��中，��֮�只做了一个订单，包含两个商品�?BR> 清单 3. 代表��֮��?XML 文档 <PRE class=overflow><?xml version="1.0" encoding="UTF-8"?> <customer username="jimmy66"> <realname>James Hyrax</realname> <orders> <order id="o-11123" cost="$349.98"> <date>08-26-2005</date> <items> <item id="i-55768"> <name>Oolong 512MB CF Card</name> <description>512 Megabyte Type 1 CompactFlash card. Manufactured by Oolong Industries</description> <price>$49.99</price> </item> <item id="i-74491"> <name>Fujak Superpix72 Camera</name> <description>7.2 Megapixel digital camera featuring six shooting modes and 3x optical zoom. Silver.</description> <price>$299.99</price> </item> </items> </order> </orders> </customer></PRE> 自行序列化的不�� 有趣的是�Q�清�?3 中的代码展示了让 JavaBean 把自己序列化�?XML 的一个主要不��뀂假设要用这个文档表�C�顾客的订单历史视图。在�q�种情况下，不太可能要显�C�每个历史订单中每个商品的完整说明，或者告诉顾客他或她自己的姓名。但是如果应用程序有一�?ProductSearch �c�，它就是以 Item bean 列表的�Ş式返回搜索结果，那么�?Item �?XML 表示中包含说明可能会有帮助。而且�Q�Item �c�M��代表当前库存水��^的额外字�D�，在��品搜索视图中可能��是需要显�C�的有用信息。但是，不管当前的库存水�q�x��否与当前情况相关�Q�比如对��֮�的订单历史来��_��Q�这个字�D�都会从包含 Item 的�Q何对象图中序列化出来�?BR> 从设计的角度来看�Q�这是数据模型与视图生成耦合的经兔R��题。每�?bean 只能用一�U�途径序列化自己，一成不变的方式意味着 Ajax 交互最�l�要交换它们不需要交换的数据�Q�因此造成客户端代码要从文档中扑ֈ�需要的信息更加困难�Q�而且也会增加带宽消耗和客户端的 XML 解析旉��。这�U�耦合的另一个后果就�?XML 的语法不能脱��?Java �cȝ��立变化。例如，寚w��客文档的�Ҏ��做修改，可能会媄响多�?Java �c�，造成它们也不得不做修改和重新�~�译�?BR> 我稍后会解决�q�些问题�Q�但是首先来看一个对自行序列化方式的可�׾~�性问题的解决�Ҏ��Q�XML �l�定框架�?BR> XML �l�定框架 �q�些�q�来�Q�已�l�开发了多个 Java API 来简�?XML 文档�?Java 对象囄��l�定�q�程。多数都提供�?XML �~�排和拆解；也就是说�Q�它们可以在 Java 对象囑֒� XML 之间执行双向会话。这些框架封装了 XML 处理的全部工作，�q�意味着应用�E�序代码只需要处理普通的 Java �c�R��它们还希望提供有用的辅助功能，例如文档验证。笼�l�来��_��q�些框架采用了两�U�不同的方式�Q�代码生成和对象�?XML 映射。我��分别解释这两种方式�?BR> 代码生成方式 使用代码生成的框架包�?XMLBeans、JAXB、Zeus �?JBind。Castor 也能使用�q�项技术。这�c�L��架的��L��是描�q�文档数据类型的 XML �Ҏ��。��用框架提供的工具�Q�就可以生成代表�q�些�Ҏ��定义�c�d��?Java �c�R��最后，用这些生成的�cȝ��写应用程序，表示自己的模型数据，�q��过框架提供的一些辅助机制把数据序列化成 XML�?BR> 如果应用�E�序要��用大�?XML 语法�Q�那么代码生成方式是个很好的�Ҏ��。在数十个类上编写定�?XML 序列化代码的可�׾~�性问题由此消除。另一斚w��Q�也不再需要定义自��q�� JavaBean。框架生成的 Java �c�通常非常�W�合 XML 的结构，所以对它们�q�行�~�码很难。而且�Q�生成的�c�d��成哑数据容器�Q�因��Z��般不能向它们��d��行�ؓ。一般来��_��在应用程序代码中要做些妥协，才能很好地处理方案生成的�c�d��。另一个缺��h��如果修改�Ҏ��Q�会造成生成的类也要修改�Q�所以也��׃��对围�l�它们编写的代码带来相应的媄响�?BR> �q�种�c�d��?XML �l�定框架在数据拆解时最有用�Q�例如，使用 XML 文档�q�把它们转化�?Java 对象�Q�。除非拥有大型数据模型而且有可能从生成的类中获益，否则��Z��代码生成的框架对�?Ajax 应用�E�序来说可能有很大的杀伤力�?BR> 映射方式 采用映射方式的框架包�?Castor �?Apache Commons Betwixt。映��通常是比代码生成更灵�z�d��更轻量的解决�Ҏ��。首先，可以像通常一��L��?JavaBean�Q�包括�Q何行��Z��及�Q何自己喜�Ƣ的方便的方法。然后，在运行时�Q�调用框架中��Z��内省的编排器�Q��ƈ�Ҏ��对象成员的类型、名�U�和值生�?XML 文档。通过定义�cȝ��映射文�g�Q�可以覆盖默认的�l�定�{�略�Q��ƈ��q��?XML 中的表示方式对编排器提出��?BR> �q�种�Ҏ��是在可�׾~�性与灉|��性之间的良好折中。可以按照自己喜�Ƣ的方式�~�写 Java �c�，�~�排器负责处�?XML。虽然映��定义文件编写�v来简单，可�׾~�性也��_��好，但是映射规则最多只能改变标准的�l�定行�ؓ�Q�而且在对象结构和它们�?XML 表示之间总要�D�留一些耦合。最�l�，可能不得不在 Java 表示�?XML 格式之间任选一个做些折中，才能让映��方法�v作用�?BR> 数据�l�定�ȝ�� Dennis Sosnoski ��?XML 数据�l�定 API 的主题，在代码生成和代码映射两个斚w��写了深入的文章。如果想�q�一步研�I�这个领域，我推荐他�?Castor 和代码生成框架方面的�_�ֽ�文章�Q�请参阅参考资�?中的链接�Q��?BR> ��M��Q�代码生成方式损�׃��q�多的灵�z�L��和方便性，对于典型�?Ajax 应用�E�序用处不大。另一斚w��Q�基于映��的框架可能工作得很好，但是要恰到好处地调整它们的映��策略，以便从对象生成需要的 XML�?BR> 所有的 XML �l�定 API 都具有手工序列化技术的一个主要不��I��模型和视囄��耦合。被限制��Z��个类型一�?XML 表示�Q�就意味着在网�l�上总要有冗余数据传输。更严重的问题是�Q�在情况要求客户端代码��用专门视图时�Q�客��L��代码却无法得到它�Q�所以可能要费力地处理给定对象图的一成不变的视图�?BR> 在传�l�的 Web 应用�E�序开发中�Q�采用页面模板系�l�把视图生成与控制器逻辑和模型数据干净地分��R��这�U�方法在 Ajax 场景中也会有帮助�? ��面模板�pȝ�� ��M��通用目的的页面模板技术都可以用来生成 XML�Q�从而�� Ajax 应用�E�序�Ҏ��自己的数据模型生成�Q�?XML 响应文档。额外收��h��Q�模板可以用��单的、表现力强的标记语言�~�写�Q�而不是用一行行�?Java 代码�~�写。清�?5 是一�?JSP ��面�Q�采用了 Customer bean �q�表�C�出定制�?XML 视图�Q�适合客户端代码生成订单历史组件�?BR> 清单 4. 生成订单历史文档�?JSP <PRE class=overflow><?xml version="1.0"?> <%@ page contentType="application/xml" %> <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %> <c:set var="cust" value="${requestScope.customer}"/> <orderhistory username="${cust.username}"> <c:forEach var="order" items="${cust.orders}"> <order id="${order.id}" cost="${order.formattedCost}"> <date>${order.date}</date> <items> <c:forEach var="item" items="${order.items}"> <item id="${item.id}"> <name><c:out value="${item.name}" escapeXml="true"/></name> <price>${item.formattedPrice}</price> </item> </c:forEach> </items> </order> </c:forEach> </orderhistory></PRE> �q�个��z�的模板只输��单历史视��N��要的数据�Q�不输出不相关的资料�Q�例如商品说明）。创��Z�品搜索视囄��定制 XML 应当同样��单，�q�个视图包含每个商品的完整说明和库存水��^�?BR> 模板的问�?/B> 另一斚w��Q�现在我需要�ؓ每个不同视图创徏一个新 JSP�Q�而不能仅仅把需要的对象囄��l��v来�ƈ序列化它。从设计的角度来��_��许多人可能会有争议，认�ؓ�q�无论如何是件好事，因�ؓ�q�意味着正式地考虑服务器要生成的文档类型。而且�Q�因为我现在要处理通用的模板环境，而不是特定于 XML �?API�Q�所以确保标记匹配、元素和属性的��序正确以及 XML 实体�Q�例�?< �?&�Q�正��{义就成了我的责�Q。JSP 的核�?out 标记使后面这��工作变得很�Ҏ��Q�但是不是所有的模板技术都提供了这��L��机制。最后，没有方便的途径可以在服务器端根据方案检验生成的 XML 文档的正��性，但这毕竟不是要在生��环境中做的事�Q�可以方便地在开发期间处理它�? 不用 XML 的响应数�?/B> �q�今为止�Q�我介绍的所有技术都�?XML 文档的�Ş式生成服务器响应。但是，XML 有一些问题。其中一个就是�g�q�。浏览器不能立即解析 XML 文档�q�生�?DOM 模型�Q�所以这会降低某�?Ajax �l��g需要的“迅捷”感�Q�特别是在较慢的机器上解析大型文档的时候更是如此。“现场搜索”就是一个示例，在这�U�搜索中�Q�当用户输入搜烦术语�Ӟ��׃��从服务器提取搜烦�l�果�q�显�C�给用户。对于现场搜索组件来��_��q�速地响应输入是非帔R��要的�Q�但是同时它�q�需要迅速而持�l�地解析服务器的响应�?BR> 延迟是一个重要的考虑因素�Q�但是避免��?XML 的最大原因是差劲的客��L�� DOM API。清�?5 昄��了��用跨��览器兼容的方式通过 DOM 得到某个值的时候，通常不得不面对的困难�?BR> 清单 5. �?JavaScript 中导�?XML 响应文档 <PRE class=overflow>// Find name of first item in customer's last order var orderHistoryDoc = req.responseXML; var orders = orderHistoryDoc.getElementsByTagName("order"); var lastOrder = orders[orders.length - 1]; var firstItem = lastOrder.getElementsByTagName("item")[0]; var itemNameElement = firstItem.firstChild; var itemNameText = itemNameElement.firstChild.data; </PRE> 当元素中间存在空白时�Q�情况就变得更加复杂�Q�因为每个元素的 firstChild �l�常是个�I�白文本节点。现在有 JavaScript 库可以缓解处�?XML 文档的麻烦。这些库包括 Sarissa �Q�请参阅参考资料）�?Google-ajaXSLT�Q�这两个库都�?XPath 功能��d��C��大多数浏览器中�?BR> 但是�Q�想��x��代方案还是值得的。除�?responseXML 之外�Q�XMLHttpRequest 对象�q�提供了名�ؓ responseText 的属性，�q�个属性只是以字符串的方式提供服务器的响应体�?BR> responseText 属�?/B> 当服务器需要向客户机发送非常简单的值时�Q�responseText 特别方便�Q�它可以避免 XML ��D��的带宽支出和处理支出。例如，��单的 true/false 响应可以由服务器以纯文本方式�q�回�Q�可以是逗号分隔的简单的名称或数字列表。但是，一般来��_��最好不要在同一个应用程序中�?XML 响应和纯文本响应混合使用�Q�保持单一数据格式可以让代码抽象和重用更加��单�?BR> responseText �?XML 响应数据�l�合时也会有用。在只需要从响应文档中提取单一值的场景中，“欺骗性”地�?XML 当作文本字符�Ԍ��而不把它当作�l�构化的文档对待�Q�会更方�ѝ��例如，清单 6 昄��了如何用正则表达式从��֮�的订单历史中提取�W�一�W�订单的日期。不�q�，�q�实际是�U�花招，一般不应当依赖 XML 文档的词汇表达�?BR> 清单 6. 用正则表辑ּ�处理 XMLHttpRequest �?responseText 对象 <PRE class=overflow>var orderHistoryText = req.responseText; var matches = orderHistoryText.match(/<date>(.*?)<\/date>/); var date = matches[1];</PRE> 在某些情况下�Q�采用即时方式��?responseText 会比较方�ѝ��但是，理想情况下，应当有种途径�Q�可以用一�U�能够让 JavaScript ��L��D��、却没有 XML 处理支出的格式表�C�复杂的�l�构化数据。幸�q�的是，��实存在�q�样一�U�格式�? JavaScript 对象标注 实际上，JavaScript 对象的大部分都由联合数组、数字烦引数�l�、字�W�串、数字或者这些类型的嵌套�l�合而成。因为所有类型都可以�?JavaScript 直接声明�Q�所以可以在一条语句中静态地定义对象图。清�?7 使用 JSON 语法声明了一个对象，�q�演�C�Z��如何讉K��q�个对象。大括号表示联合数组�Q�即对象�Q�，它的�?-值组合由逗号分隔。方括号表示数字索引数组�?BR> 清单 7. �?JSON �?JavaScript 中直接声明一个简单对�?BR> <PRE class=overflow>var band = { name: "The Beatles", members: [ { name: "John", instruments: ["Vocals","Guitar","Piano"] }, { name: "Paul", instruments: ["Vocals","Bass","Piano","Guitar"] }, { name: "George", instruments: ["Guitar","Vocals"] }, { name: "Ringo", instruments: ["Drums","Vocals"] } ] }; // Interrogate the band object var musician = band.members[3]; alert( musician.name + " played " + musician.instruments[0] + " with " + band.name ); </PRE> 既然 JSON 是一个有��的语言�Ҏ��，那么它对 Ajax 有什么意义呢�Q�妙处在于可以用 JSON �?Ajax 服务器响应中通过�|�络发�?JavaScript 对象图。这意味着在客��L��可以避免使用�W�拙�?DOM API �?XML �q�行��D�� —�?只需要分�?JSON 响应�Q�就会立卛_��到可以访问的 JavaScript 对象图。但是，首先需要把 JavaBean 变成 JSON�?BR> �?Java �c�M��?JSON 不同 XML 生成技术所��h��的优�~�点也适用�?JSON 的��生。而且可以证明�Q�存在需要再�ơ��用表�C�模板技术的情况。但是，使用 JSON 在理念上更接�q�于在应用层之间传递序列化的对象，而不是创建应用程序状态的视图。我��介�l�如何用 org.json �q�个 Java API �?Java �c�M��创徏 toJSONObject() �Ҏ��。然后，��可以把 JSONObject ��单地序列化成 JSON。清�?8 反映�?清单 1 讨论�?XML�Q�显�C�Z�� Order �cȝ�� toJSONObject() 实现�?BR> 清单 8. Order �cȝ�� toJSONObject() �Ҏ��实现 <PRE class=overflow>public JSONObject toJSONObject() { JSONObject json = new JSONObject(); json.put("id",id); json.put("cost",getFormattedCost()); json.put("date",date); JSONArray jsonItems = new JSONArray(); for (Iterator<Item> iter = items.iterator() ; iter.hasNext() ; ) { jsonItems.put(iter.next().toJSONObject()); } json.put("items",jsonItems); return json; }</PRE> 可以看到�Q�org.json API 非常��单�?JSONObject 代表 JavaScript 对象�Q�即联合数组�Q�，有不同的 put() �Ҏ��Q�方法接受的 String 键和值是原生�c�d��、String �c�d��或其�?JSON �c�d��。JSONArray 代表索引数组�Q�所以它�?put() �Ҏ��只接受一个倹{��请注意在清�?8 中，创徏 jsonItems 数组�Q�然后再�?put() 把它附加�?json 对象上；可以用另外一�U�方法做�q�项工作�Q�就是对每个��目调用 json.accumulate("items",iter.next().toJSONObject());。accumulate() �Ҏ��?put() �c�M��Q�区别在于它把值添加到按照键进行识别的索引数组�?BR> 清单 9 昄��了如何序列化 JSONObject �q�把它写�?servlet 响应�?BR> 清单 9. �?JSONObject 生成序列化的 JSON 响应 <PRE class=overflow>public void doGet(HttpServletRequest req, HttpServletResponse res) throws java.io.IOException, ServletException { String custId = req.getParameter("username"); Customer customer = getCustomer(custId); res.setContentType("application/x-json"); res.getWriter().print(customer.toJSONObject()); } </PRE> 可以看到�Q�它实际上什么也没有做。在�q�里隐式调用�?JSONObject �?toString() �Ҏ��做了所有工作。请注意�Q�application/x-json 内容�c�d��q�有一点不��定 —�?在编写这��文章的时候，关于 JSON 应当属于什�?MIME �c�d��q�没有定论。但是，目前 application/x-json 是合理的选择。清�?10 昄��了这�?servlet 代码的示例响应�?BR> 清单 10. Customer bean �?JSON 表示 <PRE class=overflow>{ "orders": [ { "items": [ { "price": "$49.99", "description": "512 Megabyte Type 1 CompactFlash card. Manufactured by Oolong Industries", "name": "Oolong 512MB CF Card", "id": "i-55768" }, { "price": "$299.99", "description": "7.2 Megapixel digital camera featuring six shooting modes and 3x optical zoom. Silver.", "name": "Fujak Superpix72 Camera", "id": "i-74491" } ], "date": "08-26-2005", "cost": "$349.98", "id": "o-11123" } ], "realname": "James Hyrax", "username": "jimmy66" } </PRE> 在客��L��使用 JSON 处理的最后一步是把在客户端把 JSON 数据变成 JavaScript 对象。这可以通过�?eval() 的简单调用实玎ͼ��q�个函数可以��x��地解释包�?JavaScript 表达式的字符丌Ӏ�清�?11 �?JSON 响应转变�?JavaScript 对象图，然后执行清单 5 的�Q务，从顾客的最后一�ơ订单中得到�W�一个商品的名称�?BR> 清单 11. 评估 JSON 响应 <PRE class=overflow>var jsonExpression = "(" + req.responseText + ")"; var customer = eval(jsonExpression); // Find name of first item in customer's last order var lastOrder = customer.orders[customer.orders.length-1]; var name = lastOrder.items[0].name;</PRE> 比较清单 11 �?清单 5 可以发现使用 JSON 的客��L��的优�ѝ��如果在 Ajax ��目中要在客��L��对许多复杂的服务器响应进行导航，那么 JSON 可能适合您的需要。JSON �?XMLHttpRequest �l�合�q�会�?Ajax 交互看�v来更�?RPC 调用而不�?SOA ��h��Q�这对应用程序的设计可能会有意义。在下一��文章中�Q�我要研�I�的框架�Q�就是明��地��Z��?JavaScript 代码�Ҏ��务器端对象进行远�E�方法调用而设计的�?BR> JSON 的不��?/B> JSON 也有它的不��。��用这里介�l�的 JSON 方式�Q�就没有办法针对每个��h��对对象的序列化进行裁剪，所以不需要的字段可能�l�常会在�|�络上发送。另外，��d�� toJSONObject() �Ҏ��到每�?JavaBean�Q�可伸羃性不太好�Q�虽然用内省和标注编写一个通用�?JavaBean �?JSON 的序列化器可能很��单。最后，如果服务器端代码是面向服务的�Q�没有单独针对处�?Ajax 客户��h��调整�q�，那么�׃��?XML 一致的支持�Q�XML 会是更好的选择�?BR> 比较序列化技�?/B> 现在已经看到了把 Java 状态传输到 Ajax 客户端的五种不同技术。我讨论了自行手工编�?XML 序列化、通过代码生成�?XML �l�定、通过映射机制�?XML �l�定、基于模板的 XML 生成以及手工�~�码�?JSON 的序列化。每�U�技术都有自��q��优势和不��I��分别适用于不同的应用�E�序架构�? ��Z��ȝ��每种方式的优势与不��Q�表 1 从六个方面进行了�_�略的评分： 可�׾~��?BR>描述技术适应大量数据�c�d��的容易程度。对于每个附加类型，�~�码和配�|�工作量是否会增长？ 易于集成 评估把技术集成到��目的简单程度。是否需要更加复杂的构徏�q�程�Q�是否增加了部��v的复杂性？ Java �c?API 描述以指定方式处理服务器�?Java 对象的容易程度。是可以�~�写普通的 bean�Q�还是不得不处理�W�拙的文档表�C�？ 对输出的控制 描述对类的序列化表示控制的精��程度�?BR> 视图灉|��?BR>评估从同一�l�对象是否可以创��Z��同的、定制的数据序列化�?BR> 客户端数据访�?BR>描述 JavaScript 代码处理服务器响应数据的难易�E�度�?BR> �?1. 数据生成技术的相对价�?nbsp; 自行�~�写 XML 通过代码生成�?XML �l�定通过映射�?XML �l�定 ��面模板 XML 手工�~�码�?JSON 序列�? 可�׾~��?�?�?一�?一�?�? 易于集成 �?�?一�?一�?�? Java �c?API �?�?�?�?�? 对输出的控制 �?�?一�?�?�? 视图灉|��?�?�?�?�?�? 客户端数据访�?�?�?�?一�?�? �l�束�?/B> �?1 中的数据�q�不表明某项序列化技术比其他的技术好。毕竟，六种标准的相寚w��要性取决于��目的具体情��c��例如，如果要处理数癄��数据�c�d��Q�这时想要的是可伸羃性，那么代码生成可能��是最好的选择。如果需要�ؓ同一数据模型生成多个不同视图�Q�那么就应当使用��面模板。如果处理的是小规模��目�Q�想降低需要编写的 JavaScript 代码数量�Q�那么请考虑 JSON�?BR> 希望�q�篇文章为您提供了选择适合自己应用�E�序的序列化技术所需要的信息。请参阅参考资�?一节，学习关于�q�里讨论的技术的更多内容。您�q�应当��l�关注这个系列的下一��文章，在下一��文章中�Q�我��介�l�如何用直接 Web �q�程�Q�DWR�Q�编�?Java Ajax 应用�E�序。DWR 框架支持�?JavaScript 代码中直接调�?Java �c�M��的方法。换句话��_��它替您负责数据序列化的工作，所以您可以在更高的抽象层次上��?Ajax�?BR></DIV> <div align=right><a style="text-decoration:none;" href="http://www.tkk7.com/TrampEagle/" target="_blank">TrampEagle</a> 2006-01-10 13:31 <a href="http://www.tkk7.com/TrampEagle/articles/27374.html#Feedback" target="_blank" style="text-decoration:none;">发表评论</a></div> </article> </main></body></html>

接口	nodeType帔R��	nodeType�?/td>	备注
Element	Node.ELEMENT_NODE	1	元素节点
Text	Node.TEXT_NODE	3	文本节点
Document	Node.DOCUMENT_NODE	9	document
Comment	Node.COMMENT_NODE	8	注释的文�?/td>
DocumentFragment	Node.DOCUMENT_FRAGMENT_NODE	11	document片断
Attr	Node.ATTRIBUTE_NODE	2	节点属�?/td>

�Ҏ��	描述
createAttribute()	用指定的名字创徏新的Attr节点�?/td>
createComment()	用指定的字符串创建新的Comment节点�?/td>
createElement()	用指定的标记名创建新的Element节点�?/td>
createTextNode()	用指定的文本创徏新的TextNode节点�?/td>
getElementById()	�q�回文档中具有指定id属性的Element节点�?/td>
getElementsByTagName()	�q�回文档中具有指定标记名的所有Element节点�?/td>

属�?/td>	描述
tagName	元素的标记名�U�ͼ�比如元素为P。HTML文档�q�回的tabName均�ؓ大写�?/td>

�Ҏ��	描述
getAttribute()	以字�W�串形式�q�回指定属性的倹{�?/td>
getAttributeNode()	以Attr节点的�Ş式返回指定属性的倹{�?/td>
getElementsByTabName()	�q�回一个Node数组�Q�包含具有指定标记名的所有Element节点的子孙节点，光��序�ؓ在文档中出现的顺序�?/td>
hasAttribute()	如果该元素具有指定名字的属性，则返回true�?/td>
removeAttribute()	从元素中删除指定的属性�?/td>
removeAttributeNode()	从元素的属性列表中删除指定的Attr节点�?/td>
setAttribute()	把指定的属性设�\|��ؓ指定的字�W�串��\|��如果该属性不存在则添加一个新属性�?/td>
setAttributeNode()	把指定的Attr节点��d��到该元素的属性列表中�?/td>

属�?/td>	描述
attributes	如果该节�Ҏ��一个Element�Q�则以NamedNodeMap形式�q�回该元素的属性�?/td>
childNodes	以Node[]的�Ş式存攑ֽ�前节点的子节炏V��如果没有子节点�Q�则�q�回�I�数�l��?/td>
firstChild	以Node的�Ş式返回当前节点的�W�一个子节点。如果没有子节点�Q�则为null�?/td>
lastChild	以Node的�Ş式返回当前节点的最后一个子节点。如果没有子节点�Q�则为null�?/td>
nextSibling	以Node的�Ş式返回当前节点的兄弟下一个节炏V��如果没有这��L��节点�Q�则�q�回null�?/td>
nodeName	节点的名字，Element节点则代表Element的标记名�U��?/td>
nodeType	代表节点的类型�?/td>
parentNode	以Node的�Ş式返回当前节点的父节炏V��如果没有父节点�Q�则为null�?/td>
previousSibling	以Node的�Ş式返回紧挨当前节炏V��位于它之前的兄弟节炏V��如果没有这��L��节点�Q�则�q�回null�?/td>

�Ҏ��	描述
appendChild()	通过把一个节点增加到当前节点的childNodes[]�l�，�l�文档树增加节点�?/td>
cloneNode()	复制当前节点�Q�或者复制当前节点以及它的所有子孙节炏V�?/td>
hasChildNodes()	如果当前节点拥有子节点，则将�q�回true�?/td>
insertBefore()	�l�文档树插入一个节点，位置在当前节点的指定子节点之前。如果该节点已经存在�Q�则删除之再插入到它的位�\|��?/td>
removeChild()	从文档树中删除�ƈ�q�回指定的子节点�?/td>
replaceChild()	从文档树中删除�ƈ�q�回指定的子节点�Q�用另一个节�Ҏ��换它�?/td>