一、什么是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 对象
对比小结: