一、使用Ajax的主要原因
1、通过适当的Ajax应用达到更好的用户体验;
2、把以前的一些服务器负担的工作转嫁到客户端，利于客户端闲置的处理能力来处理，减轻服务器和带宽的负担，从而达到节约ISP的空间及带宽租用成本的目的。
二、引用
Ajax这个概念的最早提出者Jesse James Garrett认为:Ajax是Asynchronous JavaScript and XML的缩写。Ajax并不是一门新的语言或技术,它实际上是几项技术按一定的方式组合在一在同共的协作中发挥各自的作用,它包括:
·使用XHTML和CSS标准化呈现;
·使用DOM实现动态显示和交互;
·使用XML和XSLT进行数据交换与处理;
·使用XMLHttpRequest进行异步数据读取;
·最后用JavaScript绑定和处理所有数据;
Ajax的工作原理相当于在用户和服务器之间加了—个中间层,使用户操作与服务器响应异步化。并不是所有的用户请求都提交给服务器,像—些数据验证和数据处理等都交给Ajax引擎自己来做,只有确定需要从服务器读取新数据时再由Ajax引擎代为向服务器提交请求。
图2-1
图2-2
三、概述
虽然Garrent列出了7条Ajax的构成技术，但个人认为，所谓的Ajax其核心只有JavaScript、XMLHTTPRequest和DOM，如果所用数据格式为XML的话，还可以再加上XML这一项(Ajax从服务器端返回的数据可以是XML格式，也可以是文本等其他格式)。
在旧的交互方式中,由用户触发一个HTTP请求到服务器,服务器对其进行处理后再返回一个新的HTHL页到客户端,每当服务器处理客户端提交的请求时,客户都只能空闲等待,并且哪怕只是一次很小的交互、只需从服务器端得到很简单的一个数据,都要返回一个完整的HTML页,而用户每次都要浪费时间和带宽去重新读取整个页面。
而使用Ajax后用户从感觉上几乎所有的操作都会很快响应没有页面重载(白屏)的等待。
1、XMLHTTPRequest
Ajax的一个最大的特点是无需刷新页面便可向服务器传输或读写数据(又称无刷新更新页面),这一特点主要得益于XMLHTTP组件XMLHTTPRequest对象。这样就可以向再发桌面应用程序只同服务器进行数据层面的交换,而不用每次都刷新界面也不用每次将数据处理的工作提交给服务器来做,这样即减轻了服务器的负担又加快了响应速度、缩短了用户等候时间。
最早应用XMLHTTP的是微软,IE(IE5以上)通过允许开发人员在Web页面内部使用XMLHTTP ActiveX组件扩展自身的功能,开发人员可以不用从当前的Web页面导航而直接传输数据到服务器上或者从服务器取数据。这个功能是很重要的,因为它帮助减少了无状态连接的痛苦,它还可以排除下载冗余HTML的需要,从而提高进程的速度。Mozilla(Mozilla1.0以上及NetScape7以上)做出的回应是创建它自己的继承XML代理类:XMLHttpRequest类。Konqueror (和Safari v1.2,同样也是基于KHTML的浏览器)也支持XMLHttpRequest对象,而Opera也将在其v7.6x+以后的版本中支持XMLHttpRequest对象。对于大多数情况，XMLHttpRequest对象和XMLHTTP组件很相似,方法和属性也类似,只是有一小部分属性不支持。
XMLHttpRequest的应用:
·XMLHttpRequest对象在JS中的应用
var xmlhttp = new XMLHttpRequest();
·微软的XMLHTTP组件在JS中的应用
var xmlhttp = new ActiveXObject(Microsoft.XMLHTTP);
var xmlhttp = new ActiveXObject(Msxml2.XMLHTTP);
XMLHttpRequest 对象方法
/**
* Cross-browser XMLHttpRequest instantiation.
*/
if (typeof XMLHttpRequest == ’undefined’) {
XMLHttpRequest = function () {
var msxmls = [’MSXML3’, ’MSXML2’, ’Microsoft’]
for (var i=0; i < msxmls.length; i++) {
try {
return new ActiveXObject(msxmls[i]+’.XMLHTTP’)
} catch (e) { }
}
throw new Error("No XML component installed!")
}
}
function createXMLHttpRequest() {
try {
// Attempt to create it "the Mozilla way"
if (window.XMLHttpRequest) {
return new XMLHttpRequest();
}
// Guess not - now the IE way
if (window.ActiveXObject) {
return new ActiveXObject(getXMLPrefix() + ".XmlHttp");
}
}
catch (ex) {}
return false;
};
XMLHttpRequest 对象方法
| 方法 | 描述 |
| abort() | 停止当前请求 |
| getAllResponseHeaders() | 作为字符串返问完整的headers |
| getResponseHeader("headerLabel") | 作为字符串返问单个的header标签 |
| open("method","URL"[,asyncFlag[,"userName"[, "password"]]]) | 设置未决的请求的目标 URL, 方法, 和其他参数 |
| send(content) | 发送请求 |
| setRequestHeader("label", "value") | 设置header并和请求一起发送 |
XMLHttpRequest 对象属性
| 属性 | 描述 |
| onreadystatechange | 状态改变的事件触发器 |
| readyState | 对象状态(integer):
0 = 未初始化
1 = 读取中
2 = 已读取
3 = 交互中
4 = 完成 |
| responseText | 服务器进程返回数据的文本版本 |
| responseXML | 服务器进程返回数据的兼容DOM的XML文档对象 |
| status | 服务器返回的状态码, 如:404 = "文件末找到" 、200 ="成功" |
| statusText | 服务器返回的状态文本信息 |
2、JavaScript
JavaScript是一在浏览器中大量使用的编程语言，，他以前一直被贬低为一门糟糕的语言(他确实在使用上比较枯燥)，以在常被用来作一些用来炫耀的小玩意和恶作剧或是单调琐碎的表单验证。但事实是，他是一门真正的编程语言，有着自已的标准并在各种浏览器中被广泛支持。
3、DOM
Document Object Model。
DOM是给 HTML 和 XML 文件使用的一组 API。它提供了文件的结构表述，让你可以改变其中的內容及可见物。其本质是建立网页与 Script 或程序语言沟通的桥梁。
所有WEB开发人员可操作及建立文件的属性、方法及事件都以对象来展现(例如，document 就代表“文件本身“这个对像，table 对象则代表 HTML 的表格对象等等)。这些对象可以由当今大多数的浏览器以 Script 来取用。
一个用HTML或XHTML构建的网页也可以看作是一组结构化的数据，这些数据被封在DOM(Document Object Model)中，DOM提供了网页中各个对象的读写的支持。
4、XML
可扩展的标记语言(Extensible Markup Language)具有一种开放的、可扩展的、可自描述的语言结构，它已经成为网上数据和文档传输的标准。它是用来描述数据结构的一种语言，就正如他的名字一样。他使对某些结构化数据的定义更加容易，并且可以通过他和其他应用程序交换数据。
5、综合
Jesse James Garrett提到的Ajax引擎，实际上是一个比较复杂的JavaScript应用程序，用来处理用户请求，读写服务器和更改DOM内容。
JavaScript的Ajax引擎读取信息，并且互动地重写DOM，这使网页能无缝化重构，也就是在页面已经下载完毕后改变页面内容，这是我们一直在通过JavaScript和DOM在广泛使用的方法，但要使网页真正动态起来，不仅要内部的互动，还需要从外部获取数据，在以前，我们是让用户来输入数据并通过DOM来改变网页内容的，但现在，XMLHTTPRequest，可以让我们在不重载页面的情况下读写服务器上的数据，使用户的输入达到最少。
基于XML的网络通讯也并不是新事物，实际上FLASH和JAVA Applet都有不错的表现，现在这种富交互在网页上也可用了，基于标准化的并被广泛支持和技术，并且不需要插件或下载小程序。
Ajax是传统WEB应用程序的一个转变。以前是服务器每次生成HTML页面并返回给客户端(浏览器)。在大多数网站中，很多页面中至少90%都是一样的，比如:结构、格式、页头、页尾、广告等，所不同的只是一小部分的内容，但每次服务器都会生成所有的页面再返回给客户端，这无形之中是一种浪费，不管是对于用户的时间、带宽、CPU耗用，还是对于ISP的高价租用的带宽和空间来说。如果按一页来算，只能几K或是几十K可能并不起眼，但像SINA每天要生成几百万个页面的大ISP来说，可以说是损失巨大的。而AJAX可以所为客户端和服务器的中间层，来处理客户端的请求，并根据需要向服务器端发送请求，用什么就取什么、用多少就取多少，就不会有数据的冗余和浪费，减少了数据下载总量，而且更新页面时不用重载全部内容，只更新需要更新的那部分即可，相对于纯后台处理并重载的方式缩短了用户等待时间，也把对资源的浪费降到最低，基于标准化的并被广泛支持和技术，并且不需要插件或下载小程序，所以Ajax对于用户和ISP来说是双盈的。
Ajax使WEB中的界面与应用分离(也可以说是数据与呈现分离)，而在以前两者是没有清晰的界限的，数据与呈现分离的分离，有利于分工合作、减少非技术人员对页面的修改造成的WEB应用程序错误、提高效率、也更加适用于现在的发布系统。也可以把以前的一些服务器负担的工作转嫁到客户端，利于客户端闲置的处理能力来处理。
四、应用
Ajax理念的出现，揭开了无刷新更新页面时代的序幕，并有代替传统web开发中采用form(表单)递交方式更新web页面的趋势，可以算是一个里程碑。但Ajax都不是适用于所有地方的，它的适用范围是由它的特性所决定的。
举个应用的例子，是关于级联菜单方面的Ajax应用。
我们以前的对级联菜单的处理是这样的:
为了避免每次对菜单的操作引起的重载页面，不采用每次调用后台的方式，而是一次性将级联菜单的所有数据全部读取出来并写入数组，然后根据用户的操作用JavaScript来控制它的子集项目的呈现，这样虽然解决了操作响应速度、不重载页面以及避免向服务器频繁发送请求的问题，但是如果用户不对菜单进行操作或只对菜单中的一部分进行操作的话，那读取的数据中的一部分就会成为冗余数据而浪费用户的资源，特别是在菜单结构复杂、数据量大的情况下(比如菜单有很多级、每一级菜又有上百个项目)，这种弊端就更为突出。
如果在此案中应用Ajax后，结果就会有所改观:
在初始化页面时我们只读出它的第一级的所有数据并显示，在用户操作一级菜单其中一项时，会通过Ajax向后台请求当前一级项目所属的二级子菜单的所有数据，如果再继续请求已经呈现的二级菜单中的一项时，再向后面请求所操作二级菜单项对应的所有三级菜单的所有数据，以此类推……这样，用什么就取什么、用多少就取多少，就不会有数据的冗余和浪费，减少了数据下载总量，而且更新页面时不用重载全部内容，只更新需要更新的那部分即可，相对于后台处理并重载的方式缩短了用户等待时间，也把对资源的浪费降到最低。
此外，Ajax由于可以调用外部数据，也可以实现数据聚合的功能(当然要有相应授权)，比如微软刚刚在3月15日发布的在线RSS阅读器BETA版;还可以利于一些开放的数据，开发自已的一些应用程序，比如用Amazon的数据作的一些新颖的图书搜索应用。
总之，Ajax适用于交互较多，频繁读数据，数据分类良好的WEB应用。
五、Ajax的优势
1、减轻服务器的负担。因为Ajax的根本理念是“按需取数据”，所以最大可能在减少了冗余请求和响影对服务器造成的负担;
2、无刷新更新页面，减少用户实际和心理等待时间;
首先，“按需取数据”的模式减少了数据的实际读取量，打个很形象的比方，如果说重载的方式是从一个终点回到原点再到另一个终点的话，那么Ajax就是以一个终点为基点到达另一个终点;
图5-1
图5-2
其次，即使要读取比较大的数据，也不用像RELOAD一样出现白屏的情况，由于Ajax是用XMLHTTP发送请求得到服务端应答数据，在不重新载入整个页面的情况下用Javascript操作DOM最终更新页面的，所以在读取数据的过程中，用户所面对的也不是白屏，而是原来的页面状态(或者可以加一个LOADING的提示框让用户了解数据读取的状态)，只有当接收到全部数据后才更新相应部分的内容，而这种更新也是瞬间的，用户几乎感觉不到。总之用户是很敏感的，他们能感觉到你对他们的体贴，虽然不太可能立竿见影的效果，但会在用户的心中一点一滴的积累他们对网站的依赖。
3、更好的用户体验;
4、也可以把以前的一些服务器负担的工作转嫁到客户端，利于客户端闲置的处理能力来处理，减轻服务器和带宽的负担，节约空间和带宽租用成本;
5、Ajax由于可以调用外部数据;
6、基于标准化的并被广泛支持和技术，并且不需要插件或下载小程序;
7、Ajax使WEB中的界面与应用分离(也可以说是数据与呈现分离);
8、对于用户和ISP来说是双盈的。
六、Ajax的问题
1、一些手持设备(如手机、PDA等)现在还不能很好的支持Ajax;
2、用JavaScript作的Ajax引擎，JavaScript的兼容性和DeBug都是让人头痛的事;
3、Ajax的无刷新重载，由于页面的变化没有刷新重载那么明显，所以容易给用户带来困扰――用户不太清楚现在的数据是新的还是已经更新过的;现有的解决有:在相关位置提示、数据更新的区域设计得比较明显、数据更新后给用户提示等;
4、对流媒体的支持没有FLASH、Java Applet好;
七、结束语
更好的Ajax应用，需要更多的客户端的开发，和对当前的WEB应用理念的思考，而且良好的用户体验，来源于为处处用户考虑的理念，而不单纯是某种技术。
——————————————————————————————————————————
AJAX开发简略
在使用浏览器浏览网页的时候，当页面刷新很慢的时候，你的浏览器在干什么？你的屏幕内容是什么？是的，你的浏览器在等待刷新，而你的屏幕内容是一片空白，而你在屏幕前苦苦的等待浏览器的响应。开发人员为了克服这种尴尬的局面，不得不在每一个可能需要长时间等待响应的页面上增加一个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、开发人员、终端用户带来可见的便捷：
l 减轻服务器的负担。AJAX的原则是“按需取数据”，可以最大程度的减少冗余请求，和响应对服务器造成的负担。
l 无刷新更新页面，减少用户心理和实际的等待时间。特别的，当要读取大量的数据的时候，不用像Reload那样出现白屏的情况，AJAX使用XMLHTTP对象发送请求并得到服务器响应，在不重新载入整个页面的情况下用Javascript操作DOM最终更新页面。所以在读取数据的过程中，用户所面对的不是白屏，是原来的页面内容（也可以加一个Loading的提示框让用户知道处于读取数据过程），只有当数据接收完毕之后才更新相应部分的内容。这种更新是瞬间的，用户几乎感觉不到。
l 带来更好的用户体验。
l 可以把以前一些服务器负担的工作转嫁到客户端，利用客户端闲置的能力来处理，减轻服务器和带宽的负担，节约空间和宽带租用成本。
l 可以调用外部数据。
l 基于标准化的并被广泛支持的技术，不需要下载插件或者小程序。
l 进一步促进页面呈现和数据的分离。
四、谁在使用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，它的一些缺陷不得不权衡一下：
l AJAX大量使用了Javascript和AJAX引擎，而这个取决于浏览器的支持。IE5.0及以上、Mozilla1.0、NetScape7及以上版本才支持，Mozilla虽然也支持AJAX，但是提供XMLHttpRequest的方式不一样。所以，使用AJAX的程序必须测试针对各个浏览器的兼容性。
l AJAX更新页面内容的时候并没有刷新整个页面，因此，网页的后退功能是失效的；有的用户还经常搞不清楚现在的数据是旧的还是已经更新过的。这个就需要在明显位置提醒用户“数据已更新”。
l 对流媒体的支持没有FLASH、Java Applet好。
l 一些手持设备（如手机、PDA等）现在还不能很好的支持Ajax。
七、AJAX开发
到这里，已经可以清楚的知道AJAX是什么，AJAX能做什么，AJAX什么地方不好。如果你觉得AJAX真的能给你的开发工作带来改进的话，那么继续看看怎么使用AJAX吧。
7.1、AJAX应用到的技术AJAX涉及到的7项技术中，个人认为Javascript、XMLHttpRequest、DOM、XML比较有用。
A、XMLHttpRequest对象XMLHttpRequest是XMLHTTP组件的对象，通过这个对象，AJAX可以像桌面应用程序一样只同服务器进行数据层面的交换，而不用每次都刷新界面，也不用每次将数据处理的工作都交给服务器来做；这样既减轻了服务器负担又加快了响应速度、缩短了用户等待的时间。
IE5.0开始，开发人员可以在Web页面内部使用XMLHTTP ActiveX组件扩展自身的功能，不用从当前的Web页面导航就可以直接传输数据到服务器或者从服务器接收数据。,Mozilla1.0以及NetScape7则是创建继承XML的代理类XMLHttpRequest；对于大多数情况，XMLHttpRequest对象和XMLHTTP组件很相似，方法和属性类似，只是部分属性不同。
XMLHttpRequest对象初始化：
XMLHttpRequest对象的方法：
| 方法 | 描述 |
| abort() | 停止当前请求 |
| getAllResponseHeaders() | 作为字符串返回完整的headers |
| getResponseHeader("headerLabel") | 作为字符串返回单个的header标签 |
| open("method","URL"[,asyncFlag[,"userName"[, "password"]]]) | 设置未决的请求的目标 URL，方法，和其他参数 |
| send(content) | 发送请求 |
| setRequestHeader("label", "value") | 设置header并和请求一起发送 |
XMLHttpRequest对象的属性：
| 属性 | 描述 |
onreadystatechange
| 状态改变的事件触发器 |
| readyState | 对象状态(integer):
0 = 未初始化
1 = 读取中
2 = 已读取
3 = 交互中
4 = 完成 |
| responseText | 服务器进程返回数据的文本版本 |
| responseXML | 服务器进程返回数据的兼容DOM的XML文档对象 |
| status | 服务器返回的状态码, 如：404 = "文件未找到" 、200 ="成功" |
| statusText | 服务器返回的状态文本信息 |
B、JavascriptJavascript一直被定位为客户端的脚本语言，应用最多的地方是表单数据的校验。现在，可以通过Javascript操作XMLHttpRequest，来跟数据库打交道。
C、DOMDOM（Document Object Model）是提供给HTML和XML使用的一组API，提供了文件的表述结构，并可以利用它改变其中的内容和可见物。脚本语言通过DOM才可以跟页面进行交互。Web开发人员可操作及建立文件的属性、方法以及事件都以对象来展现。比如，document就代表页面对象本身。
D、XML通过XML（Extensible Markup Language），可以规范的定义结构化数据，是网上传输的数据和文档符合统一的标准。用XML表述的数据和文档，可以很容易的让所有程序共享。
7.2、AJAX开发框架这里，我们通过一步步的解析，来形成一个发送和接收XMLHttpRequest请求的程序框架。AJAX实质上也是遵循Request/Server模式，所以这个框架基本的流程也是：对象初始化à发送请求à服务器接收à服务器返回à客户端接收à修改客户端页面内容。只不过这个过程是异步的。
A、初始化对象并发出XMLHttpRequest请求为了让Javascript可以向服务器发送HTTP请求，必须使用XMLHttpRequest对象。使用之前，要先将XMLHttpRequest对象实例化。之前说过，各个浏览器对这个实例化过程实现不同。IE以ActiveX控件的形式提供，而Mozilla等浏览器则直接以XMLHttpRequest类的形式提供。为了让编写的程序能够跨浏览器运行，要这样写：
if (window.XMLHttpRequest) { // Mozilla, Safari, ...
http_request = new XMLHttpRequest();
} else if (window.ActiveXObject) { // IE
http_request = new ActiveXObject("Microsoft.XMLHTTP");
}
有些版本的Mozilla浏览器处理服务器返回的未包含XML mime-type头部信息的内容时会出错。因此，要确保返回的内容包含text/xml信息。
http_request = new XMLHttpRequest();
http_request.overrideMimeType('text/xml');
B、指定响应处理函数接下来要指定当服务器返回信息时客户端的处理方式。只要将相应的处理函数名称赋给XMLHttpRequest对象的onreadystatechange属性就可以了。比如：
http_request.onreadystatechange = processRequest;
需要指出的时，这个函数名称不加括号，不指定参数。也可以用Javascript即时定义函数的方式定义响应函数。比如：
http_request.onreadystatechange = function() {
};
C、发出HTTP请求指定响应处理函数之后，就可以向服务器发出HTTP请求了。这一步调用XMLHttpRequest对象的open和send方法。
http_request.open('GET', 'http://www.example.org/some.file', true);
http_request.send(null);
open的第一个参数是HTTP请求的方法，为Get、Post或者Head。
第二个参数是目标URL。基于安全考虑，这个URL只能是同网域的，否则会提示“没有权限”的错误。这个URL可以是任何的URL，包括需要服务器解释执行的页面，不仅仅是静态页面。
第三个参数只是指定在等待服务器返回信息的时间内是否继续执行下面的代码。如果为True，则不会继续执行，直到服务器返回信息。默认为True。
按照顺序，open调用完毕之后要调用send方法。send的参数如果是以Post方式发出的话，可以是任何想传给服务器的内容。不过，跟form一样，如果要传文件给服务器，必须先调用setRequestHeader方法，修改MIME类别。如下：
http_request.setRequestHeader(“Content-Type”,”application/x-www-form-urlencoded”);
D、处理服务器返回的信息在第二步我们已经指定了响应处理函数，这一步，来看看这个响应处理函数都应该做什么。
首先，它要检查XMLHttpRequest对象的readyState值，判断请求目前的状态。参照前文的属性表可以知道，readyState值为4的时候，代表服务器已经传回所有的信息，可以开始处理信息并更新页面内容了。如下：
if (http_request.readyState == 4) {
// 信息已经返回，可以开始处理
} else {
// 信息还没有返回，等待
}
服务器返回信息后，还需要判断返回的HTTP状态码，确定返回的页面没有错误。所有的状态码都可以在W3C的官方网站上查到。其中，200代表页面正常。
if (http_request.status == 200) {
// 页面正常，可以开始处理信息
} else {
// 页面有问题
}
XMLHttpRequest对成功返回的信息有两种处理方式：
responseText：将传回的信息当字符串使用；
responseXML：将传回的信息当XML文档使用，可以用DOM处理。
E、一个初步的开发框架总结上面的步骤，我们整理出一个初步的可用的开发框架，供以后调用；这里，将服务器返回的信息用window.alert以字符串的形式显示出来：
var http_request = false;
function send_request(url) {//初始化、指定处理函数、发送请求的函数
http_request = false;
//开始初始化XMLHttpRequest对象
if(window.XMLHttpRequest) { //Mozilla 浏览器
http_request = new XMLHttpRequest();
if (http_request.overrideMimeType) {//设置MiME类别
http_request.overrideMimeType("text/xml");
}
}
else if (window.ActiveXObject) { // IE浏览器
try {
http_request = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
http_request = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {}
}
}
if (!http_request) { // 异常，创建对象实例失败
window.alert("不能创建XMLHttpRequest对象实例.");
return false;
}
http_request.onreadystatechange = processRequest;
// 确定发送请求的方式和URL以及是否同步执行下段代码
http_request.open("GET", url, true);
http_request.send(null);
}
// 处理返回信息的函数
function processRequest() {
if (http_request.readyState == 4) { // 判断对象状态
if (http_request.status == 200) { // 信息已经成功返回，开始处理信息
alert(http_request.responseText);
} else { //页面不正常
alert("您所请求的页面有异常。");
}
}
}
7.3、简单的示例接下来，我们利用上面的开发框架来做两个简单的应用。
A、数据校验在用户注册的表单中，经常碰到要检验待注册的用户名是否唯一。传统的做法是采用window.open的弹出窗口，或者window. showModalDialog的对话框。不过，这两个都需要打开窗口。采用AJAX后，采用异步方式直接将参数提交到服务器，用window.alert将服务器返回的校验信息显示出来。代码如下：
在之间增加一段form表单代码：
在开发框架的基础上再增加一个调用函数：
function userCheck() {
var f = document.form1;
var username = f.username.value;
if(username=="") {
window.alert("用户名不能为空。");
f.username.focus();
return false;
}
else {
send_request('sample1_2.jsp?username='+username);
}
}
看看sample1_2.jsp做了什么：
]]>
String username = request.getParameter("username");
if("educhina".equals(username)) out.print("用户名已经被注册，请更换一个用户名。");
else out.print("用户名尚未被使用，您可以继续。");
%>]]>
运行一下，嗯，没有弹出窗口，没有页面刷新，跟预想的效果一样。如果需要的话，可以在sample1_2.jsp中实现更复杂的功能。最后，只要将反馈信息打印出来就可以了。
B、级联菜单我们在第五部分提到利用AJAX改进级联菜单的设计。接下来，我们就演示一下如何“按需取数据”。
首先，在中间增加如下HTML代码：
在框架的基础上增加一个响应函数showRoles(obj)：
//显示部门下的岗位
function showRoles(obj) {
document.getElementById(obj).parentNode.style.display = "";
document.getElementById(obj).innerHTML = "正在读取数据..."
currentPos = obj;
send_request("sample2_2.jsp?playPos="+obj);
}
修改框架的processRequest函数：
// 处理返回信息的函数
function processRequest() {
if (http_request.readyState == 4) { // 判断对象状态
if (http_request.status == 200) { // 信息已经成功返回，开始处理信息
document.getElementById(currentPos).innerHTML = http_request.responseText;
} else { //页面不正常
alert("您所请求的页面有异常。");
}
}
}
最后就是smaple2_2.jsp了：
]]>
String playPos = request.getParameter("playPos");
if("pos_1".equals(playPos))
out.print(" 总经理
副总经理");
else if("pos_2".equals(playPos))
out.println(" 总工程师
软件工程师");
%>]]>
运行一下看看效果：
————————————————————————————————————————
AJAX编写用户注册实例及技术小结
我所举的这个例子是一个企业用户注册时的一个应用，当用户注册时检查用户名和企业名是否可用，以前的做法是在旁边加一个按钮，点击“检查”，就向服务器发出请求，然后等待……服务器返回信息，继续操作。如果我们用Ajax技术来实现以上的操作则不必等待服务器返回信息，用户输入用户名或企业名称的时候，当输入文本框失去焦点的时候，则会自动向服务器发出请求，用户继续做下面的操作，不必点击“检查”，也不必等待服务器返回信息，检查与用户操作是异步的，可同时进行。当服务器信息返回的时候，会自动在面页相应位置显示返回信息，不必刷新页面，相当于局部刷新的效果。
下面我们来看代码吧。
HTML页面的完整代码如下：
1＜%@page language="java" contentType="text/html;charset=GBK"%＞
2＜script language="javascript" type="text/javascript"＞
3＜!--
4/**//**Ajax 开始 by Alpha 2005-12-31*/
5
6 var http = getHTTPObject();
7
8 function handleHttpResponse(){
9 if(http.readyState == 4){
10 if(http.status == 200){
11 var xmlDocument = http.responseXML;
12 if(http.responseText!=""){
13 document.getElementById("showStr").style.display = "";
14 document.getElementById("userName").style.background= "#FF0000";
15 document.getElementById("showStr").innerText = http.responseText;
16 }else{
17 document.getElementById("userName").style.background= "#FFFFFF";
18 document.getElementById("showStr").style.display = "none";
19 }
20
21 }
22 else{
23 alert("你所请求的页面发生异常，可能会影响你浏览该页的信息！");
24 alert(http.status);
25 }
26 }
27 }
28
29 function handleHttpResponse1(){
30 if(http.readyState == 4){
31 if(http.status == 200){
32 var xmlDocument = http.responseXML;
33 if(http.responseText!=""){
34 document.getElementById("comNmStr").style.display = "";
35 document.getElementById("comNm").style.background= "#FF0000";
36 document.getElementById("comNmStr").innerText = http.responseText;
37 }else{
38 document.getElementById("comNm").style.background= "#FFFFFF";
39 document.getElementById("comNmStr").style.display = "none";
40 }
41
42 }
43 else{
44 alert("你所请求的页面发生异常，可能会影响你浏览该页的信息！");
45 alert(http.status);
46 }
47 }
48 }
49
50 function chkUser(){
51 var url = "/chkUserAndCom";
52 var name = document.getElementById("userName").value;
53 url += ("&userName="+name+"&oprate=chkUser");
54 http.open("GET",url,true);
55 http.onreadystatechange = handleHttpResponse;
56 http.send(null);
57 return ;
58 }
59 function chkComNm(){
60 var url = "/chkUserAndCom";
61 var name = document.getElementById("comNm").value;
62 url += ("&comName="+name+"&oprate=chkCom");
63 http.open("GET",url,true);
64 http.onreadystatechange = handleHttpResponse1;
65 http.send(null);
66 return ;
67 }
68
69 //该函数可以创建我们需要的XMLHttpRequest对象
70 function getHTTPObject(){
71 var xmlhttp = false;
72 if(window.XMLHttpRequest){
73 xmlhttp = new XMLHttpRequest();
74 if(xmlhttp.overrideMimeType){
75 xmlhttp.overrideMimeType('text/xml');
76 }
77 }
78 else{
79 try{
80 xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
81 }catch(e){
82 try{
83 xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
84 }catch(E){
85 xmlhttp = false;
86 }
87 }
88 }
89 return xmlhttp;
90 }
91/**//**Ajax 结束*/
92
93//检测表单
94function chkpassword()
95{
96 var m=document.form1;
97 if(len(m.password.value) ＞ 20 || len(m.password.value) ＜ 5 || !isStr(m.password.value))
98 {
99 document.getElementById("passwordStr").style.display = "";
100 document.getElementById("password").style.background= "#FF0000";
101 document.getElementById("passwordStr").innerText = "对不起,密码必须为英文字母、数字或下划线，长度为5~20!";
102 }
103 else
104 {
105 document.getElementById("password").style.background= "#FFFFFF";
106 document.getElementById("passwordStr").style.display = "none";
107 }
108}
109
110function chkconfirmPassword()
111{
112 var m=document.form1;
113 if (m.password.value != m.confirmPassword.value)
114 {
115 document.getElementById("confirmPasswordStr").style.display = "";
116 document.getElementById("confirmPassword").style.background= "#FF0000";
117 document.getElementById("confirmPasswordStr").innerText = "对不起,密码与重复密码不一致!";
118 }
119 else
120 {
121 document.getElementById("confirmPassword").style.background= "#FFFFFF";
122 document.getElementById("confirmPasswordStr").style.display = "none";
123 }
124}
125
126function checkfield()
127{
128 var m=document.form1;
129 if(m.userName.value.length==0)
130 {
131 alert("对不起,用户名必须为英文字母、数字或下划线，长度为5~20。");
132 m.userName.focus();
133 return false;
134 }
135 if(m.password.value.length==0)
136 {
137 alert("对不起,密码必须为英文字母、数字或下划线，长度为5~20。");
138 m.password.focus();
139 return false;
140 }
141 if (m.password.value != m.confirmPassword.value)
142 {
143 alert("对不起,密码与重复密码不一致!");
144 m.confirmPassword.focus();
145 return false;
146 }
147 if(m.comNm.value.length==0)
148 {
149 alert("对不起,企业名称不能为空！！");
150 m.comNm.focus();
151 return false;
152 }
153 m.submit();
154}
155
156//--＞
157＜/script＞
158＜body topmargin="0"＞
159＜form name="form1" method="post" action="/Control?act=Register"＞
160＜table width="100%"＞
161 ＜tr＞＜td align="center"＞ ＜H2＞Ajax 演示程序＜/H1＞＜/td＞＜/tr＞
162 ＜tr＞＜td align="center"＞ ------ 企业注册 By Alpha＜/td＞＜/tr＞
163＜/table＞
164
165＜HR＞
166 ＜table width="400" border="0" cellpadding="1" cellspacing="1" align="center" ＞
167 ＜tr＞
168 ＜td＞＜font color="red"＞*＜/font＞＜/td＞
169 ＜td＞用户帐号:＜/td＞
170 ＜td＞
171 ＜input type="text" name="userName" maxlength="20" style="background:#FFFFFF" onBlur="chkUser()" value=""/＞
172 ＜div id="showStr" style="background-color:#FF9900;display:none"＞＜/div＞
173 ＜/td＞
174 ＜/tr＞
175 ＜tr＞
176 ＜td＞＜font color="red"＞*＜/font＞＜/td＞
177 ＜td＞企业名称:＜/td＞
178 ＜td＞
179 ＜input type="text" name="comNm" maxlength="100" style="background:#FFFFFF" onBlur="chkComNm()" value=""/＞
180 ＜div id="comNmStr" style="background-color:#FF9900;display:none"＞＜/div＞
181
182 ＜/td＞
183 ＜/tr＞
184 ＜tr＞
185 ＜td＞＜font color="red"＞*＜/font＞＜/td＞
186 ＜td＞用户密码:＜/td＞
187 ＜td＞＜input type="password" name="password" maxlength="20" style="background:#FFFFFF" onBlur="chkpassword()"/＞
188 ＜div id="passwordStr" style="background-color:#FF9900;display:none"＞＜/div＞
189 ＜/td＞
190 ＜/tr＞
191 ＜tr＞
192 ＜td＞＜font color="red"＞*＜/font＞＜/td＞
193 ＜td＞确认密码:＜/td＞
194 ＜td＞＜input type="password" name="confirmPassword" maxlength="20" style="background:#FFFFFF" onBlur="chkconfirmPassword()"/＞
195 ＜div id="confirmPasswordStr" style="background-color:#FF9900;display:none"＞＜/div＞
196 ＜/td＞
197 ＜/tr＞
198 ＜/table＞
199
200 ＜div align="center"＞
201 ＜input type="button" name="ok" value=" 确 定 " onclick="checkfield()"＞
202
203 ＜input type="reset" name="reset" value=" 取 消 "＞
204 ＜/div＞
205
206＜/form＞
207＜/body＞
208＜/html＞ |
用JavaScript来创建XMLHttpRequest 类向服务器发送一个HTTP请求后，接下来要决定当收到服务器的响应后，需要做什么。这需要告诉HTTP请求对象用哪一个JavaScript函数处理这个响应。可以将对象的onreadystatechange属性设置为要使用的JavaScript的函数名，如下所示:xmlhttp_request.onreadystatechange =FunctionName;
FunctionName是用JavaScript创建的函数名，注意不要写成FunctionName()，当然我们也可以直接将JavaScript代码创建在onreadystatechange之后。
我们调用request.open()-它用服务器打开套接字频道，使用一个HTTP动词(GET或POST)作为第一个参数并且以数据提供者的URL作为第二个参数。request.open()的最后一个参数被设置为true-它指示该请求的异步特性。注意，该请求还没有被提交。随着对request.send()的调用，开始提交-这可以为POST提供任何必要的有效载荷。在使用异步请求时，我们必须使用request.onreadystatechanged属性来分配请求的回调函数。(如果请求是同步的话，我们应该能够在调用request.send之后立即处理结果，但是我们也有可能阻断用户，直到该请求完成为止。)
我看再看看数据提供者的URL，url = "/chkUserAndCom"，servlet如下：
1/**//*
2 * Created on 2005-12-31
3 *
4 * TODO To change the template for this generated file go to
5 * Window - Preferences - Java - Code Style - Code Templates
6 */
7package com.event;
8
9import javax.servlet.ServletException;
10import javax.servlet.http.HttpServletRequest;
11import javax.servlet.http.HttpServletResponse;
12
13import com.beans.EBaseInfo;
14
15/** *//**
16 * @author Alpha 2005-12-31
17 *
18 * ＜P＞Ajax 演示---企业注册时检查企业用户名和企业名称＜/P＞
19 *
20 * TODO To change the template for this generated type comment go to
21 * Window - Preferences - Java - Code Style - Code Templates
22 */
23public class CheckUserAndComNm {
24 private String msgStr = "";
25 protected void doGet(HttpServletRequest request,HttpServletResponse response)
26 throws ServletException
27 {
28
29 EComBaseInfo info=new EComBaseInfo();
30 String oprate=request.getParameter("oprate")).trim();
31 String userName=request.getParameter("userName");
32 String passWord=request.getParameter("password");
33 String comName=request.getParameter("comName");
34
35 try
36 {
37 if(oprate.equals("chkUser"))
38 {
39 response.setContentType("text/html;charset=GB2312");
40 if(userName.length()＜5||userName.length()＞20)
41 {
42 msgStr = "对不起,用户名必须为字母、数字或下划线，长度为5-20个字符!";
43 }
44 else
45 {
46 boolean bTmp=info.findUser(userName); //找查数据库中有无该用户名
47 if(bTmp)
48 msgStr ="对不起,此用户名已经存在,请更换用户名注册!";
49 else
50 msgStr ="";
51 }
52 response.getWriter().write(msgStr);
53 }
54 else if(oprate.equals("chkCom"))
55 {
56 response.setContentType("text/html;charset=GB2312");
57 if(comName.length()＜6||comName.length()＞100)
58 {
59 msgStr = "对不起,公司名称长度为6-100个字符(不包括字符内的空格)!";
60 }
61 else
62 {
63 boolean bTmp=info.findCom(comName); //找查数据库中有无该企业名
64 if(bTmp)
65 msgStr ="对不起,此企业名称已经存在,请更换企业名称注册!";
66 else
67 msgStr ="";
68 }
69 response.getWriter().write(msgStr);
70
71 }
72 }
73 catch(Exception ex)
74 {
75 }
76 finally
77 {
78 request.setAttribute("url",url);
79 }
80 }
81
82 protected void doPost(HttpServletRequest request,HttpServletResponse response)
83 throws ServletException
84 {
85 doGet(request,response);
86 }
87}
88 |
AJAX技术小结 1. Ajax（Asynchronous JavaScript and XML）是一个结合了Java技术、XML、以及JavaScript的编程技术，可以让你构建基于Java技术的Web应用，并打破了使用页面重载的惯例。
2. Ajax，异步JavaScript与XML，是使用客户端脚本与Web服务器交换数据的Web应用开发方法。这样，Web页面不用打断交互流程进行重新加裁，就可以动态地更新。使用Ajax，你可以创建接近本地桌面应用的，直接的、高可用的、更丰富的、更动态的Web用户接口界面。
3. 对于Mozilla﹑Netscape﹑Safari、Firefox等浏览器，创建XMLHttpRequest 方法如下:
xmlhttp_request = new XMLHttpRequest();
4. ＩＥ等创建XMLHttpRequest 方法如下：
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP")
或 xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
5. xmlhttp_request.open('GET', URL, true); xmlhttp_request.send(null);
6. open()的第一个参数是HTTP请求方式—GET，POST或任何服务器所支持的您想调用的方式。 按照HTTP规范，该参数要大写;否则，某些浏览器(如Firefox)可能无法处理请求。第二个参数是请求页面的URL。第三个参数设置请求是否为异步模式。如果是TRUE，JavaScript函数将继续执行，而不等待服务器响应。这就是"AJAX"中的"A"。
Ajax技术运用的好的话，给我们的网页增添了许多友好的效果，给用户还来更好的感觉。Ajax是个好东西。
————————————————————————————————————————
利用AJAX技术开发应用程序实战
AJAX，一个异步JavaScript和XML的缩略词，是当今快速发展的Web开发界十分热门的技术。在这项新技术提供巨大能力的同时，它也燃发了在"Back"按钮问题上的不容置疑的争论。本文作者将向你解释怎样在真实世界中使用AJAX以及怎样在一个工程中评估它的价值。在你读完本文后，你就会明白什么是AJAX，在什么情况下，为什么以及怎样使用这项技术。
一、 简介 AJAX，一个异步JavaScript和XML的缩略词，是最近出来的技术词语。异步意味着你可以经由超文本传输协议(HTTP)向一个服务器发出请求并且在等待该响应时继续处理另外的数据。这就意味着，例如，你可以调用一个服务器端脚本来从一个数据库中以XML方式检索数据，把数据发送到存储在一个数据库的服务器脚本，或者简单地装载一个XML文件以填充你的Web站点而不需刷新该页面。然而，在这项新技术提供巨大能力的同时，它也引起了在"Back"按钮问题上的很多争论。本文将帮助你确定在真实世界中何时使用AJAX是最佳选择。
首先，我假定你对缩略词JavaScript和XML部分有一个基本了解。尽管你能通过AJAX请求任何类型的文本文件，但是我在此主要集中讨论XML。我将解释怎样在真实世界中使用AJAX以及怎样在一个工程中评估它的价值。在你读完本文后，你将会明白什么是AJAX，在什么情况下，为什么以及怎样使用这项技术。你将要学习，在保持给用户提供直观体验的同时怎样创建对象，发出请求以及定制响应。
我已创建了一个适合于本文的示例工程(你可以下载源代码)。这个示例实现了一个简单的请求-它装载一个包含页面内容的XML文件并且分析数据以把它显示在一个HTML页面中。
二、 常规属性和方法 表1和2提供了一个属性和方法的概述-它们为 Windows Internet Explorer 5，Mozilla，Netscape 7，Safari 1.2，和 Opera 等浏览器所支持。
表1属性
| 属性 | 描述 |
| onreadystatechange | 当请求对象变化时该事件处理器激活。 |
| readyState | 返回指示对象的当前状态的值。 |
| responseText | 来自服务器的响应串的版本。 |
| responseXML | 来自服务器的响应的DOM兼容的文档对象。 |
| status | 来自服务器的响应的状态码。 |
| statusText | 以一个字符串形式返回的状态消息。 |
表2方法
| 方法 | 描述 |
| Abort() | 取消当前HTTP请求。 |
| getAllResponseHeaders() | 检索所有的HTTP头值。 |
| getResponseHeader("headerLabel") | 从响应体中检索一个HTTP头部的值。 |
| open("method","URL"[,asyncFlag[,"userName"[,"password"]]]) | 初始化一个MSXML2.XMLHTTP请求，并从该请求指定方法，URL和认证信息。 |
| send(content) | 发送一个HTTP请求到服务器并接收响应。 |
| setRequestHeader("label", "value") | 指定一个HTTP头的名字。 |
三、 从哪里开始 首先，你需要创建XML文件-后面我们对之进行请求并作为页面内容进行分析。你正在请求的文件必须与目标工程驻留在相同的服务器上。
下一步，创建发出请求的HTML文件。当页面通过使用页面主体中的onload方法进行加载时，该请求发生。接着，该文件需要一个有ID的div标签，这样当我们准备好要显示内容时就可以对之进行 定位 。当你做完所有这些，你的页面的主体看上去如下：
＜body onload="makeRequest('xml/content.xml');"＞
＜div id="copy"＞＜/div＞
＜/body＞ |
四、 创建请求对象 为了创建请求对象，你必须检查是否浏览器使用XMLHttpRequest或ActiveXObject。这两个对象之间的主要区别在于使用它们的浏览器。Windows IE 5 及以上版本使用ActiveX对象；而Mozilla，Netscape 7，Opera和Safari 1.2及以上版本使用XMLHttpRequest对象。另外一个区别是你创建对象的方式：Opera，Mozilla，Netscape和Safari允许你简单地调用该对象的构造器，但是Windows IE需要把对象的名字传递到ActiveX构造器中。下面是怎样创建代码来决定要使用哪个对象和怎样创建它的示例：
if(window.XMLHttpRequest)
{ request = new XMLHttpRequest();}
else if(window.ActiveXObject)
{ request = new ActiveXObject("MSXML2.XMLHTTP");} |
五、 发出请求 现在既然你已经创建了你的请求对象，那么你已经为向服务器发出请求作了准备。创建一个到事件处理器的参考以听取onreadystatechange事件。然后，该事件处理器方法将在状态发生变化时作出响应。一旦我们完成请求，我们就开始创建这个方法。打开连接以GET或POST一个定制的URL-在此是一个content.xml，并且设置一个布尔定义-是否你想要进行异步调用。
现在到了发出请求的时间了。在这个示例中，我使用了null，因为我们使用的是GET；为了使用POST，你需要使用下面这个方法发出一个查询串：
request.onreadystatechange = onResponse;
request.open("GET". url, true);
request.send(null); |
六、 定制加载和错误处理消息 你为onreadystatechange方法创建的事件处理器正是集中进行加载和处理错误的场所。现在到了考虑用户并针对他们与之交互的内容的状态提供反馈的时候了。在这个实例中，我针对所有的装载状态代码提供反馈，并且也对最经常发生的错误处理状态代码提供一些基本的反馈。为了显示请求对象的当前状态，readyState属性包括显示在下表中的一些值。
| 值 | 描述 |
| 0 | 未初始化，对象没有用数据进行初始化。 |
| 1 | 装载中，对象正在装载它的数据。 |
| 2 | 装载结束，对象完成了它的数据的装载。 |
| 3 | 可交互，用户能与对象交互了，尽管它还没有装载结束。 |
| 4 | 完成，对象已经完全被初始化。 |
W3C中有很长的一串有关HTTP状态代码的定义。我选择了两个状态代码:
·200:请求成功了。
·404:服务器没有找到与所请求的文件相匹配的任何东西。
最后，我检查任何另外的状况代码-它们将生成一个错误并提供一个一般错误信息。下面是一个代码示例-你可以用之来处理这些情况。注意，我在定位我们前面在HTML文件的主体中创建的div ID并且对它应用装载和/或错误信息-通过innerHTML方法-这个方法用于设置在div对象的开始和结束标签之间的HTML:
if(obj.readyState == 0)
{ document.getElementById('copy').innerHTML = "Sending Request...";}
if(obj.readyState == 1)
{ document.getElementById('copy').innerHTML = "Loading Response...";}
if(obj.readyState == 2)
{ document.getElementById('copy').innerHTML = "Response Loaded...";}
if(obj.readyState == 3)
{ document.getElementById('copy').innerHTML = "Response Ready...";}
if(obj.readyState == 4){
if(obj.status == 200){ return true; }
else if(obj.status == 404)
{
// 添加一个定制消息或把用户重定向到另外一个页面
document.getElementById('copy').innerHTML = "File not found";
}
else
{document.getElementById('copy').innerHTML = "There was a problem retrieving the XML."; }
} |
当状况代码为200时，这意味着请求成功。下面开始进行响应了。
七、 分析响应 当你准备好分析来自请求对象的响应时，真正的工作开始了。现在你可以用你请求的数据开始工作。仅为测试目的，在开发期间，可以使用responseText和responseXML属性来显示来自响应的原始数据。为了存取XML响应中的结点，首先使用你创建的请求对象，定位到responseXML属性以检索(你可能已经猜测出来)来自响应的XML。定位到documentElement-它检索一个到XML响应的根结点的参考。
| var response = request.responseXML.documentElement; |
现在既然你有了到响应的根结点的参考，那么你可以使用getElementsByTagName()以结点名字来检索childNodes。下面一行用一个头部的nodeName来定位一个childNode：
| response.getElementsByTagName('header')[0].firstChild.data; |
使用firstChild.data可以允许你存取该元素中的文本：
| response.getElementsByTagName('header')[0].firstChild.data; |
下面是怎样创建这些代码的完整的例子：
var response = request.responseXML.documentElement;
var header = response.getElementsByTagName('header')[0].firstChild.data;
document.getElementById('copy').innerHTML = header; |
八、 需求分析 现在既然你知道怎样使用AJAX的基础知识，那么下一步就是决定是否在一工程使用它。须记住的最重要的事情是，在你还没有刷新页面时你无法使用"Back"按钮。为此，可以先专注于你的工程中的一小部分-它能够从使用这种类型的交互中受益。例如，你可以创建一个表单-它在用户每次输入一个输入字段或一个字母时查询一个脚本以便进行实时校验。你可以创建一个拖放页面-在释放一项时，它能够把数据发送到一个脚本中并把该页面的状态保存到一个数据库中。使用AJAX的理由毫无疑问是存在的；并且这种使用无论对开发者还是用户都会带来益处；这全依赖于具体的条件和执行情况。
还有其它方法可用来解决"Back"按钮的问题，例如使用Google Gmail-它现在能够为你的操作提供一种撤消功能而不刷新该页面。以后还会出现许多更具创造性的例子-它们将通过提供给开发者创建独特实时的体验的手段给用户带来更大的好处。
九、 结论 尽管AJAX允许我们构建新的和改进的方式来与一个WEB页面进行交互；但是作为开发者，我们需要牢记产品是不考虑技术的；它关心的是用户以及其如何与用户进行交互。没有了用户群，我们构建的工程毫无用处。基于这个标准，我们就能评估应该使用什么技术以及何时使用它们来创建对相应用户有用的应用软件。
————————————————————————————————————————
————————————————————————————————————————