ajax Js 客户端：
var data = "words="+encodeURI(encodeURI(_word));   //  注意，这里把需要提交的中文字符串进行两次encodeURI
xmlhttp.open("post",postAction, true);   
xmlhttp.setRequestHeader('Content-type','application/x-www-form-urlencoded');
xmlhttp.send(data);

ajax Java 服务器端：
String words= request.getParameter("words");
words= java.net.URLDecoder.decode(words, "UTF-8");

通过 URLDecoder.decode 解码后 即可得到正确的中文字符串！

2.尽量以HTTP POST方法传输资料
使用GET方法容易让有心人士得到资料，虽然POST并非万无一失，但比起GET至少较为安全。

3.不要直接用eval函式唤起JSON物件
JSON是采用JavaScript物件实字的资料格式，从后端传到Ajax程式时，必须采用eval函式将它从字串转成物件，这时必须先行检查资料中是否有非法字元，以免非法程式借机启用。

4.限制使用者可用的HTML语法
许多Ajax网站允许使用者在留言中使用HTML语法，而某些特定语法应该严格限制，例如＜plaintext＞或是＜!- -这类语法，都会让置于之后的程式码失效。

5.禁止可留言的网页页面使用JavaScript语法
虽然乍看之下觉得不可思议，不过的确在一些部落格平台上发生过，这让XSS攻击开了大门。

6.使用Ajax框架，必须注意安全性问题
由于骇客利用JavaScript进行攻击手法日新月异，当网页开发人员利用Ajax框架时，必须注意框架本身是否对某些特定手法具有防治行为。

7.让使用者知道自己身处的状况
当Ajax载入资料量大时，有时会让使用者产生错觉，不确定刚刚按下的按扭是否发生作用。因此开发人员必须设计适当的提示，让使用者了解目前程式的执行状况。

8.保持小量传输
Ajax的灵活性在于动态改变局部资料量，因此小量传输资料才能达到最高效益。如果一大张资料表都要透过DOM的操作来改变，不如就由后端程式与资料库来操作，效益更高。

9.注意易用性与内容的平衡
Ajax虽然为使用者带来浏览时的易用性，不过如果将所有内容都透过Ajax来产生，会造成搜寻引擎无法索引资料的情况。因此与内容相关的部分，需谨慎使用Ajax。

10.执行优雅降级原则
网站如果并非全面性采用Ajax技术，而只是为了局部增加互动性，这时必须考量不支援JavaScript的使用者，设法在不使用这些功能的前提下，让他们还能正常地浏览网站。

XMLHttpRequest对象

readyState的五种状态详解

本示例通过输入一个网址，然后使用ajax请求该网址，得到所请求的整个网页代码，最后把代码写到 textarea 当中 和 div 中进行预览：

　　本文介绍一种方法，Ajax，使用它可以构建更为动态和响应更灵敏的Web应用程序。该方法的关键在于对浏览器端的JavaScript、DHTML和与服务器异步通信的组合。本文也演示了启用这种方法是多么简单：利用一个Ajax框架（指DWR）构造一个应用程序，它直接从浏览器与后端服务进行通信。如果使用得当，这种强大的力量可以使应用程序更加自然和响应灵敏，从而提升用户的浏览体验。

　　该应用程序中所使用的示例代码已打包为单独的WAR文件，可供下载。

简介

　　术语Ajax用来描述一组技术，它使浏览器可以为用户提供更为自然的浏览体验。在Ajax之前，Web站点强制用户进入提交/等待/重新显示范例，用户的动作总是与服务器的“思考时间”同步。Ajax提供与服务器异步通信的能力，从而使用户从请求/响应的循环中解脱出来。借助于Ajax，可以在用户单击按钮时，使用JavaScript和DHTML立即更新UI，并向服务器发出异步请求，以执行更新或查询数据库。当请求返回时，就可以使用JavaScript和CSS来相应地更新UI，而不是刷新整个页面。最重要的是，用户甚至不知道浏览器正在与服务器通信：Web站点看起来是即时响应的。

　　虽然Ajax所需的基础架构已经出现了一段时间，但直到最近异步请求的真正威力才得到利用。能够拥有一个响应极其灵敏的Web站点确实激动人心，因为它最终允许开发人员和设计人员使用标准的HTML/CSS/JavaScript堆栈创建“桌面风格的（desktop-like）”可用性。

　　通常，在J2EE中，开发人员过于关注服务和持久性层的开发，以至于用户界面的可用性已经落后。在一个典型的J2EE开发周期中，常常会听到这样的话，“我们没有可投入UI的时间”或“不能用HTML实现”。但是，以下Web站点证明，这些理由再也站不住脚了：

• BackPack
    
• Google Suggest
    
• Google Maps
    
• PalmSphere
    

　　所有这些Web站点都告诉我们，Web应用程序不必完全依赖于从服务器重新载入页面来向用户呈现更改。一切似乎就在瞬间发生。简而言之，在涉及到用户界面的响应灵敏度时，基准设得更高了。

定义Ajax

　　Adaptive Path公司的Jesse James Garrett这样定义Ajax：

　　Ajax不是一种技术。实际上，它由几种蓬勃发展的技术以新的强大方式组合而成。Ajax包含：

• 基于XHTML和CSS标准的表示；
• 使用Document Object Model进行动态显示和交互；
• 使用XMLHttpRequest与服务器进行异步通信；
• 使用JavaScript绑定一切。

　　这非常好，但为什么要以Ajax命名呢？其实术语Ajax是由Jesse James Garrett创造的，他说它是“Asynchronous JavaScript + XML的简写”。

Ajax的工作原理

　　Ajax的核心是JavaScript对象XmlHttpRequest。该对象在Internet Explorer 5中首次引入，它是一种支持异步请求的技术。简而言之，XmlHttpRequest使您可以使用JavaScript向服务器提出请求并处理响应，而不阻塞用户。

　　在创建Web站点时，在客户端执行屏幕更新为用户提供了很大的灵活性。下面是使用Ajax可以完成的功能：

• 动态更新购物车的物品总数，无需用户单击Update并等待服务器重新发送整个页面。
• 提升站点的性能，这是通过减少从服务器下载的数据量而实现的。例如，在Amazon的购物车页面，当更新篮子中的一项物品的数量时，会重新载入整个页面，这必须下载32K的数据。如果使用Ajax计算新的总量，服务器只会返回新的总量值，因此所需的带宽仅为原来的百分之一。
• 消除了每次用户输入时的页面刷新。例如，在Ajax中，如果用户在分页列表上单击Next，则服务器数据只刷新列表而不是整个页面。
• 直接编辑表格数据，而不是要求用户导航到新的页面来编辑数据。对于Ajax，当用户单击Edit时，可以将静态表格刷新为内容可编辑的表格。用户单击Done之后，就可以发出一个Ajax请求来更新服务器，并刷新表格，使其包含静态、只读的数据。

　　一切皆有可能！但愿它能够激发您开始开发自己的基于Ajax的站点。然而，在开始之前，让我们介绍一个现有的Web站点，它遵循传统的提交/等待/重新显示的范例，我们还将讨论Ajax如何提升用户体验。

Ajax可用于那些场景？——一个例子：MSN Money页面

　　前几天，在浏览MSN Money页面的时候，有一篇关于房地产投资的文章引起了我的好奇心。我决定使用站点的“Rate this article”（评价本文）功能，鼓励其他的用户花一点时间来阅读这篇文章。在我单击vote按钮并等待了一会儿之后，整个页面被刷新，在原来投票问题所在的地方出现了一个漂亮的感谢画面。

　　而Ajax能够使用户的体验更加愉快，它可以提供响应更加灵敏的UI，并消除页面刷新所带来的闪烁。目前，由于要刷新整个页面，需要传送大量的数据，因为必须重新发送整个页面。如果使用Ajax，服务器可以返回一个包含了感谢信息的500字节的消息，而不是发送26,813字节的消息来刷新整个页面。即使使用的是高速Internet，传送26K和1/2K的差别也非常大。同样重要的是，只需要刷新与投票相关的一小节，而不是刷新整个屏幕。

　　让我们利用Ajax实现自己的基本投票系统。

原始的Ajax：直接使用XmlHttpRequest

　　如上所述，Ajax的核心是JavaScript对象XmlHttpRequest。下面的示例文章评价系统将带您熟悉Ajax的底层基本知识：http://tearesolutions.com/ajax-demo/raw-ajax.html。注：如果您已经在本地WebLogic容器中安装了ajax-demo.war，可以导航到http://localhost:7001/ajax-demo/raw-ajax.html，

　　浏览应用程序，参与投票，并亲眼看它如何运转。熟悉了该应用程序之后，继续阅读，进一步了解其工作原理细节。

　　首先，您拥有一些简单的定位点标记，它连接到一个JavaScriptcastVote(rank)函数。

function castVote(rank) {
  var url = "/ajax-demo/static-article-ranking.html";
  var callback = processAjaxResponse;
  executeXhr(callback, url);
}

　　该函数为您想要与之通信的服务器资源创建一个URL并调用内部函数executeXhr，提供一个回调JavaScript函数，一旦服务器响应可用，该函数就被执行。由于我希望它运行在一个简单的Apache环境中，“cast vote URL”只是一个简单的HTML页面。在实际情况中，被调用的URL将记录票数并动态地呈现包含投票总数的响应。

　　下一步是发出一个XmlHttpRequest请求：

function executeXhr(callback, url) {
  // branch for native XMLHttpRequest object
  if (window.XMLHttpRequest) {
    req = new XMLHttpRequest();
    req.onreadystatechange = callback;
    req.open("GET", url, true);
    req.send(null);
  } // branch for IE/Windows ActiveX version
  else if (window.ActiveXObject) {
    req = new ActiveXObject("Microsoft.XMLHTTP");
    if (req) {
      req.onreadystatechange = callback;
      req.open("GET", url, true);
      req.send();
    }
  }
}

　　如您所见，执行一个XmlHttpRequest并不简单，但非常直观。和平常一样，在JavaScript领域，大部分的工作量都花在确保浏览器兼容方面。在这种情况下，首先要确定XmlHttpRequest是否可用。如果不能用，很可能要使用Internet Explorer，这样就要使用所提供的ActiveX实现。

executeXhr()方法中最关键的部分是这两行：

req.onreadystatechange = callback;
req.open("GET", url, true);

　　第一行定义了JavaScript回调函数，您希望一旦响应就绪它就自动执行，而req.open()方法中所指定的“true”标志说明您想要异步执行该请求。

　　一旦服务器处理完XmlHttpRequest并返回给浏览器，使用req.onreadystatechange指派所设置的回调方法将被自动调用。

function processAjaxResponse() {
  // only if req shows "loaded"
  if (req.readyState == 4) {
    // only if "OK"
    if (req.status == 200) {
      $('votes').innerHTML = req.responseText;
    } else {
      alert("There was a problem retrieving the XML data:\n" +
      req.statusText);
    }
  }
} 

　　该代码相当简洁，并且使用了几个幻数，这使得难以一下子看出发生了什么。为了弄清楚这一点，下面的表格（引用自http://developer.apple.com/internet/webcontent/xmlhttpreq.html）列举了常用的XmlHttpRequest对象属性。

属性	描述
onreadystatechange	每次状态改变所触发事件的事件处理程序
readyState	对象状态值： 0 = 未初始化（uninitialized） 1 = 正在加载（loading） 2 = 加载完毕（loaded） 3 = 交互（interactive） 4 = 完成（complete）
responseText	从服务器进程返回的数据的字符串形式
responseXML	从服务器进程返回的DOM兼容的文档数据对象
status	从服务器返回的数字代码，比如404（未找到）或200（就绪）
statusText	伴随状态码的字符串信息

　　现在processVoteResponse()函数开始显示出其意义了。它首先检查XmlHttpRequest的整体状态以保证它已经完成（readyStatus == 4），然后根据服务器的设定询问请求状态。如果一切正常（status == 200）,就使用innerHTML属性重写DOM的“votes”节点的内容。

　　既然您亲眼看到了XmlHttpRequest对象是如何工作的，就让我们利用一个旨在简化JavaScript与Java应用程序之间的异步通信的框架来对具体的细节进行抽象。

Ajax: DWR方式

　　按照与文章评价系统相同的流程，我们将使用Direct Web Remoting（DWR）框架实现同样的功能。

　　假定文章和投票结果存储在一个数据库中，使用某种对象/关系映射技术来完成抽取工作。为了部署起来尽可能地简单，我们不会使用数据库进行持久性存储。此外，为使应用程序尽可能通用，也不使用Web框架。相反，应用程序将从一个静态HTML文件开始，可以认为它由服务器动态地呈现。除了这些简化措施，应用程序还应该使用Spring Framework关联一切，以便轻松看出如何在一个“真实的”应用程序中使用DWR。

　　现在应该下载示例应用程序并熟悉它。该应用程序被压缩为标准的WAR文件，因此您可以把它放置到任何一个Web容器中——无需进行配置。部署完毕之后，就可以导航到http://localhost:7001/ajax_demo/dwr-ajax.html来运行程序。

　　可以查看HTML 源代码，了解它如何工作。给人印象最深的是，代码如此简单——所有与服务器的交互都隐藏在JavaScript对象ajaxSampleSvc的后面。更加令人惊讶的是，ajaxSampleSvc服务不是由手工编写而是完全自动生成的！让我们继续，看看这是如何做到的。

引入DWR

　　如同在“原始的Ajax”一节所演示的那样，直接使用XmlHttpRequest创建异步请求非常麻烦。不仅JavaScript代码冗长，而且必须考虑服务器端为定位Ajax请求到适当的服务所需做的工作，并将结果封送到浏览器。

　　设计DWR的目的是要处理将Web页面安装到后端服务上所需的所有信息管道。它是一个Java框架，可以很轻松地将它插入到Web应用程序中，以便JavaScript代码可以调用服务器上的服务。它甚至直接与Spring Framework集成，从而允许用户直接向Web客户机公开bean。

　　DWR真正的巧妙之处是，在用户配置了要向客户机公开的服务之后，它使用反射来生成JavaScript对象，以便Web页面能够使用这些对象来访问该服务。然后Web页面只需接合到生成的JavaScript对象，就像它们是直接使用服务一样；DWR无缝地处理所有有关Ajax和请求定位的琐碎细节。

　　让我们仔细分析一下示例代码，弄清它是如何工作的。

应用程序细节：DWR分析

　　关于应用程序，首先要注意的是，它是一个标准的Java应用程序，使用分层架构（Layered Architecture）设计模式。使用DWR通过JavaScript公开一些服务并不影响您的设计。

　　下面是一个简单的Java服务，我们将使用DWR框架直接将其向JavaScript代码公开：

package com.tearesolutions.service;

public interface AjaxSampleSvc { 
  Article castVote(int rank);
}

　　这是一个被简化到几乎不可能的程度的例子，其中只有一篇文章可以投票。该服务由Spring管理，它使用的bean名是ajaxSampleSvc，它的持久性需求则依赖于ArticleDao。

　　Ajax的核心是JavaScript对象XmlHttpRequest。该对象在Internet Explorer 5中首次引入，它是一种支持异步请求的技术。简而言之，XmlHttpRequest使您可以使用JavaScript向服务器提出请求并处理响应，而不阻塞用户。

　　在创建Web站点时，在客户端执行屏幕更新为用户提供了很大的灵活性。下面是使用Ajax可以完成的功能：

    动态更新购物车的物品总数，无需用户单击Update并等待服务器重新发送整个页面。

    提升站点的性能，这是通过减少从服务器下载的数据量而实现的。例如，在某购物车页面，当更新篮子中的一项物品的数量时，会重新载入整个页面，这必须下载整个页面的数据。如果使用Ajax计算新的总量，服务器只会返回新的总量值，因此所需的带宽仅为原来的百分之一。 消除了每次用户输入时的页面刷新。例如，在Ajax中，如果用户在分页列表上单击Next，则服务器数据只刷新列表而不是整个页面。
直接编辑表格数据，而不是要求用户导航到新的页面来编辑数据。对于Ajax，当用户单击Edit时，可以将静态表格刷新为内容可编辑的表格。用户单击Done之后，就可以发出一个Ajax请求来更新服务器，并刷新表格，使其包含静态、只读的数据。

　　一切皆有可能！但愿它能够激发您开始开发自己的基于Ajax的站点。然而，在开始之前，让我们介绍一个现有的Web站点，它遵循传统的提交/等待/重新显示的范例，我们还将讨论Ajax如何提升用户体验。

　　　Ajax的工作原理相当于在用户和服务器之间加了—个中间层，使用户操作与服务器响应异步化。这样把以前的一些服务器负担的工作转嫁到客户端，利于客户端闲置的处理能力来处理，减轻服务器和带宽的负担，从而达到节约ISP的空间及带宽租用成本的目的。

主要包含了以下几种技术

Ajax（Asynchronous JavaScript + XML）的定义
基于web标准（standards-based presentation）XHTML+CSS的表示；
使用 DOM（Document Object Model）进行动态显示及交互；
使用 XML 和 XSLT 进行数据交换及相关操作；
使用 XMLHttpRequest 进行异步数据查询、检索；
使用 JavaScript 将所有的东西绑定在一起。英文参见Ajax的提出者Jesse James Garrett的原文。
类似于DHTML或LAMP，AJAX不是指一种单一的技术，而是有机地利用了一系列相关的技术。事实上，一些基于AJAX的“派生/合成”式（derivative/composite）的技术正在出现，如“AFLAX”。

AJAX的应用使用支持以上技术的web浏览器作为运行平台。这些浏览器目前包括：Mozilla、Firefox、Internet Explorer、Opera、Konqueror及Safari。但是Opera不支持XSL格式对象，也不支持XSLT。

与传统的web应用比较

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

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

Ajax应用程序的优势在于：
1. 通过异步模式，提升了用户体验
2. 优化了浏览器和服务器之间的传输，减少不必要的数据往返，减少了带宽占用
3. Ajax引擎在客户端运行，承担了一部分本来由服务器承担的工作，从而减少了大用户量下的服务器负载。

发展史

该技术在1998年前后得到了应用。允许客户端脚本发送HTTP请求(XMLHTTP)的第一个组件由Outlook Web Access小组写成。该组件原属于微软Exchange Server，并且迅速地成为了Internet Explorer 4.0[3]的一部分。部分观察家认为，Outlook Web Access是第一个应用了Ajax技术的成功的商业应用程序，并成为包括Oddpost的网络邮件产品在内的许多产品的领头羊。但是，2005年初，许多事件使得Ajax被大众所接受。Google在它著名的交互应用程序中使用了异步通讯，如Google讨论组、Google地图、Google搜索建议、Gmail等。Ajax这个词由《Ajax: A New Approach to Web Applications》一文所创，该文的迅速流传提高了人们使用该项技术的意识。另外，对Mozilla/Gecko的支持使得该技术走向成熟，变得更为易用。

这篇文章的重点并非要说明Ajax天生在哪些方面比传统Web应用优秀。关于这个问题，只要将Google地图与其他Web地图或者将Gmail与 Hotmail进行对比，自然就可以得出结论。当然，应用Ajax的确能显著改善性能和用户体验。但在此，我要向大家展示的是如何将Ajax应用的性能提 高到一个新的层次——从而使您的应用脱颖而出。

选择GWT的理由

Google Web Toolkit (GWT)将Ajax的开发推进了一大步，然而面对当下种类繁多的Ajax解决方案，此类新技术的推广难免遇到种种挑战。但无可否认，在Ajax开发方 面，GWT给开发者提供了其他解决方案无可比拟的便利。如果你还没有受到任何开发框架束缚的话，实在没有什么理由不选择GWT，因为GWT能够无偿的使应 用的整体性能得到大幅度提升。

我所说的“无偿”是指在开发中可以抛开性能问题不考虑，而将主要精力集中在业务逻辑方面，因为GWT本身已能使性能得到优化。GWT带有一个能将 Java代码编译成JavaScript的编译器。如果熟悉编译语言（C、Java等等）的话，你一定了解平台独立性是此类语言追求的一个目标，因此其编 译器能够针对特定平台对代码进行优化，这样程序员就可以将重点放在代码的结构组织和可读性上。GWT编译器也做了类似的事情，它将Java代码编译成一些 高度优化的JavaScript文件，每个文件对应于一种特定的浏览器，其中的优化步骤还应用了普通编译器中的优化方法，去掉了没有被调用的函数和内联代 码。此种方式得到的代码相对直接编写的JavaScript代码要小的多而且做到了浏览器独立，因此执行效率较高。实质上GWT已将JavaScript 看作web中的汇编代码来处理。在浏览器加载JavaScript代码的时候，仅仅加载针对该浏览器所需的代码而已。使用GWT的应用比任何直接用 JavaScript实现的应用要来得更精炼更快。对即将发布的GWT 1.5版本，GWT开发团队坚信其编译器生成的代码会比其他任何手工编写的代码都要快。以上这些应该足以说服大家选用GWT作为Ajax的解决方案，如果 还不够，还有许多其他充分的理由，比如你可以在开发GWT程序时应用某些Java开发工具（能用Eclipse来调试Ajax程序在我看来确实是一个非常 有分量的砝码）。

锦上添花

还远不止这些呢！Ajax已经比传统web应用要出色得多，而GWT又远超一般的Ajax技术。只简单地做些技术决定就能让你将大部分精力放在业务 功能上，达到事半功倍的效果，开发出完美的应用。当然，GWT并非凭空就能做到这些，下面我将讲述几种进一步提升GWT性能方法。

1、始终做好缓存

当你将GWT的Java代码编译成JavaScript后，对应于每个浏览器版本都会有生成一个相应的文件，该文件采用唯一标识的文件名。这些就是 你的应用程序的代码文件，直接把它们放到一个web服务器上就能发布你的应用了。由于文件名是通过对你的代码进行Hash函数计算而得，所以文件名本身就 已包含了版本信息。如果你修改了代码后重新编译，生成的文件会有新的文件名。这意味着要么文件已经被下载到了本地浏览器，要么从来没有被请求过，因此就没 有必要用检查文件修改日期（HTTP的If-Modified-Since头）的方法来决定是否需要版本更新。这样可以减少很多不必要的HTTP请求过 程，虽然这些请求过程单独可能很微不足道，但是当用户量达到一定程度，它们就会变成不得不考虑的因素。这类请求对客户端来说也是一种拖累，因为对同一个应 用，每个浏览器最多只能有两个活动的请求。很多对Ajax下载时间的优化都是从减少向服务器发送的请求量入手的。

为了避免浏览器对版本的请求，你可以通过配置web服务器来向客户端发送Expires HTTP头。这个Expires HTTP头包含页面过期的时间，这样就可以避免浏览器在页面过期时间之前发送版本检查的请求。在Apache中设置这些非常容易，只需要将以下内容加入 到.htaccess文件即可：

 	ExpiresDefault "now plus 1 year"

Apache会给所有符合*.cache.*模式的文件加上expires头，设置其失效日期为一年后，此模式将匹配所有GWT应用文件。如果你使 用的是Tomcat，也可直接通过servlet过滤器来添加头部。增加一个servlet过滤器非常简单，只需要在WEB_INF/web.xml文件 中添加此过滤器的声明，例如：

 	CacheFilter
 	com.rdews.cms.filters.CacheFilter


 	CacheFilter
 	/gwt/*

这样tomcat就知道在哪里找到此过滤器、知道哪些文件可以通过该过滤器。本例中，/gwt/*模式表示gwt文件夹下的所有文件。这个过滤器的 实现类将通过doFilter方法来添加Expires头。对GWT应用来说，我们需要在每个不符合*.nocache.*模式的文件里添加此 Expires头。nocache文件是不需要缓存的，因为其中含有版本选择的逻辑。以下是这个过滤器的实现代码：

public class CacheFilter implements Filter {
 	private FilterConfig filterConfig;

 	public void doFilter( ServletRequest request, ServletResponse response,
 			FilterChain filterChain) throws IOException, ServletException {

 		HttpServletRequest httpRequest = (HttpServletRequest)request;

 		String requestURI = httpRequest.getRequestURI();
 		if( !requestURI.contains(".nocache.") ){
 			long today = new Date().getTime();
 			HttpServletResponse httpResponse = (HttpServletResponse)response;
 			httpResponse.setDateHeader("Expires", today+31536000000L);
 		}
 		filterChain.doFilter(request, response);

 	}

 	public void init(FilterConfig filterConfig) throws ServletException {
 		this.filterConfig = filterConfig;
 	}

 	public void destroy() {
 		this.filterConfig = null;
 	}
}

2. 程序压缩

通过去掉未被调用的方法和艰涩的代码、使用简短的变量名和方法名等方式，GWT编译器在减少代码量方面表现得非常出色，但是最后得到的代码文本仍然 是未经压缩的。因此可以通过gzip压缩需要部署的应用程序的方法进一步减小代码文件的大小。gzip可以将应用程序压缩到原来的70％左右，从而提高应 用的下载速度。

幸运的是，文件压缩也可以简单地通过配置服务器来实现，唯一要做的只是在Apache服务器的.htaccess文件中加上以下语句：

 SetOutputFilter DEFLATE

Apache首先会自动与浏览器进行沟通，根据浏览器的支持情况从而决定是否发送压缩版本，不过目前所有主流浏览器都支持gzip压缩。

如果使用的是Tomcat，那么可以直接利用server.xml文件中Connector元素，只要加上以下的属性就可以进行程序文件的压缩了：

 compression="on"

3. 图片打包

Ajax应用借助于浏览器和HTTP协议强大的分布力量，然而浏览器和HTTP协议本身对分布Ajax应用没有特别的优化。Ajax应用是需要部署 的，在这一点上它跟桌面应用程序有些相象，而传统的web程序使用的是共享资源分布模型（shared resource distribution model），在程序运行过程中浏览器和服务器间会不断进行交互，从而对页面所需要的资源进行管理。这种方式使资源能够在页面间共享和缓存，从而保证打开 新页面所需的下载量达到最小化。在Ajax应用中，资源一般不会分布在页面间，因此不需要单独对其进行下载缓存。不过，对于Ajax应用，在下载应用程序 资源时采用传统的分布式模型也并非不可行，许多Ajax应用也正是这么做的。

然而，你可以选择将程序中用到的所有图片合并到一个文件中，以减少HTTP请求的次数。这样可以突破同一时间只能发送两个请求的限制，一次性地下载所有图片。

GWT从1.4版本开始支持ImageBundle接口。在这个接口中可以为每一个图片建立一个方法，编译器会将所有的图片组合到一个文件中，并将 图片数据的Hash做为新文件的文件名（象程序代码一样永久缓存这个文件）。一次性打包合并的图片数量是没有限制的，所有这些图片只需要一次请求就可以全 部下载。

在已经完成的几个GWT项目中我一直沿用将基本图片打包的做法，以下是示例代码：

public interface Images extends ImageBundle {

 	/**
 	 * @gwt.resource membersm.png
 	 */
 	AbstractImagePrototype member();
 	/**
 	 * @gwt.resource away.png
 	 */
 	AbstractImagePrototype away();

 	/**
 	 * @gwt.resource starsm.gif
 	 */
 	AbstractImagePrototype star();

 	/**
 	 * @gwt.resource turn.png
 	 */
 	AbstractImagePrototype turn();

 	/**
 	 * @gwt.resource user_add.png
 	 */
 	AbstractImagePrototype addFavorite();
}

Notice that each method has a comment annotation specifying the image file to use and a method that returns an AbstractImagePrototype. The AbstractImagePrototype has a createImage method that returns an Image widget that can be used in the application's interface. The following code illustrates how to use this image bundle:

Images images = (Images) GWT.create(Images.class);
mainPanel.add( images.turn().createImage() );

需要注意的是每个方法都有一个公共注解来指明图片的文件名，方法的返回类型都是AbstractImagePrototype。 AbstractImagePrototype类的createImage方法将返回一个可以在程序接口中使用的图片widget。以下的代码揭示了如何 使用该图片包：

Images images = (Images) GWT.create(Images.class); mainPanel.add( images.turn().createImage() );

这一切看上去很简单，不过正是这些看似简单的东西开启了GWT性能提升之门。

4. 使用StyleInjector

我们又该如何处理CSS文件以及CSS图片等应用程序资源呢？在传统的web分布模型中，这些都作为外部资源而被独立下载和缓存。在Ajax应用 中，这样做意味着额外的HTTP请求和缓慢的程序加载。目前，GWT对此尚未提供任何优化，但在GWT的官方孵化项目中有一些很有意思的GWT代码，这些 代码很可能会包含在GWT的未来版本中，其中尤其值得关注的是ImmutableResourceBundle和StyleInjector两个类。

ImmutableResourceBundle的功能和ImageBundle很相似，但是它可以用于包括CSS和CSS图片在内的任何类型的资源。这 个类的目的在于为程序资源提供一个抽象，使得处理它们的方式对浏览器来说达到最优化。下面这个类即是一个可用于加载CSS文件及其相关资源的例子：

public interface Resources extends ImmutableResourceBundle {

 	/**
 	 * @gwt.resource main.css
 	 */
 	public TextResource mainCss();

 	/**
 	 * @gwt.resource back.gif
 	 */
 	public DataResource background();

 	/**
 	 * @gwt.resource titlebar.gif
 	 */
 	public DataResource titleBar();
 	/**
 	 * @gwt.resource dialog-header.png
 	 */
 	public DataResource dialogHeader();

}

这个类会为每个资源指定一个文件和方法，这一点和ImageBundle 非常类似，但它的返回类型是DataResource 或TextResource。对于TextResource类，我们可以通过其getText 方法得到指定文件中的内容，而对于DataResource类，我们可以用getUrl方法来得到资源的引用（例如对图片或者IFRAME的引用）。不同 的浏览器对这些数据的加载方式各不相同，但我们无须担心这些。大多数情况下，数据会通过使用URL前缀以内联URL的方式出现。这个类的用途很广泛，但是 最直接的应用可能还是将CSS与其他程序文件一块打包使用。

可以注意到，在这个接口中引用了一个CSS文件及其一些图片。在这种情况下，该接口被拿来将CSS及其图片与程序文件进行打包，从而减少HTTP请 求的次数和缩短应用启动时间。在CSS文件中一般会指定一些背景图片，但会使用占位符（placeholder）来取代真实的图片URL。这些占位符被用 来引用打包的文件中其他一些元素，尤其是图片。例如，main.css文件有这样一个名为gwt-DialogBox的CSS规则:

.gwt-DialogBox{ background-image:url('%background%') repeat-x; }

如果要在程序中应用此CSS文件和图片，你需要用到孵化项目中的StyleInjector 类。StyleInjector会将CSS文件中的占位符匹配到打包文件中的特定资源，然后再将CSS文件注入到浏览器中供应用程序使用。这听起是挺复 杂，但实际使用还是比较方便的，重点是它能改善应用的性能。下面这段代码是使用StyleInjector将CSS从资源包注入到应用程序中的一个例子：

Resources resources = (Resources)GWT.create(Resources.class);
StyleInjector.injectStylesheet( resources.mainCss().getText(), resources );

需要注意的是以上这些目前还是孵化项目的一部分，在正式发布前随时都有可能做调整。

结论

总之，Ajax应用相对于传统web应用在使用性上有质的飞跃，同时GWT所提供的工具能使你的Ajax性能无偿地得到大幅度提升。关于这一点，你可以将GWT mail sample的启动速度跟其他Ajax应用范例做个比较。如果再在传统web应用和Ajax应用间在部署差异加以关注的话，我们还可以进一步提高应用的性能。对于下一代的Ajax应用，我充满了期待。

作者介绍

Ryan Dewsbury精通C++和Java语言，1998年从业以来分别从事过程序员、架构师和咨询顾问等多种角色的工作。起初几年Ryan在协助一个半导体 制造公司构建系统框架。最近他主要应用前沿软件为一些创业型互联网公司改善用户体验。另外，这些年Ryan还从事过一些独立软件项目的开发工作，包括 2004年的Easy Message，以及最近的两个基于GWT的web游戏网站Gpokr (gpokr.com)和KDice (kdice.com)。

注：文中的代码或者文字并不涉及安全或异常处理。

我不知道在servlet里面要将查出来的数据保存在什么变量里，查出来后，返回页面，要怎么样以多行多列的形式显示。

一、 引言

　　异步JavaScript与XML(AJAX)是一个专用术语，用于实现在客户端脚本与服务器之间的数据交互过程。这一技术的优点在于，它向开发者提供了一种从Web服务器检索数据而不必把用户当前正在观察的页面回馈给服务器。与现代浏览器的通过存取浏览器DOM结构的编程代码(JavaScript)动态地改变被显示内容的支持相配合，AJAX让开发者在浏览器端更新被显示的HTML内容而不必刷新页面。换句话说，AJAX可以使基于浏览器的应用程序更具交互性而且更类似传统型桌面应用程序。

Google的Gmail和Outlook Express就是两个使用AJAX技术的我们所熟悉的例子。而且，AJAX可以用于任何客户端脚本语言中，这包括JavaScript，Jscript和VBScript。

AJAX利用一个构建到所有现代浏览器内部的对象-XMLHttpRequest-来实现发送和接收HTTP请求与响应信息。一个经由XMLHttpRequest对象发送的HTTP请求并不要求页面中拥有或回寄一个＜form＞元素。AJAX中的"A"代表了"异步"，这意味着XMLHttpRequest对象的send()方法可以立即返回，从而让Web页面上的其它HTML/JavaScript继续其浏览器端处理而由服务器处理HTTP请求并发送响应。尽管缺省情况下请求是异步进行的，但是，你可以选择发送同步请求，这将会暂停其它Web页面的处理，直到该页面接收到服务器的响应为止。

微软在其Internet Explorer(IE) 5中作为一个ActiveX对象形式引入了XMLHttpRequest对象。其他的认识到这一对象重要性的浏览器制造商也都纷纷在他们的浏览器内实现了XMLHttpRequest对象，但是作为一个本地JavaScript对象而不是作为一个ActiveX对象实现。而如今，在认识到实现这一类型的价值及安全性特征之后，微软已经在其IE 7中把XMLHttpRequest实现为一个窗口对象属性。幸运的是，尽管其实现(因而也影响到调用方式)细节不同，但是，所有的浏览器实现都具有类似的功能，并且实质上是相同方法。目前，W3C组织正在努力进行XMLHttpRequest对象的标准化，并且已经发行了有关该W3C规范的一个草案。

本文将对XMLHttpRequest对象API进行详细讨论，并将解释其所有的属性和方法。

　　二、 XMLHttpRequest对象的属性和事件

XMLHttpRequest对象暴露各种属性、方法和事件以便于脚本处理和控制HTTP请求与响应。下面，我们将对此展开详细的讨论。
readyState属性

当XMLHttpRequest对象把一个HTTP请求发送到服务器时将经历若干种状态：一直等待直到请求被处理；然后，它才接收一个响应。这样以来，脚本才正确响应各种状态-XMLHttpRequest对象暴露一个描述对象的当前状态的readyState属性，如表格1所示。

表格1.XMLHttpRequest对象的ReadyState属性值列表。

ReadyState取值 描述
0  描述一种"未初始化"状态；此时，已经创建一个XMLHttpRequest对象，但是还没有初始化。
1  描述一种"发送"状态；此时，代码已经调用了XMLHttpRequest open()方法并且XMLHttpRequest已经准备好把一个请求发送到服务器。
2  描述一种"发送"状态；此时，已经通过send()方法把一个请求发送到服务器端，但是还没有收到一个响应。
3  描述一种"正在接收"状态；此时，已经接收到HTTP响应头部信息，但是消息体部分还没有完全接收结束。
4  描述一种"已加载"状态；此时，响应已经被完全接收。

onreadystatechange事件

无论readyState值何时发生改变，XMLHttpRequest对象都会激发一个readystatechange事件。其中，onreadystatechange属性接收一个EventListener值-向该方法指示无论readyState值何时发生改变，该对象都将激活。

responseText属性

这个responseText属性包含客户端接收到的HTTP响应的文本内容。当readyState值为0、1或2时，responseText包含一个空字符串。当readyState值为3(正在接收)时，响应中包含客户端还未完成的响应信息。当readyState为4(已加载)时，该responseText包含完整的响应信息。

responseXML属性

此responseXML属性用于当接收到完整的HTTP响应时(readyState为4)描述XML响应；此时，Content-Type头部指定MIME(媒体)类型为text/xml，application/xml或以+xml结尾。如果Content-Type头部并不包含这些媒体类型之一，那么responseXML的值为null。无论何时，只要readyState值不为4，那么该responseXML的值也为null。

其实，这个responseXML属性值是一个文档接口类型的对象，用来描述被分析的文档。如果文档不能被分析(例如，如果文档不是良构的或不支持文档相应的字符编码)，那么responseXML的值将为null。

status属性

这个status属性描述了HTTP状态代码，而且其类型为short。而且，仅当readyState值为3(正在接收中)或4(已加载)时，这个status属性才可用。当readyState的值小于3时试图存取status的值将引发一个异常。

statusText属性

这个statusText属性描述了HTTP状态代码文本；并且仅当readyState值为3或4才可用。当readyState为其它值时试图存取statusText属性将引发一个异常。

三、 XMLHttpRequest对象的方法

XMLHttpRequest对象提供了各种方法用于初始化和处理HTTP请求，下列将逐个展开详细讨论。

abort()方法

你可以使用这个abort()方法来暂停与一个XMLHttpRequest对象相联系的HTTP请求，从而把该对象复位到未初始化状态。

open()方法

你需要调用open(DOMString method，DOMString uri，boolean async，DOMString username，DOMString password)方法初始化一个XMLHttpRequest对象。其中，method参数是必须提供的-用于指定你想用来发送请求的HTTP方法(GET，POST，PUT，DELETE或HEAD)。为了把数据发送到服务器，应该使用POST方法；为了从服务器端检索数据，应该使用GET方法。另外，uri参数用于指定XMLHttpRequest对象把请求发送到的服务器相应的URI。借助于window.document.baseURI属性，该uri被解析为一个绝对的URI-换句话说，你可以使用相对的URI-它将使用与浏览器解析相对的URI一样的方式被解析。async参数指定是否请求是异步的-缺省值为true。为了发送一个同步请求，需要把这个参数设置为false。对于要求认证的服务器，你可以提供可选的用户名和口令参数。在调用open()方法后，XMLHttpRequest对象把它的readyState属性设置为1(打开)并且把responseText、responseXML、status和statusText属性复位到它们的初始值。另外，它还复位请求头部。注意，如果你调用open()方法并且此时readyState为4，则XMLHttpRequest对象将复位这些值。

send()方法

在通过调用open()方法准备好一个请求之后，你需要把该请求发送到服务器。仅当readyState值为1时，你才可以调用send()方法；否则的话，XMLHttpRequest对象将引发一个异常。该请求被使用提供给open()方法的参数发送到服务器。当async参数为true时，send()方法立即返回，从而允许其它客户端脚本处理继续。在调用send()方法后，XMLHttpRequest对象把readyState的值设置为2(发送)。当服务器响应时，在接收消息体之前，如果存在任何消息体的话，XMLHttpRequest对象将把readyState设置为3(正在接收中)。当请求完成加载时，它把readyState设置为4(已加载)。对于一个HEAD类型的请求，它将在把readyState值设置为3后再立即把它设置为4。

send()方法使用一个可选的参数-该参数可以包含可变类型的数据。典型地，你使用它并通过POST方法把数据发送到服务器。另外，你可以显式地使用null参数调用send()方法，这与不用参数调用它一样。对于大多数其它的数据类型，在调用send()方法之前，应该使用setRequestHeader()方法(见后面的解释)先设置Content-Type头部。如果在send(data)方法中的data参数的类型为DOMString，那么，数据将被编码为UTF-8。如果数据是Document类型，那么将使用由data.xmlEncoding指定的编码串行化该数据。

setRequestHeader()方法

该setRequestHeader(DOMString header，DOMString value)方法用来设置请求的头部信息。当readyState值为1时，你可以在调用open()方法后调用这个方法；否则，你将得到一个异常。

getResponseHeader()方法

getResponseHeader(DOMString header，value)方法用于检索响应的头部值。仅当readyState值是3或4(换句话说，在响应头部可用以后)时，才可以调用这个方法；否则，该方法返回一个空字符串。

getAllResponseHeaders()方法

该getAllResponseHeaders()方法以一个字符串形式返回所有的响应头部（每一个头部占单独的一行）。如果readyState的值不是3或4，则该方法返回null。

四、 发送请求

在AJAX中，许多使用XMLHttpRequest的请求都是从一个HTML事件（例如一个调用JavaScript函数的按钮点击(onclick)或一个按键(onkeypress)）中被初始化的。AJAX支持包括表单校验在内的各种应用程序。有时，在填充表单的其它内容之前要求校验一个唯一的表单域。例如要求使用一个唯一的UserID来注册表单。如果不是使用AJAX技术来校验这个UserID域，那么整个表单都必须被填充和提交。如果该UserID不是有效的，这个表单必须被重新提交。例如，一个相应于一个要求必须在服务器端进行校验的Catalog ID的表单域可能按下列形式指定：

前面的HTML使用validationMessage div来显示相应于这个输入域Catalog Id的一个校验消息。onkeyup事件调用一个JavaScript sendRequest()函数。这个sendRequest()函数创建一个XMLHttpRequest对象。创建一个XMLHttpRequest对象的过程因浏览器实现的不同而有所区别。如果浏览器支持XMLHttpRequest对象作为一个窗口属性(所有普通的浏览器都是这样的，除了IE 5和IE 6之外)，那么，代码可以调用XMLHttpRequest的构造器。如果浏览器把XMLHttpRequest对象实现为一个ActiveXObject对象(就象在IE 5和IE 6中一样)，那么，代码可以使用ActiveXObject的构造器。下面的函数将调用一个init()函数，它负责检查并决定要使用的适当的创建方法-在创建和返回对象之前。

接下来，你需要使用Open()方法初始化XMLHttpRequest对象-指定HTTP方法和要使用的服务器URL。

　　默认情况下，使用XMLHttpRequest发送的HTTP请求是异步进行的，但是你可以显式地把async参数设置为true，如上面所展示的。
在这种情况下，对URL validateForm的调用将激活服务器端的一个servlet，但是你应该能够注意到服务器端技术不是根本性的；实际上，该URL可能是一个ASP，ASP.NET或PHP页面或一个Web服务-这无关紧要，只要该页面能够返回一个响应-指示CatalogID值是否是有效的-即可。因为你在作一个异步调用，所以你需要注册一个XMLHttpRequest对象将调用的回调事件处理器-当它的readyState值改变时调用。记住，readyState值的改变将会激发一个readystatechange事件。你可以使用onreadystatechange属性来注册该回调事件处理器。

　　然后，我们需要使用send()方法发送该请求。因为这个请求使用的是HTTP GET方法，所以，你可以在不指定参数或使用null参数的情况下调用send()方法。

五、 处理请求

　　在这个示例中，因为HTTP方法是GET，所以在服务器端的接收servlet将调用一个doGet()方法，该方法将检索在URL中指定的catalogId参数值，并且从一个数据库中检查它的有效性。

本文示例中的这个servlet需要构造一个发送到客户端的响应；而且，这个示例返回的是XML类型，因此，它把响应的HTTP内容类型设置为text/xml并且把Cache-Control头部设置为no-cache。设置Cache-Control头部可以阻止浏览器简单地从缓存中重载页面。

来自于服务器端的响应是一个XML DOM对象，此对象将创建一个XML字符串-其中包含要在客户端进行处理的指令。另外，该XML字符串必须有一个根元素。

　　【注意】XMLHttpRequest对象的设计目的是为了处理由普通文本或XML组成的响应；但是，一个响应也可能是另外一种类型，如果用户代理(UA)支持这种内容类型的话。

当请求状态改变时，XMLHttpRequest对象调用使用onreadystatechange注册的事件处理器。因此，在处理该响应之前，你的事件处理器应该首先检查readyState的值和HTTP状态。当请求完成加载（readyState值为4）并且响应已经完成（HTTP状态为"OK"）时，你就可以调用一个JavaScript函数来处理该响应内容。下列脚本负责在响应完成时检查相应的值并调用一个processResponse()方法。

　该processResponse()方法使用XMLHttpRequest对象的responseXML和responseText属性来检索HTTP响应。如上面所解释的，仅当在响应的媒体类型是text/xml，application/xml或以+xml结尾时，这个responseXML才可用。这个responseText属性将以普通文本形式返回响应。对于一个XML响应，你将按如下方式检索内容：

　　借助于存储在msg变量中的XML，你可以使用DOM方法getElementsByTagName()来检索该元素的值：

　　最后，通过更新Web页面的validationMessage div中的HTML内容并借助于innerHTML属性，你可以测试该元素值以创建一个要显示的消息：

　　六、 小结

　　上面就是XMLHttpRequest对象使用的所有细节实现。通过不必把Web页面寄送到服务器而实现数据传送，XMLHttpRequest对象为客户端与服务器之间提供了一种动态的交互能力。你可以使用JavaScript启动一个请求并处理相应的返回值，然后使用浏览器的DOM方法更新页面中的数据。