Ajax-XMLHttpRequest学习笔记

最近回归到原生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:协议的情况下是无效的。

---

参考文章：

• XMLHttpRequest Level 2 使用指南 - 阮一峰
• 你真得会使用XMLHttpRequest吗？