XMLHttpRequest（xhr）方法详解

XMLHttpRequest

发展历程

  XMLHttpRequest一开始只是微软浏览器提供的一个接口，后来各大浏览器纷纷效仿也提供了这个接口，再后来W3C对它进行了标准化，提出了XMLHttpRequest标准。XMLHttpRequest标准又分为Level 1和Level 2。

• XMLHttpRequest Level 1主要存在以下缺点：

1、受同源策略的限制，不能发送跨域请求；
2、不能发送二进制文件（如图片、视频、音频等），只能发送纯文本数据；
3、在发送和获取数据的过程中，无法实时获取进度信息，只能判断是否完成；

• Level 2中新增了以下功能：

1、可以发送跨域请求，在服务端允许的情况下；
2、支持发送和接收二进制数据；
3、新增formData对象，支持发送表单数据；
4、发送和获取数据时，可以获取进度信息；
5、可以设置请求的超时时间；

如何与服务端通信

我们与服务器通信的API就是XMLHttpRequest。
1、新建XMLHttpRequest对象

var xhr=new XMLHttpRequest();
//IE 7以下： 
var xhr=new ActiveXObject("Microsoft.XMLHTTP");

2、打开要发送的地址通道。

xhr.open(“GET”,地址,同步/异步)；

open方法的参数主要包括：
  DOMString method
  DOMString url
  optional boolean async
  optional DOMString user
  optional DOMString password

3、给XMLHttpRequest对象增加侦听器，用来侦听各种情况，包括各种链接状态

xhr.addEventListener(“load”,侦听函数)发送数据给打开的地址，

4、如果有必要的话可以添加请求头

xhr.setRequestHeader(“content-type”,”application/x-www-form-urlencoded”)

 大多数请求头并不是必需的，但Content-Length除外。对于POST请求来说Content-Length必须出现。

5、如果没有要发送的内容直接send（）

xhr.send();

send(ArrayBuffer data);类型化数组
send(Blob data);二进制大对象，是一个可以存储二进制文件的容器。
send(Document data); 文档对象
send(DOMString? data); 文本数据
send(FormData data); 数据对象，可以直接封装内容

其他方法：

6、abort()
 该方法将终止请求，如果该请求已被发出。当一个请求被终止，它的 readyState 属性将被置为0（ UNSENT ），但是并不触发 readystatechange 事件。

7、timeout事件
当进度由于预定时间到期而终止时，会触发timeout 事件。

 xhr.addEventListener(“timeout”,timeoutHandler);

8、xhr.timeout = 2000(必须设置在open以后，send之前)

 一个无符号长整型数，代表着一个请求在被自动终止前所消耗的毫秒数。默认值为 0，意味着没有超时。超时并不应该用在一个 document environment 中的同步 XMLHttpRequests 请求中，否则将会抛出一个 InvalidAccessError 类型的错误。当超时发生， timeout 事件将会被触发。

9、FormData

var formData = new FormData();
formData.append("username", "zhangsan");
formData.append("age", "18");
request.send(formData);