最近回归到原生JavaScript巩固基础，学习了原生JavaScript的ajax操作。
XMLHttpRequest对象
Ajax技术使用了浏览器提供的XMLHttpRequest对象用以完成与服务器的异步数据交互。
一个一般的流程是：
var xhr = new XMLHttpRequest(); //以构造函数的方式声明一个XHR对象
//这个对象拥有众多的属性和方法以及事件
//xhr.readyState属性表示请求/响应过程的当前活动阶段
//指定对象的onreadystatechange时间处理程序，以在xhr.readyState属性改变时进行操作;
xhr.onreadystatechange = function(){
if(xhr.readyState == 4){ //4代表完成。（接收失败也为4，所以需要进一步判断）
//xhr.status属性表示HTTP响应的状态，一般来说200表示成功接收到响应；304代表请求的资源没有改变，
//可以直接使用浏览器缓存的数据
if((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304){
console.log(xhr.responseText); //响应主体的内容都保存在responseText属性中
}else{
console.log("Request was unsuccessful: " + xhr.status); //打印查看HTTP响应状态码以确定错误
}
}
}
以上代码声明了XHR对象， 判断状态获得响应数据；
xhr.open("get","/root/example.php",true); //三个参数分别代表要发送的请求类型，url和是否异步发送
//xhr.open()发起了一个针对example.php的GET请求，还没有正式发送这个请求
xhr.send(null)
//xhr.send()才是正式发送了这个请求，其接收一个参数即作为请求主体要发送的数据。
以上为发送请求的行为代码。
XMLHttpRequest 2级
W3C组织标准化后的XMLHttpRequest版本，提出于2008年。
老版本的XMLHttpRequest对象有以下几个缺点：
- 只支持文本数据的传送，无法用来读取和上传二进制文件；
- 传送和接收数据时，没有进度信息，只能提示有没有完成；
- 受到“同域策略”限制，只能向同一域名的服务器请求数据
新版本的XMLHttpRequest对象做出了如下改进：
- 可以设置HTTP请求的时限；
- 可以使用FormData对象管理表单数据；
- 可以上传文件；
- 可以请求不同域名下的数据（跨域请求）；
- 可以获取服务器端的二进制数据；
- 可以获得数据传输的进度信息
超时设定
XMLHttpRequest 2级中XHR对象添加了一个timeout属性，单位为毫秒ms，表示在请求等待响应多少毫秒后就终止，防止长时间占用网络资源。如果在规定时间内浏览器还没有收到响应，则会出发xhr.ontimeout事件，可向其设置回掉函数。
xhr.open("get","http://192.168.1.9:8080/backendprogram",true);
xhr.timeout = 3000; //将超时设定为3秒
xhr.ontimeout = function(){
console.log("Response did not return in 3 seconds");
}
xhr.send(null);
进度事件
XMLHttpRequest 2级中XHR对象有一个progress事件，这个事件在浏览器接收新数据期间周期性地触发。而xhr.onprogress 事件处理程序将接收一个event对象，其loaded属性表示已加载的字节数，total属性表示总共需要加载的字节数。 需要注意的是progress事件必须在xhr.open( )方法前制定监听。
xhr.onprogress = function(event){
// lengthComputable属性是一个表示进度信息是否可用的布尔值，若响应的header未设置Content-Length则为 // false.
if(event.lengthComputable){
console.log(event.loaded/event.total);
}
}
xhr.open("get","someAPI",true);
xhr.send(null);
progress事件是根据响应的数据包周期性触发的，所以如果响应数据大小很小的话，只会在接收到相应的第一个字节后触发一次progress事件；此外，progress事件在使用file:协议的情况下是无效的。
参考文章：
