Ajax快速入门

1、概述

Ajax是Asynchronous JavaScript and XML的缩写。Asynchronous，是任务的一种执行模式，程序的执行顺序与任务的排列顺序是不一致的、异步的。JavaScript，是程序的核心，用来进行交互以及通讯的控制与实现。XML，是进行交互以及通讯的数据格式，目前一般采用JSON的格式。

传统web应用，每次用户的交互都须要向服务器发送请求，服务器接收并处理请求以后，返回新的页面给客户端浏览器，在此期间用户必须等待页面从新绘制完成。

使用Ajax，用户的交互交给JavaScript来处理而不是直接发送给服务器，此时页面不进行刷新，在此期间用户能够继续进行页面交互。当服务器将数据返回给JavaScript时，能够局部更新页面，从而用户在页面没有提交或刷新就获得新的数据。

经过这种异步模式，使web应用程序像桌面应用程序同样，可以及时响应用户与服务器之间的交互，没必要进行页面刷新或跳转，缩短等待时间，减轻服务器的负载。

2、原理

一、XMLHttpRequest对象

XMLHttpRequest对象是Ajax技术的核心，在IE 5中首次引入，是一种支持异步请求的技术。经过该对象，可使用JavaScript向服务器提出请求并处理响应，而不阻塞用户的其余操做。

使用XMLHttpRequest对象向服务器发送请求和处理响应以前，必须先建立一个XMLHttpRequest对象。在不一样的浏览器中，建立XMLHttpRequest对象的建立方式也不相同，因此须要对浏览器进行判断。

var xhr = new XMLHttpRequest();

或

var xhr = new ActiveXObject("Microsoft.XMLHTTP");

后者支持IE 5和IE 6。

二、发送请求

从表单获取数据：

var city = document.getElementById("city").value;

创建要链接的URL：

var url = "/pages/getCity.html?city=" + escape(city)

打开服务器链接：

xhr.open("GET", url, true);

最后一个参数设为true，表示请求一个异步链接；若是设为false，表示发送请求后将等待服务器返回的响应。

设置链接以后服务器要进行的处理：

xhr.onreadystatechange = updatePage;

属性onreadystatechange告诉服务器处理完请求以后，执行哪些操做。

发送请求：

xhr.send();

三、处理响应

判断响应是否处于就绪状态：

if (xhr.readyState === 4 && xhr.status === 200)

得到服务器的响应：

var response = xhr.responseText;

设置表单数据：

document.getElementById("zipCode").value = response;

3、改进的XMLHttpRequest

老版本的XMLHttpRequest对象存在不少缺点：

• 只支持文本数据的传送，没法读取和上传二进制文件
• 传送数据时，只能提示是否完成，没有进度信息
• 不支持跨域

新版本针对老版本的缺点，作出很大改进：

• 能够设置HTTP请求的时限
• 可使用FormData对象管理表单数据
• 能够上传文件
• 能够获取二进制数据
• 能够得到数据传输的进度信息
• 支持跨域请求

一、HTTP请求时限

设置最长等待时间，超过这个时限，会自动中止HTTP请求：

xhr.timeout = 3000;

二、FormData对象

为了方便表单处理，新增FormData对象，能够模拟表单：

var formData = new FormData();
formData.append('username', 'sean');
formData.append('age', 20);
xhr.send(formData);

三、上传文件

要上传的文件是表单元素，因此能够将它放到FormData对象中，实现文件上传：

for (var i=0; i\<files.length; i++) {
  formData.append('files[]', files[i]);
}

四、获取二进制数据

利用新增的responseType属性，指定服务器返回的数据类型，默认是text文本类型。若是设置为blob，表示服务器返回的是二进制对象。

xhr.responseType = 'blob';

还能够设置为arraybuffer，把二进制数据放在一个数组里：

xhr.responseType = "arraybuffer";

五、获取进度信息

传送数据时，使用progress事件，返回进度信息。它分上传和下载两种状况：下载属于XMLHttpRequest对象，上传属于XMLHttpRequest.upload对象。

定义progress事件的回调函数：

xhr.onprogress = updateProgress;
xhr.upload.onprogress = updateProgress;

在回调函数中，处理事件：

function updateProgress(event) {
  if (event.lengthComputable) {
    var percentComplete = event.loaded / event.total;
  }
}

与progress事件相关的其余事件：

• load事件，传送成功完成
• abort事件，传送被用户取消
• error事件，传送中出现错误
• loadStart事件，传送开始
• loadEnd事件，传送结束

六、跨域请求

向不一样域名的服务器发送HTTP请求，叫作跨域资源共享，简称CORS。前提是浏览器必须支持该功能，而且服务器端必须赞成进行跨域。

xhr.open('GET', 'http://www.google.com/');

4、jQuery中的用法

一、load(url [, data] [, callback])

能够远程载入HTML，并插入到DOM中。经常使用来从服务器上获取静态的数据文件。load方法的传递方式根据参数data来自动指定。若是没有参数，则采用GET方式，不然会采用POST方式。

参数说明：

• url，服务端资源的url
• data，发送到服务器的key/value数据
• callback，请求完成时的回调函数

二、get(url [, data] [, callback] [, type])

使用GET方式进行异步请求。服务器的状态和应用的模型数据不受GET操做的影响。

参数说明：

• url，服务端资源的url
• data，以key/value的形式构造查询字符串添加到url
• callback，在请求成功时被调用，将请求结果和状态传递给该方法
• type，服务器端返回内容的格式

三、post(url [, data] [, callback] [, type])

使用POST方式进行异步请求。发送到服务器的数据能够用来修改应用的模型数据。

get和post方式的区别：

• GET请求会将参数放在url后进行传递；POST请求会做为HTTP的消息体发送给服务器。
• GET对传输的数据大小有限制，一般不大于2KB；POST方式传递的数据大小理论上不受限制。
• GET方式请求的数据会被浏览器缓存，可能会带来安全问题；POST方式不会被浏览器缓存。

四、getScript

用来加载js文件，js文件会自动执行。

五、getJSON

用来加载JSON文件。

六、ajax(options)

是jQuery最底层的实现。参数包含了所须要的请求设置以及回调函数，以key/value形式存在。

选项：

• url，发送请求地址
• type，请求方式，默认为GET
• data，发送到服务器的key/value数据
• dataType，服务器返回的数据类型
• complete，请求完成后的回调函数。参数是XMLHttpRequest对象和一个描述成功请求类型的字符串
• success，请求成功的回调函数。参数是服务器返回的数据和描述状态的字符串
• error，请求失败时调用的函数。参数是XMLHttpRequest对象、错误信息和捕获的错误对象
• contentType，发送信息给服务器时的内部编码类型
• jsonp，在jsonp请求中替代callback的名称

---

参考资料：

阮一峰：XMLHttpRequest Level 2 使用指南