Ajax快速入门
一、概述
Ajax是Asynchronous JavaScript and XML的缩写。Asynchronous，是任务的一种执行模式，程序的执行顺序与任务的排列顺序是不一致的、异步的。JavaScript，是程序的核心，用来进行交互以及通信的控制与实现。XML，是进行交互以及通信的数据格式，目前通常采用JSON的格式。
传统web应用，每次用户的交互都需要向服务器发送请求，服务器接收并处理请求之后，返回新的页面给客户端浏览器，在此期间用户必须等待页面重新绘制完成。
使用Ajax，用户的交互交给JavaScript来处理而不是直接发送给服务器，此时页面不进行刷新，在此期间用户可以继续进行页面交互。当服务器将数据返回给JavaScript时，可以局部更新页面，从而用户在页面没有提交或刷新就得到新的数据。
通过这种异步模式，使web应用程序像桌面应用程序一样，能够及时响应用户与服务器之间的交互，不必进行页面刷新或跳转，缩短等待时间，减轻服务器的负载。
二、原理
1、XMLHttpRequest对象
XMLHttpRequest对象是Ajax技术的核心，在IE 5中首次引入，是一种支持异步请求的技术。通过该对象，可以使用JavaScript向服务器提出请求并处理响应，而不阻塞用户的其他操作。
使用XMLHttpRequest对象向服务器发送请求和处理响应之前，必须先创建一个XMLHttpRequest对象。在不同的浏览器中，创建XMLHttpRequest对象的创建方式也不相同，所以需要对浏览器进行判断。
var xhr = new XMLHttpRequest();
或
var xhr = new ActiveXObject("Microsoft.XMLHTTP");
后者支持IE 5和IE 6。
2、发送请求
从表单获取数据：
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();
3、处理响应
判断响应是否处于就绪状态：
if (xhr.readyState === 4 && xhr.status === 200)
获得服务器的响应：
var response = xhr.responseText;
设置表单数据：
document.getElementById("zipCode").value = response;
三、改进的XMLHttpRequest
老版本的XMLHttpRequest对象存在很多缺点：
- 只支持文本数据的传送，无法读取和上传二进制文件
- 传送数据时，只能提示是否完成，没有进度信息
- 不支持跨域
新版本针对老版本的缺点，做出很大改进：
- 可以设置HTTP请求的时限
- 可以使用FormData对象管理表单数据
- 可以上传文件
- 可以获取二进制数据
- 可以获得数据传输的进度信息
- 支持跨域请求
1、HTTP请求时限
设置最长等待时间，超过这个时限，会自动停止HTTP请求：
xhr.timeout = 3000;
2、FormData对象
为了方便表单处理，新增FormData对象，可以模拟表单：
var formData = new FormData();
formData.append('username', 'sean');
formData.append('age', 20);
xhr.send(formData);
3、上传文件
要上传的文件是表单元素，所以可以将它放到FormData对象中，实现文件上传：
for (var i=0; i\<files.length; i++) {
formData.append('files[]', files[i]);
}
4、获取二进制数据
利用新增的responseType属性，指定服务器返回的数据类型，默认是text文本类型。如果设置为blob，表示服务器返回的是二进制对象。
xhr.responseType = 'blob';
还可以设置为arraybuffer，把二进制数据放在一个数组里：
xhr.responseType = "arraybuffer";
5、获取进度信息
传送数据时，使用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事件，传送结束
6、跨域请求
向不同域名的服务器发送HTTP请求，叫做跨域资源共享，简称CORS。前提是浏览器必须支持该功能，并且服务器端必须同意进行跨域。
xhr.open('GET', 'http://www.google.com/');
四、jQuery中的用法
1、load(url [, data] [, callback])
可以远程载入HTML，并插入到DOM中。常用来从服务器上获取静态的数据文件。load方法的传递方式根据参数data来自动指定。如果没有参数，则采用GET方式，否则会采用POST方式。
参数说明：
- url，服务端资源的url
- data，发送到服务器的key/value数据
- callback，请求完成时的回调函数
2、get(url [, data] [, callback] [, type])
使用GET方式进行异步请求。服务器的状态和应用的模型数据不受GET操作的影响。
参数说明：
- url，服务端资源的url
- data，以key/value的形式构造查询字符串添加到url
- callback，在请求成功时被调用，将请求结果和状态传递给该方法
- type，服务器端返回内容的格式
3、post(url [, data] [, callback] [, type])
使用POST方式进行异步请求。发送到服务器的数据可以用来修改应用的模型数据。
get和post方式的区别：
- GET请求会将参数放在url后进行传递；POST请求会作为HTTP的消息体发送给服务器。
- GET对传输的数据大小有限制，通常不大于2KB；POST方式传递的数据大小理论上不受限制。
- GET方式请求的数据会被浏览器缓存，可能会带来安全问题；POST方式不会被浏览器缓存。
4、getScript
用来加载js文件，js文件会自动执行。
5、getJSON
用来加载JSON文件。
6、ajax(options)
是jQuery最底层的实现。参数包含了所需要的请求设置以及回调函数，以key/value形式存在。
选项：
- url，发送请求地址
- type，请求方式，默认为GET
- data，发送到服务器的key/value数据
- dataType，服务器返回的数据类型
- complete，请求完成后的回调函数。参数是XMLHttpRequest对象和一个描述成功请求类型的字符串
- success，请求成功的回调函数。参数是服务器返回的数据和描述状态的字符串
- error，请求失败时调用的函数。参数是XMLHttpRequest对象、错误信息和捕获的错误对象
- contentType，发送信息给服务器时的内部编码类型
- jsonp，在jsonp请求中替代callback的名称
参考资料：
