深入了解AJAX

转载请注明链接、原作者。

AJAX允许浏览器在无需刷新的情况下，异步的更新界面。

1、AJAX的特点

(1) 无刷新的更新数据

(2) 与服务器进行异步通信

(3) 破坏了浏览器机制

在无刷新更新页面数据的情况下，用户无法返回上一个页面状态，因为浏览器仅能记忆历史记录中的静态页面。

(4) 安全问题

伪造AJAX请求的方式引发了一定的安全问题，不要认为每个请求都是真实合理的，例如用户可以自行发送AJAX请求到服务器端，从而绕过前端的数据检查。针对这一问题，需要在服务器端保留数据的逻辑验证。其次的安全问题一般有sql注入、跨站信息伪造等等。

2、AJAX通信原理

AJAX是使用XMLHttpRequest对象发送http请求并接收响应。XMLHttpRequest是一个JS对象，可以使用JS对象的方法与事件。

3、AJAX浏览器兼容性

AJAX浏览器兼容性表现在IE浏览器和其他浏览器对XMLHttpRequest这个对象的实现上。

IE浏览器：             ActiveXObject('Microsoft.XMLHTTP')

其他浏览器：         XMLHttpRequest

4、AJAX规范

AJAX规范共分为两级。

AJAX一级存在着一些限制：

(1) 受同源策略限制，不允许发送跨域请求；

(2) 只能发送文本数据；

(3) 无法获得进度信息，只能知晓AJAX请求是否完成。

AJAX二级优化了一级时存在的限制，同时新增了两个功能。

(1) 允许发送跨域请求，将是否接收跨域请求交由服务器端判定;

(2) 除原本支持的文本数据外，还允许发送二进制数据（具体表现在图片、视频、音频上）；

(3) 解决了无法获得AJAX进度的问题。

(4) 新增formData对象，允许发送表单数据；

(5) 可以设置请求超时的超时时长。

5、AJAX通信流程

AJAX的通信可以分为发送、监听、接收服务器响应数据三大步骤。

(1) 发送

这个阶段向服务器发起请求，请求的类型有GET\POST\HEAD\DELETE等。请求的同时会携带数据进行发送。

(2) 监听

发送请求后，AJAX处理器将进入监听状态，等待来自服务器的响应。

(3) 接收响应

服务器一旦响应，意味着服务器端将告知本次AJAX请求处理后的结果，例如这是一个查询请求，那么服务器端响应的将是本次查询的结果；或者这是一个删除操作请求，那么服务器端响应的将是本次删除操作是否成功的一个结果。

AJAX处理器将接收这个结果。

6、AJAX请求的连接状态

XMLHttpRequest对象的readyState记录了AJAX请求的连接状态。它有五个属性值：

值	含义
0	未打开，请求未初始化
1	未发送，但服务器连接已经建立
2	请求已经接收，响应头和响应状态已经返回
3	请求处理，主要任务是下载响应体，此时responseText中已有部分内容
4	请求已完成，整个请求过程已经完毕

7、XHR对象触发事件顺序

7.1、XHR部分代码实现

interface XMLHttpRequestEventTarget : EventTarget {
	// event handlers
	attribute EventHandler onloadstart;
	attribute EventHandler onprogress;
	attribute EventHandler onabort;
	attribute EventHandler onerror;
	attribute EventHandler onload;
	attribute EventHandler ontimeout;
	attribute EventHandler onloadend;
};

interface XMLHttpRequestUpload : XMLHttpRequestEventTarget {

};

interface XMLHttpRequest : XMLHttpRequestEventTarget {
	// event handler
	attribute EventHandler onreadystatechange;
	readonly attribute XMLHttpRequestUpload upload;
};

代码分析：

(1) onreadystatechange是XMLHttpRequest独有的事件

(2) XMLHttpRequest与XMLHttpRequestUpload都继承自XMLHttpRequestEventTarget，因此除了xhr之外，xhr内部定义的upload属性也具备XMLHttpRequestEventTarget所定义的七个事件。

7.2 XHR对象事件归纳

由7.1分析可得，XHR对象事件共包括以下几个：

（1）XHR自带事件

xhr.onreadystatechange

（2）XHR继承事件

1、xhr.onloadstart

2、xhr.onprogress

3、xhr.onload

4、xhr.onloadend

5、xhr.onabort

6、xhr.onerror

7、xhr.ontimeout

（3）XHR自带属性upload事件

1、xhr.upload.onloadstart

2、xhr.upload.onprogress

3、xhr.upload.onload

4、xhr.upload.onloadend

5、xhr.upload.onabort

6、xhr.upload.onerror

7、xhr.upload.ontimeout

7.3事件触发条件

事件	触发条件
xhr.onreadystatechange	每当xhr.readyState改变时触发；但xhr.readyState由非0值变为0时不触发。
xhr.onloadstart	调用xhr.send()方法后立即触发，若xhr.send()未被调用则不会触发此事件。
xhr.upload.onprogress	在上传阶段，即xhr.send()之后，xhr.readystate=2之前触发，每50ms触发一次。
xhr.onprogress	在下载阶段，即xhr.readystate=3时触发，每50ms触发一次。
xhr.onload	当请求成功完成时触发，此时xhr.readystate=4
xhr.onloadend	当请求结束（包括请求成功和请求失败）时触发
xhr.onabort	当调用xhr.abort()后触发
xhr.ontimeout	xhr.timeout不等于0，由请求开始即onloadstart开始算起，当到达xhr.timeout所设置时间请求还未结束即onloadend，则触发此事件。
xhr.upload.onerror	若发生网络错误时，上传还没有结束，则会先触发该事件。
xhr.onerror	(1) 在触发xhr.upload.onerror后，会触发xhr.onerror； (2) 若发生网络错误时，上传已经结束，则只会触发xhr.onerror (3) 当且仅当发生网络错误时才会触发此事件，应用层错误（如状态码返回4XX）不会触发该事件。

7.4 正常请求事件触发顺序

当请求一切正常时，相关的事件触发顺序如下：

(1) 触发xhr.onreadystatechange(之后每次readyState变化时，都会触发一次)

(2) 触发xhr.onloadstart

//上传阶段开始：

(3) 触发xhr.upload.onloadstart

(4) 触发xhr.upload.onprogress

(5) 触发xhr.upload.onload

(6) 触发xhr.upload.onloadend

//上传结束，下载阶段开始：

(7) 触发xhr.onprogress

(8) 触发xhr.onload

(9) 触发xhr.onloadend

7.5 异常请求事件顺序

一旦发生abort或timeout或error异常，先立即中止当前请求

将 readystate 置为4，并触发xhr.onreadystatechange事件

如果上传阶段还没有结束，则依次触发以下事件：

xhr.upload.onprogress

xhr.upload.[onabort或ontimeout或onerror]

xhr.upload.onloadend

触发xhr.onprogress事件

触发xhr.[onabort或ontimeout或onerror]事件

触发xhr.onloadend事件

8、XHR对象常用属性

8.1、 xhr.readyState

XHR对象的状态，共有0-4五个值，分别表示XHR对象处于何种状态。

8.2、 xhr.status

服务器返回的状态码，即响应结果码，例如200（ok）、404（not found）等。

8.3、 xhr.statusText

服务器返回的状态文本，一般是状态码的含义，如ok、not found等。

8.4、 xhr.responseText

服务器返回的文本数据。

8.5、 xhr.responseXML

服务器返回的XML数据。

9、XHR对象常用方法

9.1、 xhr.abort();

如果请求已经被发送,则立刻中止请求。

9.2、 xhr.open(method,url, async, user, password);

建立一个连接。

9.3、 xhr.setRequestHeader(label,value);

设置请求头，需要在send之前进行设置。

9.4、 xhr.send(content);

content只有在post请求时才生效。该方法用以发送请求。

9.5、xhr.getResponseHeader(headerName);

根据headerName值获得指定响应头。

9.6、xhr.getAllResponseHeader();

获得所有响应头。

10、参考资料

1、聊聊Ajax那些事——铁狮子

https://segmentfault.com/a/1190000006669043

2、你真的会使用XMLHttpRequest吗？——WEB前端路上踩过的坑儿

https://segmentfault.com/a/1190000004322487

3、XMLHttpRequest Level2 使用指南——阮一峰的网络日志

http://www.ruanyifeng.com/blog/2012/09/xmlhttprequest_level_2.html