• Ajax 即“Asynchronous Javascript And XML”(异步 JavaScript 和 XML),是指一种创建交互式网页应用的网页开发技术。
  • Ajax = 异步 JavaScript 和 XML 或者是 HTML(标准通用标记语言的子集)。
  • Ajax 是一种用于创建快速动态网页的技术。Ajax 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。

Ajax概述

Ajax不是一项新技术,它是多种流行技术的集合,具体内容如下:

技术名称 内容
网页显示技术: 使用HTML和CSS实现网页框架和布局。
网页交互技术: 利用DOM(Document Object Model,文档对象模型)标准实现对网页元素的引用和操作。
数据交换和处理技术: 利用XML和XSLT数据格式实现数据的交换
异步通讯技术: 使用XMLHttpRequest组件实现浏览器与服务器之间的请求与响应
逻辑控制技术: 使用JavaScript脚本整合以上所有的技术

Ajax提供了与服务器异步通信的能力,从而使用户从请求/响应的循环中解脱出来。借助于Ajax技术,可以在用户单击按钮时,使用JavaScript和DHTML(对大多数人来说,DHTML 意味着 HTML、CSS和 JavaScript 的组合。)立即更新页面部分或者全部显示信息,并向服务器发出异步请求,以执行更新或者查询数据库。当请求返回时,就可以使用JavaScript和CSS来进行相应的更新,而不是刷新整个页面。更重要的是,用户甚至不知道浏览器正在与服务器进行通信,Web站点看起来是即是响应的。

事实上在Ajax被命名之前,已经有人综合使用这些技术,不过实现起来非常复杂。另外,一些工具也提供了相似功能,如Macromedia Flash插件,Java Applets和.NET等,在应用上已经有了一段时间。

把一种可与服务器通话的脚本组件引入到浏览器的思想早在IE5.0中就已经存在。Firefox和其他流行的浏览器一样也加入到浏览器大军中,并以一种内置对象形式支持XMLHTTPRequest。随着跨平台浏览器的出现,这些技术得到了认可,2004年3月一家称为Adaptive Path的公司正式提出了Ajax。

通过Ajax,可以使得客户端得到丰富的应用体验以及交互操作,而用户不会感觉到有网页提交或刷新的过程,页面也不需要被重新加载,原理是利用Ajax技术把浏览器与服务器之间的数据交换都隐藏起来。在创建Web站点时,在客户端执行屏幕更新为用户提供了很大的灵活性。下面是使用Ajax可以完成的功能:

  • 在购物网站中,无需用户单击更新按钮,并等待服务器重新发送整个页面,浏览器会动态的更新浏览器的物品数量,这样用户能够及时、准确地查看自己选购的物品。
  • 提升站点的性能,这是通过减少从服务器下载的数据量实现的。例如,在Amazon的购物车页面,当更新篮子中的一项物品时,会重新载入整个页面,这必须下载几十K的数据。如果使用Ajax计算新的总量,服务器只会返回新的总量值,因此所需的带宽仅为原来的百分之一。
  • 消除了每次用户输入时的页面刷新。例如,在Ajax中,如果用户在分页列表上单击下一页的超链接,则服务器数据只刷新列表而不是整个页面。
  • 直接编辑表格数据,而不是要求用户导航到新的页面来编辑数据。应用Ajax技术,当用户单击[编辑]按钮时,可以将静态表格刷新为内容可编辑的表格。用户单击[执行]按钮之后,就可以发出一个Ajax请求来更新服务器,并刷新表格,使其包含静态、只读的数据。

Ajax最典型的应用是Google的Maps,是它把Ajax技术完美地展现在世人面前,并迅速轰动全球。Google的Maps能够实现监视用户的操作,并提供实时页面的更新,用户可以用鼠标任意拖动地图。

Ajax原理分解

Ajax的核心是JavaScript对象XmlHttpRequest。该对象在Internet Explorer5中首次引入,它是一种支持异步请求技术。简而言之,XmlHttpRequest能够使用户使用javascript向服务器提出请求并处理响应,而不阻碍用户的其他操作。

传统的Web应用允许用户填写表单(form),当提交表单时就向Web服务器发送一个请求,服务器接收并处理传来的表单,然后返回一个新的网页。这个做法会浪费很多带宽,因为在前后两个页面中的大部分HTML代码往往是相同的。由于每次应用的交互都需要向服务器发送请求,应用的响应时间取决于服务器的响应时间,这就导致了用户界面的响应比本地应用慢很多。传统Web应用交互模式如图:
javascript笔记:Ajax概述
一个任务所需步骤越多,用户需要等待的次数也越多,所以这种方式并没有给予用户很好的应用体验。当服务器在处理数据时,用户处于等待状态,每一步操作都需要等待,太多的等待会使得用户越来越没有耐心。

Ajax则大不同,它通过Ajax引擎,仅向服务器发送并取回必须的数据,并在客户端采用JavaScript处理来自服务器的响应,因此,在服务器和浏览器之间的交换数据大量减少,结果就能看到响应更快的网页。同时,很多的处理工作可以在发出请求的客户端机器上完成,所以Web服务器处理的时间也减少了。

Ajax利用一种中间的媒介(Ajax引擎)消除了用户和服务器交互间的等待,这就像在传统的Web模型中间加入了一层处理模块,可以降低响应时间。替代页面下载的是在Session刚开始时,浏览器下载一个用JavaScript编写的Ajax引擎,通常放在一个隐藏的框架里,这个引擎替代用户和服务器进行通信。Ajax允许用户交互和服务器响应是异步的。如图所示:
javascript笔记:Ajax概述

相关文章: