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

透析AJAX驱动的网站开发技术内幕2006-05-08 09:55 作者:朱先忠 编译 出处:51CTO.com 【导读】本文在分析典型的AJAX驱动的网站的实现技术后，通过一个具体的例子分析了微软技术中的典型AJAX实现，并指出ASP.Net 2.0对于AJAX的支持原理一、引言 最近，许多Web站点引起大部分开发者的注意。这些站点所特有的地方在于，它们的行为更象一个桌面应用程序而不是一个Web应用程序。当你与之交互时，它们将快速地向你的浏览器显示大量信息而不需要重载页面。 例如，在Google Maps站点(/)，你可以点击地图，放大，缩小并且根据你的需要来回拖动地图。你的浏览器继续使用来自于服务器的数据，然而你的浏览器却不需要刷新。它们没有使用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站点(/webhp?complete=1hl=en)，当你在搜索域中输入内容时，每一个字符就会被异步地传送到服务器端。外观看上去，当你输入数据时，单词就会快速地出现在文本域中；其实，在后台，针对每一次键击，向服务器发送了若干次调用。用户基本上没有被此所干扰，因为他们的交互并没有中断，只有页面的一部分得到刷新。所有这些都可以被有效地实现，因为只有一小部分页面数据被传送到线路上，而不是整个的页面。 三、一个Ajax示例 下面，让我们分析一个简单的Ajax例子。这个例子仅包含两个页面：HTMLStartPage.htm（见列表1）和HandleAjaxRequests.aspx（见列表2）。 列表1:HTMLStartPage.htm htmlheadscriptvar 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(!objRequesttypeof XMLHttpRequest!=undefined){objRequest=new XMLHttpReques