Ajax概述及XMLHttpRequest实现

一、Ajax概述

1、什么是Ajax

Ajax的全称：Asynchronous JavaScript And XML，可以说是已有技术的集合。主要用来实现客户端与服务器的异步通信效果，实现页面的局部刷新，也即，允许浏览器与服务器通信而无需刷新当前页面。在Ajax模型中，数据在客户端与服务器之间独立传输，服务器不再返回整个页面。

所谓异步，简单的解释是：向服务器发送请求时，不必等待结果，可以同时做其他事情，等有了结果自己会进行后续操作，与此同时，页面不会发生整页刷新，提高了用户体验。

普通B/S模式（同步） vs Ajax技术（异步）：

同步：提交请求->等待服务器处理->处理完毕返回（期间客户端浏览器不能干任何事）

异步：请求通过事件触发->服务器处理（此时浏览器仍然可以作其他事情）->处理完毕

2、不用刷新整个页面便可与服务器通信的方法

（1）Flash

（2）Java applet

（3）框架：若使用了一组框架构造了一个网页，可以只更新其中一个框架，而不必惊动整个页面。

（4）隐藏的ifame

（5）XMLHttpRequest：该对象是对JavaScript的一个扩展，可以使网页与服务器进行通信，是创建Ajax应用的最佳选择。实际上通常把Ajax当成是XMLHttpRequest的代名词。

 

3、Ajax应用实例

Google Suggest & Google Maps

 

4、Ajax的工作原理

客户端<-------------------------->传输<----------------------------->服务器端

html, xhtml, css, javascript 协议：xmlhttp php， jsp,asp,Ruby等输出结果。

载体：txt,html,xml,json等。      

 

5、Ajax工具包

（1）服务器端语言：服务器需要向具备向浏览器发送特定信息的能力，Ajax与服务器端语言无关。

（2）2XML：描述数据的格式，Ajax程序需要某种格式化的格式在服务器和客户端之间传递信息，XML是一种选择。

（3）XHTML：标准化呈现。

（4）DOM：实现动态显示和交互。

（5）使用XMLHTTP组件XMLHttpRequest对象进行异步数据读取。

（6）使用JavaScript绑定和处理所有数据。

 

6、Ajax的缺陷

（1）由JavaScript和Ajax引擎导致的浏览器的兼容，但jQuery、ext等js框架可以很好地解浏览器兼容性问题。

（2）破坏浏览器后退按钮的正常行为，在动态更新页面的情况下，用户无法回到前一个页面状态，因为浏览器仅能记下历史记录中的静态页面。

（3）对流媒体的支持没有FLASH和Java Applet好。

（4）一些手持性设备（如手机、PDA等）支持性差，但在B-S架构中可以放心使用）。

（5）Ajax的无刷新重载使得页面的变化没有刷新重载那么明显，所以容易给用户带来困扰——用户不太清楚现在的数据是旧的还是已经更新过的。现有的解决方案有：在相关位置提示、数据更新的区域设计得比较明显、数据更新后给用户提示等。

 

二、Ajax使用XMLHttpRequest实现

1、XMLHttpRequest的概述

XMLHttpRequest对象：由于非标准所以实现方法不统一，IE把XMLHttpRequest实现为一个ActiveX对象；其他浏览器把XMLHttpRequest实现为一个本地的JavaScript对象）：

虽然创建的方式不一样，但是属性和方法是一样的。也就是说，XMLHttpRequest在不同浏览器上的实现是兼容的，所以可以用同样的方法访问XMLHttpRequest实例的属性和方法，而不论这个实例创建的是什么。

 

2、XMLHttpRequest的方法

（1）abort()：停止当前请求。

（2）getAllResponseHeader()：把HTTP请求的所有响应首部作为键/值对返回。

（3）getResponseHeader()：返回指定首部的串值。

（4）open("method","url")：method参数可以是GET，POST或PUT，url参数可以是相对URL或绝对URL。

（5）send(content)：向服务器发送请求。

（6）setRequestHeader("header","value")：在POST请求中，把指定首部设置为所提供的值，在设置任何首部之前必须先调用open()。

 

3、XMLHttpRequest的属性

（1）onreadystatechange：每个状态改变是都会触发这个事件处理器，通常会调用一个JavaScript函数。

（2）readyState：请求的状态，5个取值——0=未初始化，1=正在加载，2=已经加载，3=交互中，4=完成。

（3）responseText：服务器的响应，表示为一个串。

（4）responseXML：服务器的响应，表示为XML，这个对象可以解析为DOM对象。

（5）status：服务器的HTTP状态码（200对应OK，404对应NotFound等）。

（6）statusText：HTTP状态码的相应文本（OK或NotFound等）。

 

4、创建Ajax的步骤

(1)获取节点，并为其添加onclick属性。

(2)取消节点的默认行为。

(3)创建一个异步调用对象XMLHttpRequest。

(4)设置准备发送请求的url和method。

(5)调用XMLHttpRequest对象的open()方法，创建一个新的HTTP请求。

(6)调用XMLHttpRequest对象的send()方法，发送HTTP请求。

(7)为XMLHttpRequest对象添加请求状态变化的函数onreadystatechange。

(8)判断响应是否完成：XMLHttpRequest对象的readyState属性值为4。

(9)判断响应是否可用：XMLHttpRequest对象的status属性值为200或304。

(10)获取异步调用返回的数据：XMLHttpRequest对象的responseText属性。

(11)使用JavaScript和DOM实现局部刷新。

5、3个关键部分

（1）onreadystatechange

由服务器触发，而不是用户。

在Ajax执行过程中，服务器会通知客户端当前的通信状态，这依靠更新XMLHttpRequest对象的readyState属性来实现。改变readyState属性时服务器对客户端连接操作的一种方式，每次readyState属性的改变都会触发readystatechange事件。

（2）open(method,url,asynch)

允许程序员用一个Ajax调用向服务器发送请求。

method：若只想从服务器检索一个文件而不需要发送任何数据，使用GET，当然可以在GET请求里通过附加在URL上的查询字符串来发送数据，不过数据大小限制为2000个字符；若需要发送数据，使用POST。

在某些情况下，有些浏览器会把多个XMLHttpRequest请求的结果缓存在同一个URL，若对每个请求的响应不同，会带来不好的结果，因此尝常常将时间戳追加到URL的最后，这样能确保URL的唯一性，从而避免浏览器缓存结果。

url：路径字符串，指向所请求的服务器的文件。

asynch：表示请求是否要异步传输，默认值为true，指定true表示在读取后面的基本之前，不需要等待服务器的响应，指定false表示当脚本处理过程经过该点时会停下来一直等到Ajax请求执行完毕再继续执行。

（3）send(data)

open()定义Ajax请求的一些细节，send()为已经待命的请求发送指令。

data：将要传递给服务器的字符串，对于GET请求传递null即可，若向send()方法提供参数则要确保open()中指定的方法是POST。

 

6、接收响应

（1）readyState

readyState属性表示Ajax请求的当前状态，它的值用数字代表（0表示未初始化，还没有调用open方法；1表示正在加载，open方法已被调用，但send方法还没调用；2表示已加载完毕，send已被调用，请求已经开始；3表示交互中，服务器正在发送响应；4表示完成，响应发送完毕）。

每次readyState的值的改变，都会触发onreadystatechange事件，若把onreadystatechange事件处理函数赋给一个函数，那么每次readyState值的改变都会引发该函数的执行。

readyState的值的改变会因浏览器不同而有所差异，但是当请求结束时，每个浏览器都会把readyState的值统一设为4。

（2）status

服务器发送的每一个响应都带有首部信息，三位数的状态码是最重要的首部信息，并且属于超文本传输协议的一部分（404表示没找到页面，403表示禁止访问；200表示一切正常；500表示内部服务器出错；304表示未被修改）。

在XMLHttpRequest对象中，服务器发送的状态码都保存在status属性里，通过把这个值和200或304比较可以确保服务器是否已经发送了一个成功的响应。

（3）resposeText

包含了从服务器返回的数据，它是一个HTML、XML或普通文本，这取决于服务器发送的内容。

当readyState属性变为4的时候，resposeText属性才可用，表明Ajax请求已经结束。

（4）responseXML

若服务器返回的是XML，那么数据将存储在responseXML属性中。

只在服务器发送了带有正确首部信息的数据时，responseXML属性才是可用的，MIME类型必须为text/xml。

 

7、发送请求

setRequestHeader(header,value);

当浏览器向服务器请求页面时，它会伴随这个请求发送一组首部信息。这些首部信息是一系列描述请求的元数据（metadata），首部信息用来声明一个请求是GET还是POST。

header：首部的名字。

value：首部的值。

若用POST请求向服务器发送数据，需要将"Content-Type"的首部设置为"application/x-www-form-urlencoded"，它会告知服务器正在发送数据，并且数据已经符合URL编码了。

这个方法必须在open()之后才能调用。