4、Ajax技术要点

1．实现原理

Ajax不是一种技术。实际上，它由几种蓬勃发展的技术以新的强大方式组合而成。Ajax包含：

·           基于XHTML（eXtensible HyperText Markup Language，可扩展超文本标记语言）和CSS（Cascading style Sheets，层叠样式表单）标准的表示；

·           使用DOM（Document Object Model，文档对象模型）进行动态显示和交互；

·           使用XMLHttpRequest与服务器进行异步通信；

·           使用JavaScript绑定一切。

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

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

   

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

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

 

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

⑴ 减轻服务器的负担。Ajax的原则是“按需取数据”，可以最大程度的减少冗余请求，和响应对服务器造成的负担。

⑵ 无刷新更新页面，减少用户心理和实际的等待时间。特别的，当要读取大量的数据的时候，不用像Reload那样出现白屏的情况，Ajax使用XMLHTTP对象发送请求并得到服务器响应，在不重新载入整个页面的情况下用JavaScript操作DOM最终更新页面。所以在读取数据的过程中，用户所面对的不是白屏，是原来的页面内容（也可以加一个Loading的提示框让用户知道处于读取数据过程），只有当数据接收完毕之后才更新相应部分的内容。这种更新是瞬间的，用户几乎感觉不到。

⑶ 带来更好的用户体验。

⑷ 可以把以前一些服务器负担的工作转嫁到客户端，利用客户端闲置的能力来处理，减轻服务器和带宽的负担，节约空间和宽带租用成本。

⑸ 可以调用外部数据。

⑹ 基于标准化的并被广泛支持的技术，不需要下载插件或者小程序。

⑺ 进一步促进页面呈现和数据的分离。

对服务器的请求是异步发送的，因此浏览器可以继续响应用户输入，同时在后台等待服务器的响应。如果选择同步操作，而且倘若服务器的响应要花几秒才能到达，浏览器就会表现得很迟钝，在等待期间不能响应用户的输入。这样一来，浏览器好像被冻住一样，无法响应用户输入，而异步做法可以避免这种情况，从而让最终用户有更好的体验。尽管这种改善很细微，但确实很有意义。这样用户就能继续工作，而且服务器会在后台处理先前的请求。

    与服务器通信而不打断用户的使用流程，这种能力使开发人员采用多种技术改善用户体验成为可能。例如，假设有一个验证用户输入的应用。用户在输入表单上填写各个字段时，浏览器可以定期地向服务器发送表单值来进行验证，此时并不打断用户，他还可以继续填写余下的表单字段。如果某个验证规则失败，在表单真正发送到服务器进行处理之前，用户就会立即得到通知，这就能大大节省用户的时间，也能减轻服务器上的负载，因为不必在表单提交不成功时完全重建表单的内容。

2．核心对象

XMLHttpRequest对象是Ajax技术的核心。为了让JavaScript可以向服务器发送HTTP请求，必须使用XMLHttpRequest对象。通过这个对象，Ajax可以像桌面应用程序一样只同服务器进行数据层面的交换，而不用每次都刷新界面，也不用每次将数据处理的工作都交给服务器来做，这样既减轻了服务器负担又加快了响应速度、缩短了用户等待的时间。创建一个XMLHttpRequest对象如下：

var xmlHttp;

function createXMLHttpRequest() {

if (window.ActiveXObject) {

           xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");

}

else if (window.XMLHttpRequest) {

           xmlHttp = new XMLHttpRequest();

}

}

首先，要创建一个全局作用域变量xmlHttp来保存这个对象的引用。createXMLHttpRequest方法完成创建XMLHttpRequest实例的具体工作。这个方法中只有简单的分支逻辑（选择逻辑）来确定如何创建对象。对window.ActiveXObject的调用会返回一个对象，也可能返回null，if语句会把调用返回的结果看作是true或false（如果返回对象则为true，返回null则为false），以此指示浏览器是否支持ActiveX控件，相应地得知浏览器是不是Internet Explorer。如果确实是，则通过实例化ActiveXObject的一个新实例来创建XMLHttpRequest对象，并传入一个串指示要创建何种类型的ActiveX对象。在这个例子中，为构造函数提供的字符串是Microsoft.XMLHTTP，这说明你想创建XMLHttpRequest的一个实例。

如果window.ActiveXObject调用失败（返回null），JavaScript就会转到else语句分支，确定浏览器是否把XMLHttpRequest实现为一个本地JavaScript对象。如果存在window.XMLHttpRequest，就会创建XMLHttpRequest的一个实例。

 

标准XMLHttpRequest操作

方    法	描    述
abort()	停止当前请求
getAllResponseHeaders()	把HTTP请求的所有响应首部作为键/值对返回
getResponseHeader("header")	返回指定首部的串值
open("method", "url")	建立对服务器的调用。method参数可以是GET、POST或PUT。url参数可以是相对URL或绝对URL。这个方法还包括3个可选的参数
send(content)	向服务器发送请求
setRequestHeader("header", "value")	把指定首部设置为所提供的值。在设置任何首部之前必须先调用open()

 

标准XMLHttpRequest属性

属    性	描    述
Onreadystatechange	每个状态改变时都会触发这个事件处理器，通常会调用一个JavaScript函数
readyState	请求的状态。有5个可取值：0 = 未初始化，1 = 正在加载，2 = 已加载，3 = 交互中，4 = 完成
responseText	服务器的响应，表示为一个串
response	服务器的响应，表示为XML。这个对象可以解析为一个DOM对象
Status	服务器的HTTP状态码（200对应OK，404对应Not Found（未找到），等等）
statusText	HTTP状态码的相应文本（OK或Not Found（未找到）等等）

3．交互过程

使用XMLHttpRequest对象来向服务器发出请求的执行过程大致如下：

⑴ 一个客户端事件触发一个Ajax事件

⑵ 创建XMLHttpRequest对象的一个实例。

⑶ 向服务器做出请求。

⑷ 服务器可以做你想做的事情，包括访问数据库，甚至访问另一个系统。

⑸ 请求返回到XMLHttpRequest对象。

⑹ 调用事件处理函数，向浏览器输出数据。

Ajax引擎成为了客户端与服务器端的中间层。传统的Web应用程序是将客户端的用户输入直接生成HTTP请求发送到服务器端，供服务器进行处理，处理完后，服务器端根据处理的结果返回相应的用户界面给客户端。而现在在使用了Ajax后，客户端的数据先被发送到Ajax引擎，由Ajax引擎生成XMLHttpRequest对象，利用XMLHttpRequest对象封装需要发往服务器端的数据，使用XMLHttpRequest对象发送数据与使用HTTP请求的最大不同在于，此时客户端的浏览器不会处于刷新状态，用户可以继续进行其他操作，这就是我们所强调的“异步”，用户不再与服务器处于同步运行状态了。当服务器端处理数据完毕，将往客户端返回页面时，也不再象以往一样直接就去更新整个浏览器页面了，而是将数据先送至Ajax引擎,由Ajax引擎来对浏览器进行刷新，这样就可以实现浏览器的局部刷新。这样一个执行过程，始终处于一种浏览器的无刷新的状态下，这样就使用户甚至察觉不到他们与服务器进行交互的过程，并且由于客户端与服务器所交互的只是数据信息而没有页面信息，这样就大大提高了Web应用程序的响应能力，综合这两点，便产生了如同桌面应用系统般的用户体验。