透析AJAX驱动的网站开发技术内幕-UML软件工程组织-火龙果软件

UML软件工程组织

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

作者: 朱先忠　　出处:51CTO.com　

一、引言

最近，许多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

<html><head><script>
var objRequest;
function SendValue(val)
{
//初始化
try
{//MS IE浏览器
objRequest=new ActiveXObject("Msxml2.XMLHTTP");}
catch(e)
{try
{//所有的非IE浏览器
objRequest=new ActiveXObject("Microsoft.XMLHTTP");}
catch(oc)
{objRequest=null;}
}
if(!objRequest&&typeof XMLHttpRequest!="undefined")
{objRequest=new XMLHttpRequest();}
//处理请求的Web页面
var url="http://localhost/VBNETSample/HandleAjaxRequests.aspx?sStringIn=" + val;
if(objRequest!=null)
{ objRequest.onreadystatechange = Process;
objRequest.open("GET"， url， true);
objRequest.send(null);
}
}
function Process()
{
if (objRequest.readyState == 4)
//值"4"意味着，我们现在可以使用XMLHttpRequest返回的数据
{ if (objRequest.status == 200)
{ document.getElementById("txtEchoOutPut").innerText = objRequest.responseText;
//IE
//document.getElementById("txtEchoOutPut").innerHTML = objRequest.responseText;
//另外的浏览器
}
else
{ document.getElementById("txtEchoOutPut").innerHTML= "There was a problem retrievingdata:
<br>" + objRequest.statusText;}
}
}
</script>
</head>
<body>
<form name="frm1" ID="frm1">
Type in this text box:<input name="txtStart" onKeyUp="SendValue(this.value)"style="WIDTH:500px">
<br>Output will appear here:
<input name="txtEchoOutPut" id="txtEchoOutPut"style="WIDTH:500px" >
</form></body></html>

列表2 HandleAjaxRequests.aspx

Public Class HandleAjaxRequestsInherits
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 browsersStringOut = "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站点访问者类型。