Ajax的学习笔记第一课

类别 网址 
Blog 


http://www.blogjava.net/eamoi/ 


MSN-Space 


http://spaces.msn.com/members/eamoi/


OpenDoc版权说明： 
本文档版权归原作者所有。 
在免费、且无任何附加条件的前提下，可在网络媒体中自由传播。 
如需部分或者全文引用，请事先征求作者意见。 
如果本文对您有些许帮助，表达谢意的最好方式，是将您发现的问题和文档改进意见及时反
馈给作者。当然，倘若有时间和能力，能为技术群体无偿贡献自己的所学为最好的回馈。 

网络转载请务必保留原作者的署名和 Blog地址。

在使用浏览器浏览网页的时候，当页面刷新很慢的时候，你的浏览器在干什么？你的屏
幕内容是什么？是的，你的浏览器在等待刷新，而你的屏幕内容是一片空白，而你在屏幕前
苦苦的等待浏览器的响应。开发人员为了克服这种尴尬的局面，不得不在每一个可能需要长
时间等待响应的页面上增加一个 DIV，告诉用户“系统正在处理您的请求，请稍候……”。


现在，有一种越来越流行越热的“老”技术，可以彻底改变这种窘迫的局面。那就是 
AJAX。如今，随着 Gmail、Google-maps的应用和各种浏览器的支持， AJAX正逐渐吸引全
世界的眼球。


一、AJAX定义 


AJAX（Asynchronous JavaScript and XML）其实是多种技术的综合，包括 Javascript、 
XHTML和 CSS、DOM、XML和 XSTL、XMLHttpRequest。其中：
使用 XHTML和 CSS标准化呈现，使用 DOM实现动态显示和交互，使用 XML和 XSTL进
行数据交换与处理，使用 XMLHttpRequest对象进行异步数据读取，使用 Javascript绑定和
处理所有数据。


在 AJAX提出之前，业界对于上述技术都只是单独的使用，没有综合使用，也是由于
之前的技术需求所决定的。随着应用的广泛，AJAX也成为香饽饽了。


二、现状与需要解决的问题 


传统的 Web应用采用同步交互过程，这种情况下，用户首先向 HTTP服务器触发一个
行为或请求的呼求。反过来，服务器执行某些任务，再向发出请求的用户返回一个 HTML
页面。这是一种不连贯的用户体验，服务器在处理请求的时候，用户多数时间处于等待的状
态，屏幕内容也是一片空白。如下图：



自从采用超文本作为 
Web传输和呈现之后，我们都是采用这么一套传输方式。当负载
比较小的时候，这并不会体现出有什么不妥。可是当负载比较大，响应时间要很长， 
1分钟、 
2分钟……数分钟的时候，这种等待就不可忍受了。严重的，超过响应时间，服务器干脆告
诉你页面不可用。另外，某些时候，我只是想改变页面一小部分的数据，那为什么我必须重
新加载整个页面呢？！当软件设计越来越讲究人性化的时候，这么糟糕的用户体验简直与这
种原则背道而驰。为什么老是要让用户等待服务器取数据呢？至少，我们应该减少用户等待
的时间。现在，除了程序设计、编码优化和服务器调优之外，还可以采用 
AJAX。



三、为什么使用 AJAX 


与传统的 Web应用不同，AJAX采用异步交互过程。 AJAX在用户与服务器之间引入一
个中间媒介，从而消除了网络交互过程中的处理—等待—处理—等待缺点。用户的浏览器在
执行任务时即装载了 AJAX引擎。AJAX引擎用 JavaScript语言编写，通常藏在一个隐藏的
框架中。它负责编译用户界面及与服务器之间的交互。 AJAX引擎允许用户与应用软件之间
的交互过程异步进行，独立于用户与网络服务器间的交流。现在，可以用Javascript调用AJAX
引擎来代替产生一个 HTTP的用户动作，内存中的数据编辑、页面导航、数据校验这些不需
要重新载入整个页面的需求可以交给 AJAX来执行。





使用 AJAX，可以为 ISP、开发人员、终端用户带来可见的便捷： 


. 
减轻服务器的负担。AJAX的原则是“按需取数据”，可以最大程度的减少冗余请求，
和响应对服务器造成的负担。 
. 
无刷新更新页面，减少用户心理和实际的等待时间。特别的，当要读取大量的数据的时
候，不用像 Reload那样出现白屏的情况， AJAX使用 XMLHTTP对象发送请求并得到
服务器响应，在不重新载入整个页面的情况下用 Javascript操作 DOM最终更新页面。
所以在读取数据的过程中，用户所面对的不是白屏，是原来的页面内容（也可以加一个 
Loading的提示框让用户知道处于读取数据过程），只有当数据接收完毕之后才更新相
应部分的内容。这种更新是瞬间的，用户几乎感觉不到。 
. 
带来更好的用户体验。 
. 
可以把以前一些服务器负担的工作转嫁到客户端，利用客户端闲置的能力来处理，减轻
服务器和带宽的负担，节约空间和宽带租用成本。 
. 
可以调用外部数据。 
. 
基于标准化的并被广泛支持的技术，不需要下载插件或者小程序。 
. 
进一步促进页面呈现和数据的分离。
四、谁在使用 AJAX 
在应用 AJAX开发上面，Google当仁不让是表率。 Orkut、Gmail、Google Groups、Google 
Maps、Google Suggest都应用了这项技术。 Amazon的 A9.com搜索引擎也采用了类似的技
术。
微软也在积极开发更为完善的AJAX应用：它即将推出代号为 Atlas的AJAX工具。Atlas
的功能超越了 AJAX本身，包括整合 Visual Studio的调试功能。另外，新的 ASP.NET控件
将使客户端控件与服务器端代码的捆绑更为简便。 Atlas客户脚本框架（ Atlas Clent Script 
Framework）也使与网页及相关项目的交互更为便利。但 Visual Studio 2005中并不包含此项
功能微软最近宣布 Atlas客户脚本框架将包含如下内容（详细资料请访问 Atlas计划网站）： 
* 一个可扩展的核心框架，它添加了 JavaScript功能：如生命同时期管理、继承管理多点传送处理器和界面管理。 
* 一个常见功能的基本类库，有丰富的字符串处理、计时器和运行任务。 
* 为 HTML附加动态行为的用户界面框架。 
* 一组用来简化服务器连通和网络访问的网络堆栈。 
* 一组丰富的用户界面开发控件，如：自动完成的文本框、动画和拖放。 
* 处理浏览器脚本行为差异的浏览器兼容层面。
典型的，微软将 AJAX技术应用在 MSN Space上面。很多人一直都对 MS Space服务感
到很奇怪，当提交回复评论以后，浏览器会暂时停顿一下，然后在无刷新的情况下把我提交
的评论显示出来。这个就是应用了 AJAX的效果。试想，如果添加一个评论就要重新刷新
整个页面，那可真费事。


目前，AJAX应用最普遍的领域是 GIS-Map方面。GIS的区域搜索强调快速响应， AJAX
的特点正好符合这种需求。


五、用 AJAX改进你的设计 


AJAX虽然可以实现无刷新更新页面内容，但是也不是什么地方都可以用，主要应用在
交互较多、频繁读数据、数据分类良好的 Web应用中。现在，让我们举两个例子，看看如
何用 AJAX改进你的设计。


例子1：数据校验 


在输入 form表单内容的时候，我们通常需要确保数据的唯一性。因此，常常在页面上
提供“唯一性校验”按钮，让用户点击，打开一个校验小窗口；或者等 form提交到服务器
端，由服务器判断后在返回相应的校验信息。前者， window.open操作本来就是比较耗费资
源的，通常由 window. showModalDialog代替，即使这样也要弹出一个对话框；后者，需要
把整个页面提交到服务器并由服务器判断校验，这个过程不仅时间长而且加重了服务器负
担。而使用 AJAX，这个校验请求可以由 XMLHttpRequest对象发出，整个过程不需要弹出
新窗口，也不需要将整个页面提交到服务器，快速又不加重服务器负担。


例子2：按需取数据—级联菜单 


以前，为了避免每次对菜单的操作引起的重载页面，不采用每次调用后台的方式，而是
一次性将级联菜单的所有数据全部读取出来并写入数组，然后根据用户的操作用 JavaScript
来控制它的子集项目的呈现，这样虽然解决了操作响应速度、不重载页面以及避免向服务器
频繁发送请求的问题，但是如果用户不对菜单进行操作或只对菜单中的一部分进行操作的
话，那读取的数据中的一部分就会成为冗余数据而浪费用户的资源，特别是在菜单结构复杂、
数据量大的情况下（比如菜单有很多级、每一级菜又有上百个项目），这种弊端就更为突出。


现在应用 AJAX，在初始化页面时我们只读出它的第一级的所有数据并显示，在用户操
作一级菜单其中一项时，会通过 Ajax向后台请求当前一级项目所属的二级子菜单的所有数
据，如果再继续请求已经呈现的二级菜单中的一项时，再向后面请求所操作二级菜单项对应
的所有三级菜单的所有数据，以此类推..这样，用什么就取什么、用多少就取多少，就不
会有数据的冗余和浪费，减少了数据下载总量，而且更新页面时不用重载全部内容，只更新
需要更新的那部分即可，相对于后台处理并重载的方式缩短了用户等待时间，也把对资源的



浪费降到最低。


例子3：读取外部数据 


AJAX可以调用外部数据，因此，可以对一些开发的数据比如 XML文档、 RSS文档进
行二次加工，实现数据整合或者开发应用程序。


六、AJAX的缺陷 


AJAX不是完美的技术。使用 AJAX，它的一些缺陷不得不权衡一下： 


. 
AJAX大量使用了 Javascript和 AJAX引擎，而这个取决于浏览器的支持。IE5.0及以上、 
Mozilla1.0、NetScape7及以上版本才支持， Mozilla虽然也支持 AJAX，但是提供 
XMLHttpRequest的方式不一样。所以，使用 AJAX的程序必须测试针对各个浏览器的
兼容性。 
AJAX更新页面内容的时候并没有刷新整个页面，因此，网页的后退功能是失效的；有
的用户还经常搞不清楚现在的数据是旧的还是已经更新过的。这个就需要在明显位置提
醒用户“数据已更新”。 
对流媒体的支持没有 FLASH、Java Applet好。 
一些手持设备（如手机、PDA等）现在还不能很好的支持 Ajax。
七、AJAX开发 


到这里，已经可以清楚的知道 AJAX是什么，AJAX能做什么， AJAX什么地方不好。
如果你觉得 AJAX真的能给你的开发工作带来改进的话，那么继续看看怎么使用 AJAX吧。


7.1、AJAX应用到的技术 
AJAX涉及到的 7项技术中，个人认为 Javascript、XMLHttpRequest、DOM、XML比
较有用。