“Ajax”的版本间的差异

2010年12月3日 (五) 14:43的版本

AJAX介绍

• 国内使用ajax 构建应用程序内通常的读音为“阿贾克斯”和阿贾克斯足球队读音一样。Web应用的交互如Flickr, Backpack和Google在这方面已经有质的飞跃。这个术语源自描述从基于网页的Web应用到基于数据的应用的转换。在基于数据的应用中，用户需求的数据如联系人列表，可以从独立于实际网页的服务端取得并且可以被动态地写入网页中，给缓慢的Web应用体验着色使之像桌面应用一样。 虽然大部分开发人员在过去使用过XMLHttp或者使用Iframe来加载数据，但仅到现在我们才看到传统的开发人员和公司开始采用这些技术。就像新的编程语言或模型伴随着更多的痛苦，开发人员需要学习新的技巧及如何最好利用这些新技术。

简要历史

• 该技术在1998年前后得到了应用。允许客户端脚本发送HTTP请求(XMLHTTP)的第一个组件由Outlook Web A 框架应用及对ajax框架的思考ccess小组写成。该组件原属于微软Exchange Server，并且迅速地成为了Internet Explorer 4.0的一部分。部分观察家认为，Outlook Web Access是第一个应用了Ajax技术的成功的商业应用程序，并成为包括Oddpost的网络邮件产品在内的许多产品的领头羊。但是，2005年初，许多事件使得Ajax被大众所接受。Google在它著名的交互应用程序中使用了异步通讯，如Google讨论组、Google地图、Google搜索建议、Gmail等。Ajax这个词由《Ajax: A New Approach to Web Applications》一文所创，该文的迅速流传提高了人们使用该项技术的意识。另外，对Mozilla/Gecko的支持使得该技术走向成熟，变得更为易用。 　　
• AJAX前景非常乐观，可以提高系统性能，优化用户界面。AJAX现有直接框架AjaxPro，可以引入AjaxPro.2.dll文件，可以直接在前台页面JS调用后台页面的方法。但此框架与FORM验证有冲突。另微软也引入了AJAX组件，需要添加AjaxControlToolkit.dll文件，可以在控件列表中出现相关控件。

AJAX模式

• 许多重要的技术和AJAX开发模式可以从现有的知识中获取。例如，在一个发送请求到服务端的应用中，必须包含请求顺序、优先级、超时响应、错误处理及回调，其中许多元素已经在Web服务中包含了，就像现在的SOA。AJAX开发人员拥有一个完整的系统架构知识。同时，随着技术的成熟还会有许多地方需要改进，特别是UI部分的易用性。 　　
• AJAX开发与传统的CS开发有很大的不同。这些不同引入了新的编程问题，最大的问题在于易用性。由于AJAX依赖浏览器的JavaScript和XML，浏览器的兼容性和支持的标准也变得和JavaScript的运行时性能一样重要了。这些问题中的大部分来源于浏览器、服务器和技术的组合，因此必须理解如何才能最好的使用这些技术。 　　
• 综合各种变化的技术和强耦合的客户服务端环境，AJAX提出了一种新的开发方式。AJAX开发人员必须理解传统的MVC架构，这限制了应用层次之间的边界。同时，开发人员还需要考虑CS环境的外部和使用AJAX技术来重定型MVC边界。最重要的是，AJAX开发人员必须禁止以页面集合的方式来考虑Web应用而需要将其认为是单个页面。一旦UI设计与服务架构之间的范围被严格区分开来后，开发人员就需要更新和变化的技术集合了。

更好的用户体验

• AJAX的最大机遇在于用户体验。在使应用更快响应和创新的过程中，定义Web应用的规则正在被重写;因此开发人员必须更注重用户。现在用户已经逐渐习惯如何使用Web应用了。例如用户通常希望每一次按钮点击会导致几秒的延迟和屏幕刷新，但AJAX正在打破这种长时间的状况。因此用户需要重新体验按钮点击的响应了。 　　
• 可用性是AJAX令人激动的地方而且已经产生了几种新颖的技术。其中最引人注目的是一种称为“黄色隐出”的技术，它在数据更新之前时将用户界面变为黄色，更新完成后立刻恢复原来的颜色。AJAX开发人员将用户从Web应用的负载中解放出来;小心地利用AJAX提供的丰富接口，不久桌面开发人员会发现AJAX是他们的方向。

编辑本段

几种工具和技术

• 随着AJAX迅速地引人注目起来，我想开发人员对这种技术的期待也迅速地增加。就像任何新技术，AJAX的兴旺也需要一整个开发工具/编程语言及相关技术系统来支撑。

主要包含的技术

• web标准（standards-based presentation）XHTML+CSS的表示； 　　
• 使用 DOM（Document Object Model）进行动态显示及交互； 　　
• 使用 XML 和 XSLT 进行数据交换及相关操作； 　　
• 使用 XMLHttpRequest 进行异步数据查询、检索； 　　
• 使用 JavaScript 将所有的东西绑定在一起。英文参见Ajax的提出者Jesse James Garrett的原文,原文题目(Ajax: A New Approach to Web Applications)。 *类似于DHTML或LAMP，AJAX不是指一种单一的技术，而是有机地利用了一系列相关的技术。事实上，一些基于AJAX的“派生/合成”式（derivative/composite）的技术正在出现，如“AFLAX”。 　　
• AJAX的应用使用支持以上技术的web浏览器作为运行平台。这些浏览器目前包括：Mozilla、Firefox、Internet Explorer、Opera、Konqueror及Safari。但是Opera不支持XSL格式对象，也不支持XSLT。

JavaScript

• 如名字所示，AJAX的概念中最重要而最易被忽视的是它也是一种JavaScript编程语言。JavaScript是一种粘合剂使AJAX应用的各部分集成在一起。在大部分时间，JavaScript通常被服务端开发人员认为是一种企业级应用不需要使用的东西应该尽力避免。这种观点来自以前编写JavaScript代码的经历：繁杂而又易出错的语言。类似的，它也被认为将应用逻辑任意地散布在服务端和客户端中，这使得问题很难被发现而且代码很难重用。在AJAX中JavaScript主要被用来传递用户界面上的数据到服务端并返回结果。XMLHttpRequest对象用来响应通过HTTP传递的数据，一旦数据返回到客户端就可以立刻使用DOM将数据放到网面上。

XMLHttpRequest

• XMLHttpRequest对象在大部分浏览器上已经实现而且拥有一个简单的接口允许数据从客户端传递到服务端，但并不会打断用户当前的操作。使用XMLHttpRequest传送的数据可以是任何格式，虽然从名字上建议是XML格式的数据。 　　
• 开发人员应该已经熟悉了许多其他XML相关的技术。XPath可以访问XML文档中的数据，但理解XML DOM是必须的。类似的，XSLT是最简单而快速的从XML数据生成HTML或XML的方式。许多开发人员已经熟悉Xpath和XSLT，因此AJAX选择XML作为数据交换格式是有意义的。XSLT可以被用在客户端和服务端，它能够减少大量的用JavaScript编写的应用逻辑。

CSS

• 为了正确的浏览AJAX应用，CSS是一种AJAX开发人员所需要的重要武器。CSS提供了从内容中分离应用样式和设计的机制。虽然CSS在AJAX应用中扮演至关重要的角色，但它也是构建跨浏览器应用的一大阻碍，因为不同的浏览器厂商支持各种不同的CSS级别。

服务器端

• 但不像在客户端，在服务端AJAX应用还是使用建立在如Java,.Net和PHP语言基础上机制;并没有改变这个领域中的主要方式。
• 既然如此，我们对Ruby o n Rails框架的兴趣也就迅速增加了。在一年多前，Ruby o n Rails已经吸引了大量开发人员基于其强大功能来构建Web和AJAX应用。虽然目前还有很多快速应用开发工具存在，Ruby o n Rails看起来已经储备了简化构建AJAX应用的能力。

AJAX与传统Web系统的比较

传统Web系统

• 传统的Web系统采用同步交互模型，即客户端向服务器发送请求，服务器接到请求后进行相关的处理，并把结果返回客户端。而在服务器处理的过程中，客户端只能等待，得到服务器响应数据后才进行处理，再重新发送新的请求并等待响应。用户等待期间屏幕变成一片空白，是因为客户端和服务器端是同步的，用户必须等待服务器处理并做出相应后，才能进行业务流的操作。最让客户担心的是，一旦网络延迟或堵塞，辛苦填写的表单可能会变成一页白纸返回，大大增加工作量，同时等待的过程枯燥无味，影响情绪。

AJAX技术

• 实际上AJAX技术是几项技术按照一定的方式组合在一起的，在共同协作中发挥个自己的作用，它包括：使用XMLHttpRequest进行异步数据读取；使用XML，文本或是XSLT进行数据转换和处理；使用XHTML和CSS标准化呈现；使用DOM时限动态显示和交互；最后使用JavaScript绑定和处理所有数据。
• AJAX引擎用JavaScript语言编写，添加在用户界面和浏览器之间，通常藏在一个隐藏的框架中。AJAX引擎允许用户与应用软件之间的交互过程异步进行，独立于用户与网络服务器间的交流，可以用Javascript调用AJAX引擎来代替产生一个HTTP的用户动作，结果就是用户再不用打开一个空白窗口，看到等待光标不断的转，等待服务器完成后再响应。

优点和批评

使用Ajax的最大优点，就是能在不更新整个页面的前提下维护数据。这使得Web应用程序更为迅捷地回应用户动作，并避免了在网络上发送那些没有改变过的信息。

Ajax不需要任何浏览器插件，但需要用户允许JavaScript在浏览器上执行。就像DHTML应用程序那样，Ajax应用程序必须在众多不同的浏览器和平台上经过严格的测试。随着Ajax的成熟，一些简化Ajax使用方法的程序库也相继问世。同样，也出现了另一种辅助程序设计的技术，为那些不支持JavaScript的用户提供替代功能。

对应用Ajax最主要的批评就是，它可能破坏浏览器后退按钮的正常行为。在动态更新页面的情况下，用户无法回到前一个页面状态，这是因为浏览器仅能记下历史记录中的静态页面。一个被完整读入的页面与一个已经被动态修改过的页面之间的差别非常微妙；用户通常都希望单击后退按钮，就能够取消他们的前一次操作，但是在Ajax应用程序中，却无法这样做。不过开发者已想出了种种办法来解决这个问题，当中大多数都是在用户单击后退按钮访问历史记录时，通过创建或使用一个隐藏的IFRAME来重现页面上的变更。（例如，当用户在Google Maps中单击后退时，它在一个隐藏的IFRAME中进行搜索，然后将搜索结果反映到Ajax元素上，以便将应用程序状态恢复到当时的状态。）

一个相关的观点认为，使用动态页面更新使得用户难于将某个特定的状态保存到收藏夹中。该问题的解决方案也已出现，大部分都使用URL片断标识符（通常被称为锚点，即URL中#后面的部分）来保持追踪，允许用户回到指定的某个应用程序状态。（许多浏览器允许JavaScript动态更新锚点，这使得Ajax应用程序能够在更新显示内容的同时更新锚点。）这些解决方案也同时解决了许多关于不支持后退按钮的争论。

进行Ajax开发时，网络延迟——即用户发出请求到服务器发出响应之间的间隔——需要慎重考虑。不给予用户明确的回应，没有恰当的预读数据，或者对XMLHttpRequest的不恰当处理[7]，都会使用户感到延迟，这是用户不想看到的，也是他们无法理解的。通常的解决方案是，使用一个可视化的组件来告诉用户系统正在进行后台操作并且正在读取数据和内容。

• 一些手持设备（如手机、PDA等）现在还不能很好的支持Ajax;
• 用JavaScript作的Ajax引擎，JavaScript的兼容性和DeBug都是让人头痛的事；
• Ajax的无刷新重载，由于页面的变化没有刷新重载那么明显，所以容易给用户带来困扰——用户不太清楚现在的数据是新的还是已经更新过的；现有的解决有：在相关位置提示、数据更新的区域设计得比较明显、数据更新后给用户提示等；
• 对串流媒体的支持没有FLASH、Java Applet好。

参考文献：

• 电脑知识与技术, Computer Knowledge and Technology, 编辑部邮箱 , 2010年29期
• 百度百科http://baike.baidu.com/view/1641.htm#2
• 维基百科http://zh.wikipedia.org/zh-cn/AJAX#.E4.BC.98.E7.82.B9.E5.92.8C.E6.89.B9.E8.AF.84