透析AJAX驱动的网站开发技术内幕

　　一、引言

　　最近，许多Web站点引起大部分开发者的注意  。这些站点所特有的地方在于，它们的行为更象一个桌面应用程序而不是一个Web应用程序  。当你与之交互时，它们将快速地向你的浏览器显示大量信息而不需要重载页面  。

　　例如，在Google Maps站点(http://maps.google.com/)，你可以点击地图，放大，缩小并且根据你的需要来回拖动地图  。你的浏览器继续使用来自于服务器的数据，然而你的浏览器却不需要刷新  。它们没有使用applet，也不是类似于Flash的技术；那么它们到底干了些什么呢？

　　首先，我们介绍一下异步JavaScript+XML，也称作Ajax  。为了准确地说明什么是Ajax，我们最好把它与不是Ajax的技术作一对比  。对于大多数Web站点来说，与一个Web服务器进行交互是一种单一的通讯—就象通过一个无线电话机与你的朋友谈话一样  。你在讲他在听，或者相反；但是却不能同时进行  。对于一个Web用户来说，当他/她填写一个在线表单然后点击提交按钮时，整个页面被寄送到Web服务器，然后该用户必须等待服务器接受请求  。当服务器完成请求处理后，它把处理后的内容发送回浏览器端  。只有在此时，用户的页面才最终得到刷新（参考下图1）  。Ajax是缓解这一系列的事件问题的一种有力的尝试  。当用户处于一个Ajax Web站点时，浏览器能够在后台异步地调用Web服务器而不必寄送整个页面  。

图1.典型的Web应用程序架构 点击看原图

　　二、细节技术分析

　　当前还没有出现专门针对于Ajax的SDK，因此这不是你能够下载的某种东西  。它实际上是一种若干技术（它们可能或者甚至不使用XML，尽管Ajax命名中明确地提及XML）的混合产物  。通过从底层深入分析来看，我们发现它们使用了一种混合技术—JavaScript，DOM，XMLHttp和XML是主要的实现技术  。然而，请记住对于这种技术既不存在一定的标准也不存在严格的定义  。你在某处发现的实现技术可能与另一处的实现技术有很大不同  。然而，对于Ajax实现来说共同的一点那就是，它们都使用了JavaScript  。

　　当用户与浏览器交互时，JavaScript代码将处理各种事件，例如键击或鼠标点击事件，并分别对它们进行相应的处理  。JavaScript使用XMLHttpRequest对象联系浏览器和远程服务器  。其实，微软首先在其Internet Explorer 5中实现了XMLHttpRequest对象（此后，其它一些浏览器相继添加了对这个对象的支持）  。

　　关于XMLHttpRequest对象的很酷的一点是，当它异步地在后台运行时它可以与Web服务器进行交互，而不必重载整个页面  。当Web服务器收到一个来自于浏览器的请求时，它就进行相应的处理，然后把处理后的XML数据返送回浏览器端  。JavaScript引擎将接收这个处理后的XML，并且使用DOM来操作相应的页面元素  。例如，在一个Ajax驱动的页面中，例如Google Suggest站点(www.google.com/webhp?complete=1&hl=en)，当你在搜索域中输入内容时，每一个字符就会被异步地传送到服务器端  。外观看上去，当你输入数据时，单词就会快速地出现在文本域中；其实，在后台，针对每一次键击，向服务器发送了若干次调用  。用户基本上没有被此所干扰，因为他们的交互并没有中断，只有页面的一部分得到刷新  。所有这些都可以被有效地实现，因为只有一小部分页面数据被传送到线路上，而不是整个的页面  。

　　三、一个Ajax示例

　　下面，让我们分析一个简单的Ajax例子  。这个例子仅包含两个页面：HTMLStartPage.htm（见列表1）和HandleAjaxRequests.aspx（见列表2）  。

　　列表1:HTMLStartPage.htm

　　



Type in this text box:style="WIDTH:500px">
Output will appear here:style="WIDTH:500px" >
 硅谷银行不再硅谷，OpenAI也不再Open 
 Windows 7系统瘦身实战 
 
 别小瞧了手机的NFC功能！这6个强大用法，你可能还不知道？ 
 微软曾试图收购EA和任天堂，结果成了游戏主机界三巨头之一 

　　列表2 HandleAjaxRequests.aspx

　　Public Class HandleAjaxRequests
Inherits System.Web.UI.Page
Private Sub Page_Load(ByVal sender As System.Object， ByVal e As System.EventArgs)
Handles MyBase.Load
Dim sStringOut As String Create a string variable to echo back to the browser
sStringOut = "You typed: " + Request.QueryString("sStringIn").ToString()
Response.Write(sStringOut) //“反射回”我们所收到的文本
End Sub
End Class

　　其中，HTMLStartPage.htm包含两个文本框  。它们用来展示用户输入的字符将怎样被逐个地发送到HandleAjaxRequests.aspx页面，被处理，然后被送回到HTMLStartPage.htm的第二个文本框中  。下图2展示了这个示例程序的可视化描述  。

图2.示例程序框架 点击看原图

　　其实，Ajax的最吸引人的地方还在于JavaScript  。通过代码分析，我们将看到文本框txtStart针对在该域中发生的任何onKeyUp事件调用SendValue(val)函数  。

　　当用户输入一个字符时，即调用函数SendValue(Val)并首先初始化HTTPRequest对象  。此时，我们要确定当前浏览器是IE，还是其它类似于Mozilla或Netscape的浏览器，以便我们可以创建正确的objRequest（HTTPRequest）对象  。然后，为了处理服务器端的事情，我们使用将执行我们的处理的aspx页面的位置来加载“url”变量  。

　　接下来，让我们分析一下上面代码中的三个objRequest行  。首先调用objRequest.onreadystatechange；onreadystatechange属性帮助我们建立一个回调函数  。只有当readyState属性变化时，才调用这个回调函数（也就是说，当我们从Web服务器取回数据时）  。

　　objRequest.open需要三个参数：一个GET或POST，一个相应于我们前面已定义的“url”的字符串和一个定义是否进行异步调用的布尔值  。请注意，如果这个布尔值被设置为true，那么必须提供一个回调函数  。

　　objRequest.send(null)一行实际上调用定义在“url”变量中的aspx页面  。然而，在我们转到该aspx页面之前，请注意回调函数（Process()）  。记住，这是Web页面代码处理完我们的请求之后将调用的函数；它是我们的“重入”点  。在这个示例中，我们仅简单地从我们的aspx页面中取回值并把它们放到第二个文本框（txtEchoOutPut）中  。
对于我们的aspx页面，我尽可能使得事情简单  。它以查询串值形式接收键击，我把一些文本添加到字符串（"You typed:"）来证实我们到达服务器，然后我们“反射回”相同的文本  。在触发这个aspx页面时，回调函数Process()在JavaScript内部被激发，如前面所描述的  。

　　从用户的角度来看，这种操作是相当快的  。当用户在第一个文本框中输入内容时，他们的字符会很快地出现在第二个文本框内  。输入的字符实际上“造访”了一次服务器然后又返回来  。

　　四、Ajax并不是“新事物”

　　应该注意，其实Ajax并不是一种新技术—这种方法已经出现多年了  。象Google这样的Web地点现在只是证明了Ajax的实用性，稳定性以及使得Web应用看上去极相似于桌面应用程序  。而对于Ajax来说，特别的一点就在于，它可以通过使用已经证明的现有技术来实现所有这些功能  。换句话说，任何标准的浏览器（能够处理JavaScript和DOM）都能够使用类似技术工作—你不必再安装例如插件等其它独立的内容了  。
总之，如我们所知，Ajax并非替换一切网站的事物，但是它的确占有一席一地，而且是一种我们应该掌握的Web开发技能  。

　　五、ASP.Net 2.0对于AJAX的支持

　　ASP.Net 2.0通过大幅度地改进脚本模型来加入对AJAX技术的支持  。在ASP.Net 2.0中，它们称之为脚本回调而不是Ajax  。其工作原理实际上与我前面所描述的一致，但是ASP.Net 2.0通过提供了一组工具及相应的支持又把它推进了一步  。要全面地了解ASP.Net 2.0中的回调机制，请参考文章http://msdn.microsoft.com/msdnmag/issues/04/08/CuttingEdge/  。

　　六、总结

　　Ajax使得企业开发中的N-层结构中的各个层之间的界限变得模糊，因为大量的工作被迁移到了客户端  。当使用一种正在发展中的技术来设计这样的应用程序时，我们应该慎重加以选择  。客户端（浏览器）实现更多的处理工作，但是这样以来完成此任务的JavaScript也相应地变得越来越复杂  。它需要处理键击，鼠标点击，与DOM进行交互，处理这些事件以及与服务器的数据协作等  。

　　还应该注意，许多用户可能不想在其浏览器端运行JavaScript，因此在实际开发中有必要考虑你的Web站点访问者类型  。