AJAX异步详解

AJAX 全称 Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。它并非一种新的技术，而是以下几种原有技术的结合体。

1) 使用CSS和XHTML来表示。

2) 使用DOM模型来交互和动态显示。

3) 使用XMLHttpRequest来和服务器进行异步通信。

4) 使用javascript来绑定和调用。

通过AJAX异步技术，可以在客户端脚本与web服务器交互数据的过程中使用XMLHttpRequest对象来完成HTTP请求(Request)/应答(Response)模型：

1) 不需要用户等待服务端响应。在异步派发XMLHttpRequest请求后控制权马上就被返回到浏览器。界面不会出现白板，在得到服务器响应之前还可以友好的给出一个加载提示。

2) 不需要重新加载整个页面。为XMLHttpRequest注册一个回调函数，待服务器响应到达时，触发回调函数，并且传递所需的少量数据。“按需取数据”也降低了服务器的压力。

3) 不需要使用隐藏或内嵌的框架。在XHR对象之前，模拟Ajax通信通常使用hack手段，如使用隐藏的或内嵌的框架(<iframe>标签)。

下面介绍下AJAX中的重要对象：XMLHttpRequest。

XMLHttpRequest对象(XHR)

XMLHttpRequest是一套可以在Javascript、VbScript、Jscript等脚本语言中通过http协议传送或接收XML及其他数据的一套API。

XMLHttpRequest对象首次以ActiveX对象形式在微软Internet Explorer(IE) 5中以引入。其他浏览器制造商在认识到这一对象重要性后也纷纷实现了XMLHttpRequest对象，但是以一个本地JavaScript对象而不是作为一个ActiveX对象实现。而如今，由于安全性、标准等问题，微软已经在其IE 7中把XMLHttpRequest实现为一个本地JavaScript对象。

一个简单的ajax封装：

使用：

XMLHttpRequest Level 2

XMLHttpRequest是一个浏览器接口，使得Javascript可以进行 HTTP (S) 通信。但是，这个接口一直没有标准化，每家浏览器的实现或多或少有点不同。HTML 5 的概念形成后，W3C 开始考虑标准化这个接口。2008年 2 月，提出了XMLHttpRequest Level 2 草案。

1. 老版本的缺点

老版本的XMLHttpRequest对象有以下几个缺点：

1) 只支持文本数据的传送，无法用来读取和上传二进制文件。

2) 传送和接收数据时，没有进度信息，只能提示有没有完成。

3) 受到"同域限制"（Same Origin Policy），只能向同一域名的服务器请求数据。

2. 新版本的功能

新版本的XMLHttpRequest对象，针对老版本的缺点，做出了大幅改进。

1) 可以设置 HTTP 请求的时限。

2) 可以使用FormData对象管理表单数据。

3) 可以上传文件。

4) 可以请求不同域名下的数据（跨域资源共享，Cross-origin resource sharing，简称 CORS）。

5) 可以获取服务器端的二进制数据。

6) 可以获得数据传输的进度信息。

3. 介绍几个XMLHttpRequest Leve2 新增的成员

4. 一个新功能实例

1) 接收二进制数据（方法A：改写MIMEType）

老版本的XMLHttpRequest对象，只能从服务器取回文本数据。但我们可以改写数据的MIMEType，将服务器返回的二进制数据伪装成文本数据，并且告诉浏览器这是用户自定义的字符集。

关键代码如下：

服务端

客服端

浏览器会把相应数据当做文本数据接收，所以我们还必须再一个个字节地还原成二进制数据。位运算"c & 0xff"，表示在每个字符的两个字节之中，只保留后一个字节，将前一个字节扔掉。原因是浏览器解读字符的时候，会把字符自动解读成Unicode 的 0xF700-0xF7ff 区段。

截图如下：（测试环境：google Chrome 版本 26.0.1410.43）

服务器端返回二进制数据：

客服端输出：

a) 使用mimeType: 'text/plain; charset=x-user-defined'参数。

b) 没有对服务器的MIME类型进行重写，导致返回信息被浏览器格式化后输出的二进制数据与服务器不同。并且不同浏览器格式化后输出的二进制数据都有差异。

2) 接收二进制数据（方法B：responseType属性）

在XMLHttpRequest Level2中，可以使用新增的responseType属性从服务器取回二进制数据。把responseType设为 blob，表示服务器传回的是二进制对象。

接收数据的时候，用浏览器自带的 Blob 对象即可。注意，读取的xhr.response，而不是xhr.responseText。

还可以将responseType设为arraybuffer，把二进制数据装在一个数组里。然后再遍历这个数组。

5. 更多XMLHttpRequest Level 2新功能描述请看：

1) XMLHttpRequest 增强功能

2) XMLHttpRequest Level 2 使用指南

3) XMLHttpRequest2 新技巧

jQuery框架的Ajax

jQuery是一个快速、简单的JavaScript library，核心理念是write less,do more(写的更少,做的更多)。它简化了HTML 文件的traversing，事件处理、动画、Ajax 互动，从而方便了网页制作的快速发展。jQuery是为改变你编写JavaScript 的方式而设计的。更多jQuery科普知识请看：jQuery百度百科(Eg：模块，历史版本)

下面介绍下jQuery框架中ajax相关API:

版本Jquery-1.7.1.js。

1. jQuery.ajax( [url,] options )

通过 HTTP 请求加载远程数据。

返回值：$.ajax() 返回jqXHR对象（jqXHR对象：为XMLHttpRequest对象的超集）。可用于手动终止请求abort()、为ajax函数设置额外的回调函数等。

ajax内部实现的两个重要对象：s对象和jqXHR对象。

1) s对象

由默认设置jQuery.ajaxSettings对象、options参数集合和jQuery.ajaxSetup({})默认设置合并而成s对象。

2) jqXHR对象

为不同浏览器内置的XMLHttpRequest提供了一致的超集。对于XMLHttpRequest之外的传输机制，比如JSONP请求，jXHR对象也可以进行处理。

jqXHR对象我们常常使用如下成员，这些成员主要用于ajax的全局事件和局部事件，并且做为$.ajax()函数返回值返回。

另外，jqXHR的全部成员如下：

在图中我们看到一些陌生的函数，比如：done()、fail()、promise()、isResolve()、isRejected()、then()、always()、progress()等，都是jQuery的deferred对象API。

开发网站的过程中，我们经常遇到某些耗时很长的javascript操作。其中，既有异步的操作（比如ajax读取服务器数据），也有同步的操作（比如遍历一个大型数组），它们都不是立即能得到结果的。

通常的做法是，为它们指定回调函数（callback）。即事先规定，一旦它们运行结束，应该调用哪些函数。但是，在回调函数方面，jQuery的功能非常弱。为了改变这一点，jQuery开发团队就设计了deferred对象。

简单说，deferred对象就是jQuery的回调函数解决方案。在英语中，defer的意思是"延迟"，所以deferred对象的含义就是"延迟"到未来某个点再执行。 它解决了如何处理耗时操作的问题，对那些操作提供了更好的控制，以及统一的编程接口。

更专业的资源：jQuery的deferred对象详解

2. jQuery Ajax事件

jQuery框架中，伴随Ajax请求会触发若干事件，我们可以订阅这些事件并在其中处理我们的逻辑。在jQuery中有两种Ajax事件：局部事件和全局事件。

1) 局部事件（回调函数），在$.ajax()方法的options参数中声明，可以用来设置请求数据和获取、处理响应数据。

定义方式例如：

2) 全局事件，每次Ajax请求都会触发，它会向DOM中的所有元素广播，你只需为DOM中任意元素bind好全局事件即会触发（若绑定多次，则会依次触发为事件注册的回调函数）。

全局事件在jQuery中的声明方式：

所以我们可以使用下面两种方式定义全局事件：

3) ajax方法完整的事件流

4) 示例：$.ajax()触发的事件(局部事件和全局事件)

效果图：

5) $.ajax()方法的全局事件典型用例

你的页面存在多个甚至为数不少的ajax请求，但是这些ajax请求都有相同的消息机制。ajax请求开始前显示一个提示框，提示“正在读取数据”；ajax请求成功时提示框显示“数据获取成功”；ajax请求结束后隐藏提示框。

a) 不使用全局事件的做法是：

给$.ajax()加上beforeSend、success、complete回调函数，在回调函数中加上处理提示框。

b) 使用全局事件的做法是：

3. jQuery ajax相关函数

1) jQuery.ajaxSetup({ })

jQuery.ajax()函数中的所有的参数选项都可以通过jQuery.ajaxSetup()函数来全局设置默认值。

2) $.ajax()函数的封装

a) $("").load(url [,params] [,callback])

请求远程的HTML文件代码(dataType: "html")，默认使用 GET 方式，如果传递了params参数则使用Post方式。在请求“成功”完成时将responseText属性值插入至DOM中。但不管请求是否成功完成“在最后”都会执行callback回调函数(即：complete:callback)。

b) jQuery.get(url [,data] [,callback] [,type] )

通过HTTP GET请求载入数据，并在请求成功时执行回调函数（即：success: callback）。

c) jQuery.getJSON(url [,callback] )

通过 HTTP GET 请求载入 JSON 数据。相当于: jQuery.get(url,[data],[callback],"json")

可以通过使用JSONP 形式的回调函数来加载其他网域的JSON数据。

d) jQuery.getScript(url [,callback] )

通过 HTTP GET 请求载入并执行一个 JavaScript 文件。相当于: jQuery.get(url,null,"script")

可以跨域调用 JavaScript 文件。

e) jQuery.post(url [,type] )

通过 HTTP POST 请求载入信息，并在请求成功时执行回调函数（即：success: callback）。

3) 对象序列化

a) jQuery.param(object,traditional)

创建数组或对象的序列化表示，该序列化可在ajax请求时在URL查询字符串中使用。

对于 jQuery 1.4，$.param() 方法将会通过深度递归的方式序列化对象，以便符合现代化脚本语言的需求，比如 PHP、Ruby on Rails 等。你可以传递traditional = true 或在ajax功能中传递包含traditional的options参数。

传送门：$.param()深度递归详解和$.param() 示例

b) $("").serializeArray()

可以将一个或多个表单元素（比如 input、 textarea等），或者 form 元素本身的jQuery对象序列化为JSON对象。（非 JSON 字符串。需要使用插件或者第三方库进行字符串化操作）

特别说明，元素不能被禁用（禁用的元素不会被包括在内），并且元素应当有含有 name 属性。提交按钮的值也不会被序列化。文件选择元素的数据也不会被序列化。

传送门：$("").serializeArray() 示例

c) $("").serialize()

可以将一个或多个表单元素（比如 input、 textarea等），或者 form 元素本身的jQuery对象序列化为经过URL编码转换后的字符串，可直接用在URL查询字符串中。

jQuery内部定义：

传送门：$("").serialize()示例

$.ajax()中常见应用示例

1. cache和ifModified参数

1) cache参数：GET和POST最重要的区别（传送门）

语义上，GET是获取指定URL上的资源，是读操作，重要的一点是不论对某个资源GET多少次，它的状态是不会改变的，在这个意义上，我们说GET是安全的（不是被密码学或者数据保护意义上的安全）。因为GET是安全的，所以GET返回的内容可以被浏览器，Cache服务器缓存起来。

而POST的语意是对指定资源“追加/添加”数据，所以是不安全的，每次提交的POST，参与的代码都会认为这个操作会修改操作对象资源的状态，于是，浏览器在你按下F5的时候会跳出确认框，缓存服务器不会缓存POST请求返回内容。

2) ifModified参数：通过ifModified参数提高请求性能（即：“条件GET”：Last-Modified / If-Modified-Since和ETag / If-None-Match）

当你请求的资源并不是一层不变的时候，即不能简单的一直使用客户端缓存时，你可能通过将cache设置为false来发送请求，这实际上是在url加上时间戳组合成新的url，每次发送新的请求，这明显加大了服务器的压力。

对于这种情况，我们可以通过ifModified参数改进缓存方式（即：cache和ifModified都设置为true），仅在请求的数据改变时重新获取。通过这种方式请求的url不会改变，并且每次都会发送到服务器，只是会有检验方法验证是否需要重新获取数据从而节省带宽和开销。

更多ETag描述（优点，解决了Last-Modified无法解决的一些问题，什么场合不应该被使用）

过程如下：

a) 将$.ajax()函数的cache和ifModified参数同时设置为true。

b) 客户端请求服务端A，在服务端加上Last-Modified/ETag响应体一起返回。

c) 客户端缓存接收到的Last-Modified/ETag响应体，并在下一次发生请求A时将缓存的Last-Modified/ETag值做为If-Modified-Since/IF-None-Match请求头一起发给服务器。

d) 服务器接收If-Modified-Since/IF-None-Match后，就根据参数值检验自上次客服端请求之后资源是否有改动

i. 若还未改动则直接返回响应304和一个空的响应体。

ii. 若已改动则重新处理数据，返回最新的请求数据。

e) 这样，既保证不向客户端重复发出资源，也保证当服务器有变化时，客户端能够得到最新的资源。

这一过程中，我们只需要做：服务器返回Last-Modified/ETag响应头和在服务端检验数据是否失效并采取对应处理方式。其余步骤由jQuery框架的ajax()函数完成。

关键代码如下：

客服端：

服务端：

2. 跨域请求

在JavaScript中，有一个很重要的安全性限制，被称为“Same-Origin Policy”（同源策略）。这一策略对于JavaScript代码能够访问的页面内容做了很重要的限制，即JavaScript只能访问与包含它的文档在同一域下的内容。所谓同源是指，域名(host)，协议(protocol)，端口(port)相同。

1) $.ajax()为我们提供了两种解决方案，不过都是只支持get方式，分别是jQuery的jQuery.ajax“jsonp”格式和jquery.getScript()（即jQuery.ajax “script”格式）方式。

2) $.ajax()跨域原理分析

由于javascript的安全限制“同源策略”，所以我们无法使用XMLHttpRequest直接请求别的域名下的资源。不过拥有src属性和href属性的<script>&;img>&;iframe>和<link>&;a>标签不受同源策略影响。$.ajax()提供的两种解决方案正是应用了动态创建<script>的方式来实现（即：生成<script>标签，src引入脚本，然后执行，最后移除<script>标签）。

3) jQuery.ajax()的jsonp和script方式的异同点：

a) 相同：都走$.ajax() script格式的流程；不会触发全局事件和局部事件；只支持GET方式（POST请求会自动转化为GET请求）；默认不启用缓存(cache:false)

b) 不同：jsonp方式可以通过jsonp和jsonpCallback参数指定一个特定回调函数。

4) 示例部署说明：

因为是跨域请求，所以需要在本机部署两个示例程序以模拟不同域之间的访问，并且在示例代码中需要修改“crossUrl”为目的域路径。

5) jsonp示例代码：

客服端：

服务端：

分析：

a) 因jsonp和jsonpCallback参数而改变的url如下。（即默认为：callback=jQuery随机值，更改为：jsonpParamName=crossCallback）

URL:http://192.168.1.100:6567/AjaxHandler.ashx?func=CrossRequest&jsonpParamName=crossCallback&_=1368360234428

b) 服务器端获取到jsonp回调函数名后，返回一个函数表达式。

6) 在XMLHttpRequest Level 2中新增了跨域访问方式、接收二进制等新功能，详细请看：XMLHttpRequest2 新技巧

最后，再来一张示例截图吧！！！

示例源码：触碰jQuery：AJAX异步详解.rar

本篇博文到此结束，主要介绍内容是使用XMLHttpRequest实现ajax请求和XMLHttpRequest Level 2为我们所带来的改进，最后重点讲解了jQuery中通过$.ajax()方法实现ajax以及各个参数的详细介绍，并立举了经典示例说明了：跨域请求、ajax全局事件、ajax局部事件、xhr二进制数据处理、如何高效使用缓存……

做为一个后台工程师，你是否想深入了解一些前台必须的技术呢？是的，我想了解，并且会慢慢把所了解到的技术以博文的方式整理分享给大家。

谢谢大家查阅，如果觉得文章不错，还请多多帮推荐……

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!