Ajax详解.doc

AJAX全称为“Asynchronous JavaScript and XML”（异步JavaScript和XML），是一种创建交互式网页应用的网页开发技术。根据Ajax提出者Jesse James Garrett建议1，它： 使用XHTML+CSS来表示信息； 使用JavaScript操作DOM（Document Object Model）进行动态显示及交互； 使用XML和XSLT进行数据交换及相关操作； 使用XMLHttpRequest对象与Web服务器进行异步数据交换； 使用JavaScript将所有的东西绑定在一起。 使用SOAP以XML的格式来传送方法名和方法参数。类似于DHTML或LAMP，AJAX不是指一种单一的技术，而是有机地利用了一系列相关的技术。事实上，一些基于AJAX的“派生合成”式（derivative/composite）的技术正在出现，如“AFLAX”。AJAX的应用使用支持以上技术的Web浏览器作为运行平台。这些浏览器目前包括：Internet Explorer、Mozilla、Firefox、Opera、Konqueror及Mac OS的Safari。但是Opera不支持XSL格式对象，也不支持XSLT2。目录隐藏 1 与传统的Web应用比较 2 发展史 3 优点和批评 4 内核 5 浏览器兼容性问题 6 开发Ajax应用面临的挑战及解决方案 7 参考资料 8 参见 9 外部连接 9.1 工具 9.2 门户 9.3 图书 9.4 其他资源 编辑 与传统的Web应用比较传统的Web应用允许用户端填写表单（form），当送出表单时就向Web服务器发送一个请求。服务器接收并处理传来的表单，然后送回一个新的网页，但这个做法浪费了许多频宽，因为在前后两个页面中的大部分HTML码往往是相同的。由于每次应用的沟通都需要向服务器发送请求，应用的回应时间就依赖于服务器的回应时间。这导致了用户界面的回应比本机应用慢得多。与此不同，AJAX应用可以仅向服务器发送并取回必需的数据，它使用SOAP或其它一些基于XML的页面服务接口（界面），并在客户端采用JavaScript处理来自服务器的回应。因为在服务器和浏览器之间交换的数据大量减少（大约只有原来的5%），结果我们就能看到回应（服务器回应）更快的应用（结果）。同时很多的处理工作可以在发出请求的客户端机器上完成，所以Web服务器的处理时间也减少了。编辑 发展史该技术在1998年前后得到了应用。允许客户端脚本发送HTTP请求（XMLHTTP）的第一个组件由Outlook Web Access小组写成。该组件原属于微软Exchange Server，并且迅速地成为了Internet Explorer 4.03的一部分。部分观察家认为，Outlook Web Access是第一个应用了Ajax技术的成功的商业应用程序，并成为包括Oddpost的网络邮件产品在内的许多产品的领头羊。但是，2005年初，许多事件使得Ajax被大众所接受。Google在它著名的交互应用程序中使用了异步通讯，如Google讨论组、Google地图、Google搜索建议、Gmail等。Ajax这个词由Ajax: A New Approach to Web Applications一文所创，该文的迅速流传提高了人们使用该项技术的意识。另外，对Mozilla/Gecko的支持使得该技术走向成熟，变得更为易用。编辑 优点和批评使用Ajax的最大优点，就是能在不更新整个页面的前提下维护数据。这使得Web应用程序更为迅捷地回应用户动作，并避免了在网络上发送那些没有改变过的信息。Ajax不需要任何浏览器插件，但需要用户允许JavaScript在浏览器上执行。就像DHTML应用程序那样，Ajax应用程序必须在众多不同的浏览器和平台上经过严格的测试。随着Ajax的成熟，一些简化Ajax使用方法的程序库也相继问世。同样，也出现了另一种辅助程序设计的技术，为那些不支持JavaScript的用户提供替代功能。对应用Ajax最主要的批评就是，它可能破坏浏览器后退按钮的正常行为4。在动态更新页面的情况下，用户无法回到前一个页面状态，这是因为浏览器仅能记下历史记录中的静态页面。一个被完整读入的页面与一个已经被动态修改过的页面之间的差别非常微妙；用户通常都希望单击后退按钮，就能够取消他们的前一次操作，但是在Ajax应用程序中，却无法这样做。不过开发者已想出了种种办法来解决这个问题，当中大多数都是在用户单击后退按钮访问历史记录时，通过建立或使用一个隐藏的IFRAME来重现页面上的变更。（例如，当用户在Google Maps中单击后退时，它在一个隐藏的IFRAME中进行搜索，然后将搜索结果反映到Ajax元素上，以便将应用程序状态恢复到当时的状态。）一个相关的观点认为，使用动态页面更新使得用户难于将某个特定的状态保存到收藏夹中。该问题的解决方案也已出现，大部分都使用URL片断标识符（通常被称为锚点，即URL中#后面的部分）来保持跟踪，允许用户回到指定的某个应用程序状态。（许多浏览器允许JavaScript动态更新锚点，这使得Ajax应用程序能够在更新显示内容的同时更新锚点。）这些解决方案也同时解决了许多关于不支持后退按钮的争论。进行Ajax开发时，网络延迟即用户发出请求到服务器发出响应之间的间隔需要慎重考虑。不给予用户明确的回应 5，没有恰当的预读数据 6，或者对XMLHttpRequest的不恰当处理7，都会使用户感到延迟，这是用户不想看到的，也是他们无法理解的8。通常的解决方案是，使用一个可视化的组件来告诉用户系统正在进行后台操作并且正在读取数据和内容。 一些手持设备（如手机、PDA等）现在还不能很好的支持Ajax; 用JavaScript作的Ajax引擎，JavaScript的兼容性和DeBug都是让人头痛的事； Ajax的无刷新重载，由于页面的变化没有刷新重载那么明显，所以容易给用户带来困扰用户不太清楚现在的数据是新的还是已经更新过的；现有的解决有：在相关位置提示、数据更新的区域设计得比较明显、数据更新后给用户提示等； 对流式媒体的支持没有FLASH、Java Applet好；编辑 内核编辑 浏览器兼容性问题JavaScript编程的最大问题来自不同的浏览器对各种技术和标准的支持。XmlHttpRequest对象在不同浏览器中不同的创建方法，以下是跨浏览器的通用方法：/ Provide the XMLHttpRequest class for IE 5.x-6.x:/ Other browsers (including IE 7.x-8.x) ignore this/ when XMLHttpRequest is predefinedif (typeof(XMLHttpRequest) = undefined) XMLHttpRequest = function() try return new ActiveXObject(Msxml2.XMLHTTP.6.0); catch(e) try return new ActiveXObject(Msxml2.XMLHTTP.4.0); catch(e) try return new ActiveXObject(Msxml2.XMLHTTP.3.0); catch(e) try return new ActiveXObject(Msxml2.XMLHTTP); catch(e) try return new ActiveXObject(Microsoft.XMLHTTP); catch(e) throw new Error(This browser does not support XMLHttpRequest.); ; xmlhttp_request = new XMLHttpRequest();编辑 开发Ajax应用面临的挑战及解决方案对程序员而言，开发Ajax应用最头痛的问题莫过于以下几点：1 Ajax在本质上是一个浏览器端的技术，首先面临无可避免的第一个问题即是浏览器的兼容性问题。各家浏览器对于JavaScriptDOMCSS的支持总有部分不太相同或是有Bug，甚至同一浏览器的各个版本间对于JavaScriptDOMCSS的支持也有可能部分不一样。这导致程序员在写Ajax应用时花大部分的时间在调试浏览器的兼容性而非在应用程序本身。因此，目前大部分的Ajax链接库或开发框架大多以js链接库的形式存在，以定义更高阶的JavaScript API 、JavaScript对象（模板）、或者JavaScript Widgets来解决此问题。如prototype.js。2 Ajax技术之主要目的在于局部交换客户端及服务器之间的数据。如同传统之主从架构，无可避免的会有部分的业务逻辑会实现在客户端，或部分在客户端部分在服务器。由于业务逻辑可能分散在客户端及服务器，且以不同之程序语言实现，这导致Ajax应用程序极难维护。如有用户接口或业务逻辑之更动需求，再加上前一个JavaScript/DOM/CSS之兼容性问题，Ajax应用往往变成程序员的梦魇。针对业务逻辑分散的问题，Ajax开发框架大致可分为两类： 将业务逻辑及表现层放在浏览器，数据层放在服务器：因为所有的程序以JavaScript执行在客户端，只有需要数据时才向服务器要求服务，此法又称为胖客户端（fat client）架构。服务器在此架构下通常仅用于提供及储存数据。此法的好处在于程序员可以充分利用JavaScript搭配业务逻辑来做出特殊的用户接口，以符合终端用户的要求。但是问题也不少，主因在第一，JavaScript语言本身之能力可能不足以处理复杂的业务逻辑。第二，JavaScript的执行效能一向不好。第三，JavaScript访问服务器数据，仍需适当的服务器端程序之配合。第四，浏览器兼容性的问题又出现。有些Ajax开发框架如DWR企图以自动生成JavaScript之方式来避免兼容的问题，并开立通道使得JavaScript可以直接调用服务器端的Java程序来简化数据的访问。但是前述第一及第二两个问题仍然存在，程序员必须费相当的力气才能达到应用程序之规格要求，或可能根本无法达到要求。 将表现层、业务逻辑、及数据层放在服务器，浏览器仅有用户接口引擎（User Interface engine）；此法又称为瘦客户端（thin client）架构，或中心服务器（server-centric）架构。浏览器的用户接口引擎仅用于反映服务器的表现层以及传达用户的输入回到服务器的表现层。由浏览器所触发之事件亦送回服务器处理，根据业务逻辑来更新表现层，然后反映回浏览器。因为所有应用程序完全在服务器执行，数据及表现层皆可直接访问，程序员只需使用服务器端相对较成熟之程序语言（如Java语言）即可，不需再学习JavaScript/DOM/CSS，在开发应用程序时相对容易。缺点在于用户接口引擎以及表现层通常以标准组件的形式存在，如需要特殊组件（用户接口）时，往往须待原框架之开发者提供，缓不济急。如开源码Ajax开发框架ZK目前支持XUL及XHTML组件，尚无XAML之支持。3 Ajax是以异步的方式向服务器提交需求。对服务器而言，其与传统的提交窗体需求并无不同，而且由于是以异步之方式提交，如果同时有多个Ajax需求及窗体提交需求，将无法保证哪一个需求先获得服务器的响应。这会造成应用程序典型的多进程（process）或多线程（thread）的竞争（racing）问题。程序员因此必须自行处理或在JavaScript里面动手脚以避免这类竞争问题的发生（如Ajax需求未响应之前，先disable送出按钮），这又不必要的增加了程序员的负担。目前已知有自动处理此问题之开发框架似乎只有ZK。编辑 参考资料4 （英文）Ajax: 网页应用程序的新方法 Jesse James Garrett，最近访问日2007年11月7日5 （英文）Opera 9 支持的网页规格 XSLT, XPath, and XSL-FO 部分论及不支持 XSL-FO 与 XSLT，最近访问日2007年11月7日6 （英文）微软 XML Parser (MSXML) 版本列表，最近访问日2007年11月7日7 （英文）Web设计10大错误(1999年) Jakob Nielsen 著8 （英文）Remote Scripting with AJAX, Part 29 （英文）延迟必死：预读数据以降低延迟 JonathanB10 （英文）不可靠网络下的异步要求 Harry Fuecks 著，2005年2月11 （英文）小朋友们听着, AJAX 不怎么酷 Marcus Baker 著，2005年6月3日编辑 参见 jQuery 用于简化AJAX开发的Javascript函数库。 Prototype AJAX函数库。 Yahoo! UI Library is a set of utilities and controls, written in JavaScript, for building richly interactive web applications using techniques such as DOM scripting, DHTML and AJAX. Xajax 知名的开源码开发AJAX用PHP函数库。 ZK，开放源代码AJAX/XUL框架，JAVA专用。 ASP.NET AJAX，由微软专为 ASP.NET 应用程序所开发的 AJAX 基础架构。 web 2.0，一种新的互联网概念编辑 外部连接编辑 工具 ASP.NET AJAX Extension（开发阶段时代号 Atlas），微软AJAX工具箱。 jQuery，开源JS框架，写得更少，做得更多。 Dojo工具箱，AJAX/DHTML工具箱。 Prototype，开放源代码框架。 Buffalo Web Remoting (based on prototype) openrico JS UI component (based on prototype) PHPRPC，开放源代码多语言支持的跨平台的安全的 Web 远程过程调用框架，让 Ajax 编程更容易。 Sajax，简单AJAX工具箱 Rialto