Ajax

一、什么是Ajax
Ajax：是一种不用刷新整个页面便可与服务器通讯的办法。
图1 Web的传统模型。客户端向服务器发送一个请求，服务器返回整个页面，如此反复

图2 在Ajax模型中，数据在客户端与服务器之间独立传输。服务器不再返回整个页面
二、Ajax工具包
Ajax并不是一项新技术，它实际上是几种技术，每种技术各尽其职，以一种全新的方式聚合在一起。
①服务器端语言：服务器需要具备向浏览器发送特定信息的能力。Ajax与服务器端语言无关。
②XML (eXtensible Markup Language，可扩展标记语言) 是一种描述数据的格式。Aajx 程序需要某种格式化的格式来在服务器和客户端之间传递信息，XML 是其中的一种选择
③XHTML（eXtended Hypertext Markup Language,使用扩展超媒体标记语言）和 CSS（Cascading Style Sheet,级联样式单）标准化呈现；
④DOM（Document Object Model,文档对象模型）实现动态显示和交互；
⑤使用XMLHTTP组件XMLHttpRequest对象进行异步数据读取
⑥使用JavaScript绑定和处理所有数据

三、Ajax的缺陷
AJAX不是完美的技术。使用AJAX，它的一些缺陷不得不权衡一下：
①由 Javascript 和 AJAX 引擎导致的浏览器的兼容
②页面局部刷新，导致后退等功能失效。
③对流媒体的支持没有FLASH、Java Applet好。
④一些手持设备（如手机、PDA等）支持性差。

四、创建 XMLHttpRequerst 对象
为了每次写Ajax的时候都节省一点时间，可以把对象检测的内容打包成一个可复用的函数：

说明：对 window.XMLHttpRequest 的调用会返回一个对象或null，if语句会把调用返回的结果看作是true或false（如果返回对象则为true，返回null则为false）。如果 XMLHttpRequest 对象存在，则把 xhr 的值设为该对象的新实例。如果不存在，就去检测 ActiveObject 的实例是否存在，如果答案是肯定的，则把微软 XMLHTTP 的新实例赋给xhr。

五、XMLHttpRequest的方法

XMLHttpRequest的属性

六、发送请求
（一）利用XMLHttpRequest 实例与服务器进行通信包含以下3个关键部分：
①onreadystatechange 事件处理函数
②open 方法
③send 方法

（二）open(method, url, asynch)
①XMLHttpRequest 对象的 open 方法允许程序员用一个Ajax调用向服务器发送请求。
②method：请求类型，类似 “GET”或”POST”的字符串。若只想从服务器检索一个文件，而不需要发送任何数据，使用GET(可以在GET请求里通过附加在URL上的查询字符串来发送数据，不过数据大小限制为2000个字符)。若需要向服务器发送数据，用POST。
③在某些情况下，有些浏览器会把多个XMLHttpRequest请求的结果缓存在同一个URL。如果对每个请求的响应不同，就会带来不好的结果。在此将时间戳追加到URL的最后，就能确保URL的唯一性，从而避免浏览器缓存结果。
④url：路径字符串，指向你所请求的服务器上的那个文件。可以是绝对路径或相对路径。
⑤asynch：表示请求是否要异步传输，默认值为true。指定true，在读取后面的脚本之前，不需要等待服务器的相应。指定false，当脚本处理过程经过这点时，会停下来，一直等到Ajax请求执行完毕再继续执行。

（三）send(data)：
①open 方法定义了 Ajax 请求的一些细节。send 方法可为已经待命的请求发送指令
②data：将要传递给服务器的字符串。
③**若选用的是 GET 请求，则不会发送任何数据， 给 send 方法传递 null 即可：**request.send(null);
④当向send()方法提供参数时，要确保open()中指定的方法是POST，如果没有数据作为请求体的一部分发送，则使用null.
⑤完整的 Ajax 的 GET 请求示例：

七、接受相应的请求
（一）

（二）readyState

（三）status

（四）responseText


（五）responseXML

八、数据格式
（一）HTML


（二）XML

（三）JSON
①JSON（JavaScript Object Notation）一种简单的数据格式，比xml更轻巧。JSON是JavaScript原生格式，这意味着在JavaScript中处理JSON数据不需要任何特殊的API或工具包。
②JSON的规则很简单：对象是一个无序的“‘名称/值’对”集合。一个对象以“{”（左括号）开始，“}”（右括号）结束。每个“名称”后跟一个“:”（冒号）；“‘名称/值’对”之间使用“,”（逗号）分隔。

示例：


③解析JSON
JSON 只是一种文本字符串。它被存储在 responseText 属性中

为了读取存储在 responseText 属性中的 JSON 数据，需要根据 JavaScript 的 eval 语句。**函数 eval 会把一个字符串当作它的参数。然后这个字符串会被当作 JavaScript 代码来执行。**因为 JSON 的字符串就是由 JavaScript 代码构成的，所以它本身是可执行的

代码实例：

JSON提供了json.js包，下载http://www.json.org/json.js后，使用parseJSON()方法将字符串解析成 JS 对象

对比小结：