突破：Ajax请求

==> 本人文章纯属我的理解，若有差池万望斧正<==

Ajax的介绍

Ajax请求是现代网页最重要的构成元素之一，经过这项技术，用户能够在不重载整个页面的状况下，完成局部数据的交互与刷新。若是这项功能不存在，那每一次向服务器申请数据，全部内容都须要从新下载、排列。
虽然听上去这是一个凌驾于网页规则之上的高阶技术。但本质上它仍然是http请求，或者说主要以该请求为载体，这个请求能够具有HTTP请求的全部特征，如：请求行，请求头，请求体。并开放了一些可供开发者自定义的内容。咱们不须要关心XMLHttpRequest实例的具体实现方式，只须要了解——这个请求帮你向服务器传达什么？它返回的响应如何处理？
Ajax请求通常以DOM的某个事件驱动，如加载完毕，点击等

Ajax的流程

一个完整的Ajax具备如下4个执行步骤：

1，建立实例
Ajax经过XMLHttpRequest()的实例来实现，其中XML是一种经典的、标准的、兼容性强的数据存储格式。但当下的主要网络传输方式，大都以更加轻量、易读的JSON进行。IE6及IE5并不支持该实例的建立，若是考虑到兼容上述浏览器，能够建立ActiveXObject("Microsoft.XMLHTTP") 实例。经常使用的兼容写法以下：

try{
    var xhr = new XMLHttpRequest()
}catch{
    var xhr = new ActiveObject('Microsoft.XMLHTTP')
}
--------------------------
var xhr
if(window.XMLHttpRequest){
    xhr = new XMLHttpRequest()
}else{
    xhr = new ActiveObject('Microsoft.XMLHTTP')
}

2，定义请求内容
经过实例.open(请求方法，请求URL，是否异步) 定义请求的发送方式和内容，与HTTP请求不一样的是，Ajax仅可使用get或post两种请求方法；请求URL同HTTP标准；请求行中，用于填写协议版本的部分，此处能够忽略或写入一个布尔值。布尔值默认为true，此时请求被异步处理，若是为false则进行同步处理。

当同步处理进行时，页面的其余行为将陷入停滞没法被触发，由于JS的线程正在被占用，直到Ajax收到响应数据或失败结果后才会恢复。这种请求可用于移动端APP，你在看到滚动条或loading图时，任何动做都不会被浏览器捕获到，由于此时的浏览器无暇顾及你的其余命令。
虽然JS是单线程，但浏览器不是，因此当异步操做时，发送后进入等待状态的Ajax会被浏览器开启另外一个线程挂起，收到回复后，会把这个Ajax结果放回JS主线程队列的末端。这时不会影响到页面的其余行为。如：在视频缓存的同时，仍然能够查看陈大脸先生播放列表里都是哪些老师的做品。

xhr.open('GET','http://www.nichousha.com',true)

• 定义请求头

实例.setRequestHeader(请求头键，请求头值) 基本不会用到的方法，但它的存在可以强化对Ajax本质的了解，即Ajax是一种具备较高完整度的，特殊的HTTP请求，你能够只定义几个关键内容就能正常地发送了。

3，发送请求
实例.send(请求体) 能够发送此次请求，若是请求的方法是post，此处能够写入请求体。若是向服务器发送的请求不涉及过于复杂的内容。此处能够send空值并使用get方法加问号传参的方式发送。为了保障兼容性，若是get方法发送空值，此处建议写入null。如：实例.send(null)

xhr.send(null)

4，接收并处理响应
确认Ajax是否收到结果取决于两个具体条件：Ajax状态码和http请求状态码。这个判断由onreadystatechange触发，每当Ajax进行到一个阶段都会触发这个状态码改变事件，并产生一次判断，Ajax对应0-4共5个状态码：
（0）未初始化
（1）正在send发送
（2）完成send发送
（3）请求处理中
（4）请求完成或失败，已收到确切响应
Ajax状态码（readyState）结果必定为4，才能断定为成功。此时咱们还没法证明它是否带回了咱们想要的结果，由于它可能兴致冲冲地迎上去，却遭遇了404这种不友善错误的无情拒绝。因此这时还须要第二层判断： http请求状态码（status）
若是请求被顺利返回，此时的http状态码必定是200。
*假如缺乏对http请求状态码的二次判断，onreadystatechange会分别在Ajax状态码1，2，3的改变事件触发后进行完整的Ajax结果处理，至关于你在碗里什么东西都没有的状况下进食了约45分钟。

xhr.onreadystatechange = function(){
    if(xhr.readyState == 4 && xhr.status == 200){
    //处理结果
    }
}

Ajax的钩子

ES标准中，还定义了一部分Ajax实例发送过程的阶段型事件。经常使用的：如强制终止，最大时限，对不一样结果的处理等...

绝对事件：

1.实例.onloadstart
当Ajax请求被发起，就会触发这个钩子

2.实例.onprogress(event)
进度访问，该钩子能够周期性地访问两个属性：loaded和total（当前量传输和总量）通常用于显示一个较大文件的上传进度。

2.实例.onloadend
不管成功或是失败，Ajax最终都会得到一个必然结果，并触发这个钩子。

3.实例.onload
成功地获取了预期的请求结果。

4.实例.onerror
返回的实例并非一个正确的结果

意外事件：

1.实例.ontimeout
设置最大时限，配合 实例.timeout = 毫秒数，当Ajax超时，触发这个钩子

2.实例.onabort
请求终止，当实例.abort()终止请求时，触发该钩子

xhr.timeout = 1000;
xhr.ontimeout = function(){
    alert('已超时')
}

Ajax的结果处理

Ajax得到的结果能够是XML或JSON，前者调用responseXML直接解析为DOM对象。JSON则能够被responseText转换为字符串格式