在Java2平台企业版中应用异步JavaScript技术和XML(AJAX)
2006-09-19 15:58
411 查看
在Java2平台企业版中应用异步JavaScript技术和XML(AJAX)
作者任何试过过Flickr、GMail、GoogleSuggest或者是GoogleMaps的人都会意识到一种新型的动态Web应用正在逐渐浮出水面。这些应用外观和表现都和传统的桌面应用程序很像,而他们不需要依赖于插件或者是特定于浏览器的功能。过去Web应用只是一系列HTML页面,他们任意一部份内容的更改都必须重新载入页面。像JavaScript编程语言和层叠样式表(CSS)之类的技术已经成熟,可以有效地应用他们来创建高动态的Web应用,而且可以运行在所有的主流浏览器中。本文将会详细介绍你马上就可以使用的一些技术,让他们使你的Web应用像桌面应用更加丰富和更有交互性。
介绍异步JavaScript技术和XML(AJAX)
使用JavaScript技术,一个HTML页面可以异步地对服务器(一般是载入页面的服务器)发送请求并获取XML文档。然后JavaScript可以使用XML文档来更新或改动HTML页面的文档对象模型(DOM)。最近形成了一个术语
AJAX其实不是很新的东西。这些技术对于Windows平台上专注于InternetExplorer的开发人员来说,已经存在好几年了。直到最近,这个技术才被作为Web远程技术或者远程脚本技术被大家了解。Web开发人员也有一段时间曾经使用过插件、Javaapplet和隐藏框架来模拟这种交互模型。最近发生的变化是,对
XMLHttpRequest对象的支持已经成为所有平台上的主流浏览器都包括的特性了。JavaScript技术的
XMLHttpRequest对象是。尽管在正式的JavaScript技术标准中并没有提到这种对象,然而今天主流的浏览器都对他提供了支持。而当代的浏览器如Firefox、InternetExplorer以及Safari在JavaScript技术和CSS的支持上有些细微的差别,但是这种差别是可以处理的。如果你要考虑支持较老的浏览器,AJAX也许就不能成为你的解决方法。
基于AJAX的客户端之所以独特的原因是客户端包含了用JavaScript嵌入的特定于页面的控制逻辑。应用JavaScript技术的页面基于事件进行交互,如文档载入、鼠标点击、焦点改变甚至是定时器。AJAX交互使得表现层逻辑更加清晰地与数据分离。一个HTML页面也可以根据需要每次读入适当的数据,而不是每次需要显示一个更改时都重新载入整个页面。AJAX要求一种不同的服务器架构来支持它这种交互模型。以前,服务器端Web应用关注于对每个导致服务器调用的客户端事件都生成HTML文档。然后客户端对每个回应都要重新读入并重新渲染完整的HTML页面。富Web应用(RichWebApplication)关注于,让一个客户端获取一个HTML文档让它表现为一个模板或者是一个容器,可以基于事件并使用从服务器端组件中获取的XML数据来对文档注入内容。
一些AJAX交互的应用如:
实时表单数据检验:像用户ID、序列号、邮政编码或者是特殊的票据代码这类需要服务器端验证的数据也可以在用户提交表单之前进行验证。
自动补全:像电子邮件地址、姓名或城市名之类的表单数据都可以根据用户情况自动补全。
处理细节操作:根据一个客户端事件,一个HTML页面可以根据现存的一些数据再去获取更多详细的信息,如现在有一个产品列表,客户端可以控制查看单独的产品信息而无需刷新页面。
复杂的用户界面控件:像树型控件、菜单和进度条之类不要求页面刷新的控件也能实现。
页面内刷新数据:HTML页面可以从服务器上查询最新的数据如分数、股指、天气还有其它的特定于应用的数据。
服务器端通知:一个HTML页面可以通过对服务器进行定时查询来模拟一个服务器的事件通知推送,实现像通知客户端一个消息、刷新页面数据或将客户端重定向到另一个页面。
这个列表并未把所有的应用都列出来,但它已经显示了AJAX交互可以让Web应用比从前能做更多的事情。但尽管这些好处是值得关注的,这种方式也有一些缺点:
复杂度:服务器端开发人员必需理解,HTML客户端页面中的表现层逻辑以及生成HTML客户端页面所需的XML内容的服务器端逻辑。HTML页面开发人员必须了解JavaScript技术。如果开发新的框架和发展已有的框架来支持这种交互模型,那么AJAX应用的创建就会越来越简单。
XMLHttpRequest对象的标准化:
XMLHttpRequest对象还不是JavaScript技术标准的一部分,这就意味着根据客户端的不同,应用的行为也有所会不同。
JavaScript技术的实现:AJAX交互极大地依赖于JavaScript技术,而由于客户端的原因JavaScript还有一些细微的差别。见
调试:AJAX应用也难于调试,因为流程逻辑是同时嵌在客户端中和服务器上的。
代码可见:客户端的JavaScript可以很容易通过“查看源代码”被人看见。一个没有良好设计的AJAX应用很可能被黑客攻击或被他人剽窃。
当开发人员在使用AJAX交互模型上获得更多的经验后,AJAX技术的框架和模式就会慢慢浮现出来。现在就关注于完全通用的AJAX交互框架,还为时过早。本文和相关的解决方案将关注于在现有的Java2平台企业版(J2EE)上如何对AJAX进行支持,像servlet,JavaServerPage(JSP)软件、JavaServerFace应用和Java标准标签库(JSTL)。
AJAX交互剖析
现在我们已经讨论了AJAX是什么以及一些高层次的问题。那现在让我们把所有的零件放在一起来展示一个具有AJAX的J2EE应用。
首先考虑一个例子。一个Web应用包括了一个静态HTML页面,或者是一个由
ValidateServlet服务器端组件(
图1:一个提供验证逻辑的AJAX交互 |
XMLHttpRequest对象。
XMLHttpRequest对象进行一个调用。
ValidateServlet对请求进行处理。
ValidateServlet返回一个包含了结果的XML文档。
XMLHttpRequest对象调用
callback()函数并处理结果。
现在让我们逐个研究这个AJAX模型的每一步。
1.发生一个客户端事件。
在一个事件发生时可以调用相应的JavaScript函数。在这里,
validate()函数可以被映射到一个链接或者是表单组件的
onkeyup事件上去。
size="20" id="userid" name="id" script_onkeyup="validate();"> |
validate()函数。
2.建立和配置一个
XMLHttpRequest对象
创建和配置一个
XMLHttpRequest对象
varreq; |
validate()函数建立了一个
XMLHttpRequest对象并对象中的open函数。open函数需要两个参数:HTTP方法,可以是
GET或
POST;和对象进行交互的服务器端组件的URL;一个布尔变量,表示是否要进行异步调用。API是
XMLHttpRequest.open(Stringmethod,StringURL,booleanasynchronous)。如果一个交互被设置为异步,(
true)那就必须指明一个回调函数。可以使用
req.onreadystatechange=callback;来设置这个交互的回调函数。详细内容见第六节。
3.
XMLHttpRequest对象进行调用
当收到了语句
req.send(null);,就会进行一次调用。HTTP
GET的情况下,内容可以是
null或者留空。当调用
XMLHttpRequest的这个函数时,也会对已经配置了的URL进行调用。在下面这个例子中,要发送的数据(
id)将作为一个URL参数。
使用HTTP
GET,两个重复的请求将返回同样的结果。当使用HTTP
GET方法时,要注意URL的长度,包括已经转义的URL参数,可能会受到某些浏览器和服务器端的Web容器的限制。当发送的数据会影响到服务器端的应用程序的状态时,就应该使用HTTP
POST方法。使用HTTP
POST必须要对
XMLHttpRequest对象设置一个
Content-Type头,使用以下语句:
req.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); req.send("id="+escape(idTextField.value)); |
escape(),应该用他来确保区域化的内容被正确编码,同时特殊字符也被正确转义。
4.
ValidateServlet对请求进行处理.
一个映射到URI"validate"的servlet将检验userID是不是已经在数据库中存在了。
一个servlet处理一个
XMLHttpRequest,就像对待其它的HTTP请求一样。下面的例子显示了服务器从请求中抽取出
id参数并检验是否被占用了。
publicclassValidateServletextendsHttpServlet{ |
duke。
5.
ValidateServlet返回一个包含结果的XML文档
用户ID"duke"在
usersHashMap的用户ID列表中出现了。将在应答中写一个包含值为
invalid的
message元素的XML文档。更复杂的用例将要求DOM、XSLT或其他API来生成这个应答。
response.setContentType("text/xml"); response.setHeader("Cache-Control","no-cache"); response.getWriter().write("invalid"); |
Content-Type必须设为
text/xml。第二,
Cache-Control必须设为
no-cache。
XMLHttpRequesto对象只会处理
Content-Type为
text/xml的应答,同时把将
Cache-Control设为
no-cache将确保浏览器不会从缓存相同的URL(包括参数)返回的应答。
6.
XMLHttpRequest对象调用
callback()函数并处理结果。
The
XMLHttpRequest对象已经配置为当有
readyState改变的时候就调用
callback()函数。让我们假设已经
ValidateServlet调用了而且
ValidateServlet是
4,表示
XMLHttpRequest的调用已经完成。HTTP状态代码
200表示一个成功的HTTP交互。
functioncallback(){ |
根据成功的请求,JavaScript代码可以修改HTML页面的DOM。从
ValidateServlet获得的对象形式的XML文档可以通过
req.responseXML在JavaScript中获得,
req是一个
XMLHttpRequest对象。DOMAPI给JavaScript提供了获取这个文档中的内容以及修改HTML页面的DOM的方法。所返回的字符串形式的XML文档可以通过
req.responseText获得。现在我们看看如何在JavaScript中使用DOMAPI,先看以下从
ValidateServlet返回的XML文档。
valid |
message元素的XML片断,里面只有一个简单的字符串
valid或
invalid。一个更高级的例子可以包含多于一个的消息和可以给用户看的有效的名字:
functionparseMessage(){ |
parseMessages()函数将处理一个从
ValidateServlet获取的XML文档。这个函数会调用
setMessage()withthe,并给出
message作为参数来更新HTMLDOM。
7.更新了HTMLDOM
JavaScript技术可以使用很多API从HTMLDOM中获得任何元素对象的引用。推荐的获得元素引用的方法是调用
document.getElementById("userIdMessage"),
"userIdMessage"是HTML文档中出现的一个元素的ID属性。有了这个元素的引用,就可以使用JavaScript来修改元素的属性、修改元素的样式、添加、删除或修改子元素。
一个常见的改变元素主体内容的方法是设置元素的
innerHTML属性,如下所示:
<script> |
innerHTML的设置重新渲染。如果
innerHTML属性包含类似或者是
之类的元素,那么由那些元素所指定的内容同样会被获取并渲染。
这种途径的主要缺点是HTML元素是作为字符串硬编码在JavaScript中的。JavaScript中硬编码的HTML标记不是一种好的实践,因为它使代码难于阅读、维护和修改。我们应该考虑在JavaScript中使用DOMAPI来创建和修改HTML元素。把显示和JavaScript代码的字符串混在一起只会让页面更难于阅读和编辑。
另一种修改HTMLDOM的方法是动态地产生新的元素并把他们作为子元素追加到目标元素,如下面的例子所示:
<script> |
JavaBluePrint的解决方案目录
The
自动补全
自动补全提供了当用户在一个HTML表单中输入一个请求时对数据浏览的简化方式。当用户面对一大片数据时,可以在输入数据时把可能的完整形式显示给用户。然后选择其中一个完整形式可以保证用户输入的数据已经存在在服务器上。
考虑一个大公司的一个名字查找的Web应用。如图2所示,只要输入姓或名的开头几个字母就可以得到人的列表。用户可以然后就只要点击一下就可以浏览用户的详细信息。
图2:名字自动补全 |
在Web应用中,一个服务器端任务也可能要花一段时间去完成。这段时间很可能会超过HTTP交互的时间上限(超时)。当用户不知道这个任务什么时候才能完成时,用户很可能会重新提交一次表单或直接退出会话状态。一般来说,Web应用使用页面刷新来跟踪服务器端操作的状态,这种方式可能会让人厌烦而且也不准确。AJAX可以用来仅在一个HTML页面中跟踪服务器端操作的状态而无需刷新页面。用户可以以图形方式看到服务器端操作的进度,如图3。
图3:进度条 |
向一个HTML页面提供最新的数据或服务器消息提醒在现在的Web世界中也是十分重要的,因为现在的Web世界中数据一直不停变化。尽管它不是一个实实在在的推送技术,但它可以通过使用AJAX交互不断进行查询来模拟。当数据需要更新或者要进行提醒,HTML页面将会动态地改变。图4显示了HTML页面中的一个服务器端计数器。这个计数器会在页面后台自动更新。
图4:服务器端计数器在刷新数据 |
不是所有的表单域都可以单独用JavaScript技术在客户端完成。某些表单数据要求服务器端的验证逻辑。传统和Web应用曾使用页面刷新来完成这种验证,但这可能有些让人烦。
考虑一个需要一个唯一用户ID的Web应用。使用AJAX交互,用户可以在输入的时候就知道ID是否有效(图5)。
图5:指出用户ID无效 |
图6:用户ID通过验证 |
最后的思考
我们已经看到AJAX交互可以解决很多问题。配合HTTP处理、数据库、Web服务、XML处理和业务对象等API,J2EE技术已经提供了一个开发和部属基于AJAX应用的一个良好的基础。有了对于这个交互模型的更好的理解,今天的应用程序可以变得更加有交互性,给最终用户更好的体验。
使用AJAX要求你使用支持
XMLHttpRequest对象的最新浏览器版本。使用AJAX还要求大量对JavaScript技术和CSS的应用。作为一个应用程序架构师或是一个开发人员,你要会针对浏览器支持、架构复杂度和对开发人员的培训等方面来衡量开发一个富应用的需要。当AJAX编程模型不断地发展,现有的技术和框架会让这种转变更加容易。
很明显的是,突出的Web应用都越来越有交互性了。那么你的呢?
更多信息
TheAppleDeveloperconnection有一些关于
XMLHttpRequest对象的不错的文档。
W3C定义的
JesseJamesGarrett对
关于作者
GregMurray是SunMicrosystems的一名工程师,是servlet标准的领导人,BluePrint小组的前成员,在这个小组时他已经开始关注Web层次问题。他也是《EnterpriseApplicationsWiththeJava2Platform,EnterpriseEditionandDesigningWebServicesWiththeJ2EE1.4Platform(Addison-Wesley)》一书的协助编撰者
相关文章推荐
- AJAX工作原理及其优缺点 1.什么是AJAX? AJAX全称为“Asynchronous JavaScript and XML”(异步JavaScript和XML),是一种创建交互式网页应用的网页
- ajax(Asynchronous JavaScript and XML) 异步js或者xml
- 40多个Ajax,DHTML和Javascript应用技术
- ajax ---异步javascript&&xml
- 什么是AJAX? AJAX:”Asynchronous JavaScript and XML”中文意思:异步JavaScript和XML。
- 掌握 Ajax,第 2 部分: 使用 JavaScript 和 Ajax 发出异步请求 在 Web 请求中使用 XMLHttpRequest
- Ajax:一种网页开发技术(Asynchronous Javascript + XML)
- AJAX=异步JavaScript+XML
- jquery中的ajax(异步xml和javascript通信)
- [Ajax]异步的 JavaScript 和 XML:Ajax入门教程(整理)
- 【JavaScript】AJAX总结(异步JavaScript和XML)
- ajax-异步JavaScript和XML
- jquery中的ajax(异步xml和javascript通信)
- AJAX全称为“Asynchronous JavaScript and XML”(异步JavaScript和XML)
- Ajax(异步 JavaScript 和 XML)
- javascript 性能分析:Ajax 异步javascript和xml
- AJAX(异步JavaScript和XML)注册账户实时验证
- Ajax(Asynchronous JavaScript and XML)在JQuery中的应用
- Ajax学习(一),获得XMLHttpRequest对象,进行初步异步交互(jquery.javascript)
- 使用JavaScript和Ajax发出异步请求 XMLHttpRequest