【IT168 专稿】AJAX 火了！Google和微软的极力关注，AJAX 更是聚合了新的能量，带来了 WEB 时代的暴风雨，成为越来越多的开发团队追逐的目标。

    AJAX出现之前，WEB 用户体验和用户从桌面软件中得到的体验之间存在一个巨大的鸿沟，而 AJAX 允许用户任意修改网页上的要素而无需刷新整个页面，就能马上看到修改的结果，这种全新的用户体验无疑正在使这个鸿沟逐步缩小甚至消失。

    作为技术人员，我们都想走在技术的最前沿，因为这样永远不会被淘汰。当一项新技术突起时，我们希望能有机会在实际项目中应用它，和IT朋友同行们侃侃而谈该技术具有如何的优势。然而，大部分技术人员并没有这个追逐新技术的机会，更多的人在本职岗位上做着自己熟悉的技术工作，可能心里羡慕着那些研究新技术、为公司做技术储备的同行们，同时慨叹着技术更新换代的速度之快。

    然而，AJAX 给了所有踏踏实实做着成熟技术的我们一次追逐时尚的机会，因为它并不是一项新技术，而是老技术批上了新的外衣，然而就如同陈年老酒换了新瓶子一样，依然醇香而又爽心悦目，让我们也着实跟着“时髦”了一把，虽然依旧熟悉的技术，却让我们也在时下流行的技术趋势之中体验了一番。

    AJAX 概述
    2005年2月18日，Adaptive Path 公司负责用户体验策略的主管杰西詹姆斯?加勒特(Jesse James Garrett)发表了一篇题为《AJAX：一个 WEB 应用的新途径》的论文，明确地将 AJAX定义为 Asynchronous JavaScript + XML，即异步的 JavaScript 和 XML 处理。虽然名字是全新的，但是，其包含的技术早已是非常成熟的了，相信每一位做 WEB 开发的技术人员都用过 JavaScript，而 XML 更是如 HTML 一样被WEB开发者所熟知。

    实际上，AJAX 只是在以一种崭新的方式在使用所有的这些技术，使得古老的 B/S 方式的 WEB 开发焕发了新的活力。两年间，AJAX 已经在 WEB 开发中被越来越广泛地使用，它可以应用在 J2EE，.NET, PHP 等各个不同技术领域的 WEB 开发中，带给了用户全新的体验，更是成为客户端技术中颇具优势和吸引眼球的亮点。

 

    AJAX 原理
    下面，我们来了解一下 AJAX 的工作原理，看看 AJAX 是如何实现崭新的用户体验，达到客户端与服务器端的透明交互的。

图1 AJAX 的工作原理图

    如图1所示，用户在与浏览器的交互过程中，可能触发一个被 JavaScript 捕获到的事件，比如说表单中某个输入框的 onblur 事件，然后由 JavaScript 创建一个 XMLHttpRequest 对象，并通过该对象异步地把请求发送到服务器端，这时，用户可以继续进行其它的操作，比如继续浏览当前页面，或者填写其他表单等等，而不必去等待服务器的响应。服务器端在接到请求后，通过服务器端程序处理并把结果返回，返回的结果被 XMLHttpRequest 捕获到并返回给 JavaScript，再由 JavaScript 调用相应的 DOM 进行显示层的控制。

    AJAX 实战
    下面，我们通过具体的应用来体验一下如何集成 AJAX 和 Servlet，来增强 WEB 应用的敏捷性和与用户动态交互的能力，综合利用这两种分别处于客户端和服务器端的技术，可谓是当前WEB应用中一个理想的解决方案，该方案的框架图如下所示：

    下面，我们通过具体的应用来体验一下如何集成 AJAX 和 Servlet，来增强 WEB 应用的敏捷性和与用户动态交互的能力，综合利用这两种分别处于客户端和服务器端的技术，可谓是当前WEB应用中一个理想的解决方案，该方案的框架图如下所示：

图2 AJAX与Servlet的集成

    AJAX 的核心就是 XMLHttpRequest 对象，与传统的请求/响应模式不同，AJAX 是通过 AJAX 引擎与 Servlet 容器进行异步交互，而这一交互机制的具体细节可以通过下面的序列图来描述。

图3 AJAX与Servlet之间的异步交互

   首先是通过 JavaScript 事件处理函数创建 XMLHttpRequest 对象，该对象的创建根据不同浏览器有不同的方式，当然，我们需要一个健壮的程序来使之支持所有的浏览器，可以参考下面的代码：

var xmlHttp = false;
try ...{
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) ...{
try ...{
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e2) ...{
xmlHttp = false;
}
}
if (!xmlHttp && typeof XMLHttpRequest != 'undefined') ...{
xmlHttp = new XMLHttpRequest();
}

    这样我们就可以支持多浏览器的XMLHttpRequest对象，它可以将用户在与浏览器交互过程中触发的AJAX请求发送到服务器端的Servlet组件，但是，一定要先进行相应的属性设置和方法调用，使其处于正确的就绪状态下。以下是一个发送AJAX 请求的JavaScript函数：

function SearchUser()
...{
//获取 XMLHttpRequest对象xmlHttp，参见上述代码 
xmlHttp.onreadystatechange = updateUser; //注册回调函数 
xmlHttp.open("POST","servletUser.do", true); //异步请求servlet 
xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); //设置数据格式 
var userID = document.getElementById("userID").value; //获取参数 
xmlHttp.send("userID=" + userID); // 发送请求 
}

    上面的函数 SearchUser() 是一个在表单控件中非常典型的 AJAX 请求发送函数，它实现了图3 中由1到7的一系列步骤。XMLHttpRequest 对象的 open() 方法实现了对服务器端的异步请求，而通过属性 onreadystatechange 注册的回调函数则根据请求处理的返回结果对页面进行相应更新，正是这种异步的请求/响应模式避免了用户等待服务器端处理请求的过程，提高了 WEB 应用的敏捷性和用户体验。

    接下来的步骤相信对于 JAVA 程序员都不陌生，与普通的 Servlet 编程没有太多区别，唯一要注意的就是，我们要将处理完的响应序列化为XML，以使 XMLHttpRequest 能够把响应解析为XML DOM，来动态地、有选择地更新页面的特定部分。JAVA对象序列化的方式有多种，我们可以通过自己的程序实现，也可以借助 XML API 来实现，读者可以选择适合特定应用的方式来进行，这里不再赘述。

   当Servlet 的 XML 响应到达之后，XMLHttpRequest 对象自动调用所注册的回调函数来处理响应。以下是前述回调函数 updateUser() 的核心代码：

function updateUser()
...{
//判断请求是否处理成功 
if(xmlHttp．readyState==4)...{
if(xmlHttp．status：=200)...{
//使用 DOM 来对页面进行相应的更新 
}
}
}

    AJAX 明天
    经过两年的发展，AJAX已经开始走向成熟，尤其是有了开发工具的支持，我们可以象使用 .NET 和 DELPHI 开发桌面应用一样实现快速开发 AJAX WEB应用。在其他技术领域的 WEB 开发中（ASP.NET,PHP 等），我们同样可以采用相应的设计策略将 AJAX 与服务器端技术结合起来，既充分发挥了服务器端的处理优势，也提高了客户端的灵敏程度，提高了用户体验。AJAX 将成熟的技术进行了天衣无缝的融合，带来了非常好的用户体验，已经成为 WEB 开发的一个发展方向，我们期待着有一天，WEB 用户能得到和使用桌面软件一样的用户体验，相信随着各种 AJAX 框架的不断完善成熟，这一天会很快到来。

    当然，AJAX也有自身的缺陷，比如：技术上涉及的内容比较多，需要开发者非常熟练地使用JavaScript，而就目前的浏览器级脚本预编译技术，脚本的运行效率也是个不容忽视的问题；而当需要处理庞大数据时，XML的效率也可能成为瓶颈。如果，你在实际项目中做过AJAX的应用，一定会知道这其中要考虑的问题，跨浏览器，安全，性能，程序鲁棒性，每一个都不是简单就能解决的。但是，一项技术的出现和火热，必然有它值得用的地方，正如哲学上所言：存在即有道理。我们在辨证看待技术的同时，也将为此付之不懈的努力，希望AJAX的明天将是“WEB 领域一奇葩”。