AJAX原理及XMLHttpRequest对象分析

今天的主题是前端都了解的AJAX，但其中都有哪些知识点，还需要深入分析。

首先揭示AJAX的字面意思，Asynchronous Javascript And XML，通俗点就是“异步Javascript和XML”。

那有同步的吗？曾经的form提交并转到另一个页面刷新就是这种‘同步’的案例，有了AJAX后，便可以实现网页不提交(刷新)更新网页内容。

其实质便是依赖异步的Javascript请求网络，响应返回后，通过Javascript操作DOM接口更新HTML节点内容。

而这个能够实现异步的Javascript对象便是XMLHttpRequest。

真正实现异步的并不是XMLHttpRequest对象本身，而且浏览器内核会针对XHR对象的请求另起一个线程进行处理，处理完成后将回调对象放入JS队列。

下面介绍一些XMLHttpRequest对象的基本内容。

XMLHttpRequest对象在W3C标准下提供了很多属性。其中包括：

https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest

onreadystatechange 用于监听readyState状态变化

reponseText　响应返回文本

reponseXML   响应格式化为XML返回内容

status HTTP状态码

statusText HTTP状态码文本值

readyState XMLHttpRequest对象的状态

上述这些都是经常用到的属性，其中两个状态值再分类描述一下：

status：HTTP状态码

1xx：服务器临时响应

2xx：服务器成功响应

3xx：服务器重定向

4xx: 客户端请求错误

5xx: 服务器内部错误

readyState ：

0：XMLHttpRequest对象已实例化，但未初始化open

1：对象已初始化open，但未send

2：对象已send，但status状态未知

3：对象已接收到部分数据

4：对象成功接收完成数据

通过上面介绍之后，我们可以利用XMLHttpRequest来实现一段异步请求并刷新局部页面的功能。

这里不考虑XMLHttpRequest在浏览器间的兼容性。

var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function(){
    if(xhr.readyState == 4 && xhr.state == 200){
        handleHTML(xhr.responseText);
    }
}
xhr.open('get', url, true);

xhr.send();

上例就是一个简单的XMLHttpRequest对象使用。还可以使用post方式实现类似form数据的提交。

var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function(){
    if(xhr.readyState == 4 && xhr.state == 200){
        handle(xhr.responseText);
    }
}
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhr.send("param1=1&param2=2");

上面是XMLHttpRequest Level 1的一些使用方式。虽然功能简单，但是解决了早期很多问题，主要包括：

1.XMLHttpRequest是异步的，请求无需等待，可以提供良好的体验；

2.无需刷新页面，可提高网页加在效率，降低服务器压力；

3.解决了以往需要依靠隐藏iframe实现异步请求的问题。

但是依然存在一些缺陷，比如：

1.受到同源策略的限制，无法实现跨域请求；

2.无法实现文件的上传及其进度；

3.无法获取服务器二进制数据；

4.自身不支持超时处理。

针对上述问题，Level 2还未出来前，前端一直采用特殊的作法，针对每一点：

1.采用JSONP，即<script>标签避开同源策略，实现跨域请求(JSOP知识点有可扩展空间)

2.未知

3.修改mimeType将二进制数据伪装成text，然后再代码中还原二进制数据(mimeType: 'text/plain; charset=x-user-defined')

4.添加setTimeout处理

但Level 2出来以后，上述这些问题都已解决，而且扩展了一下属性：

1.responseType/response，可支持二进制数据，ByteArray/Blob/File;

2.添加了xhr.upload对象，支持上传，还有progress事件可监听上传下载进度。

下面针对上传贴出一个小例子，在此基础上配合服务器编程可实现大文件断点续传。

var xhr = new XMLHttpRequest();
xhr.open('POST', url, true);
xhr.onload = function (e){
    // 当前文件块上传完，可开始上传下一块
}
xhr.upload.onprogress = function(e){
// e.loaded 当前文件块上传字节数
    // e.totalSize 当前文件块总字节数
}
// 可设置一定超时，如果超时可调节发次发送的文件块大小
xhr.send(trunck);

以上是对XMLHttpRequest对象的大概分析，其规范中包括大量属性和接口，请参考对应内容。