XMLHttpRequest简介

XMLHttpRequest是由微软提出的一个API接口，目的是为客户端提供与服务器之间传输数据的功能。XMLHttpRequest的特点是可以按需请求、局部刷新，不仅提高了服务器响应速度还可以避免不必要的宽带浪费。XMLHttpRequest提供了一个通过URL来获取数据的简单方式，通过它可以很容易的获取到URL上所有类型的资源数据。

XMLHttpRequest是什么

XMLHttpRequest 是一个JavaScript对象，得到了所有现代浏览器（Chrom、IE7+、Firefox、Safari 以及 Opera等）较好的支持并内建了XMLHttpRequest 对象，它定义了很多方法和属性方便用户配置发送各种请求。比如说可以设置请求的超时时间、获取请求进度信息、设置请求数据类型等，发送GET、POST、DELETE、HEAD、PUT等各种HTTP请求。

XMLHttpRequest对象方法

XMLHttpRequest对象创建可以通过new XMLHttpRequest()来实现，一个请求的实现至少需要使用open和send方法的使用。XMLHttpRequest支持以下几种方法，需要注意的是setRequestHeader()方法指定了HTTP请求的头部信息，需要在请求初始化之后发送之前定义。

XMLHttpRequest对象属性

onreadystatechange是一个事件句柄函数，当readyState属性发生变化时被调用以改变XMLHttpRequest 的状态。我们可以通过获取该对象的属性来分析请求的状态并做出相应的操作决策，也可以帮助开发者快速定位错误因素。

XMLHttpRequest监听事件

XMLHttpRequest对象提供了一系列监听事件来获取请求的当前状态，每个请求都以loadstart事件开始，以 loadend 事件结束。在这两个事件中间可以注册响应的监听事件来获取传输的状态，比如通过onprogress获取上传文件的进度，那么我们就可以注册一个onprogress 事件来监听当前进度。

xhr.upload.onprogress = e =>{
  if (e.lengthComputable) {
　　　　var progress = e.loaded / e.total;
　　}
}

发送GET请求接收二进制数据

这里我写了一个简单的页面载入时发送一个请求的示例，通过GET方法来获取后台的文件。在发送请求时可以设置一些请求头部信息，比如content-type、connection、cookie等信息。xhr提供了setRequestHeader来允许我们修改请求头部信息，第一个参数为请求头参数，第二个参数为对应的参数值。我们还可以指定接受返回的数据类型，xhr可以通过responseType属性指定数据类型为blob。老版本的 Internet Explorer不支持 XMLHttpRequest 对象，所以我们先检查浏览器是否支持 XMLHttpRequest 对象，如果不支持的话可以创建 ActiveXObject 对象。

发送POST请求上传文件

XMLHttpRequest新增formData对象，不仅可以发送文本数据还可以上传文件。这里我尝试实现文件上传功能，将二进制文件追加到formData对象，在发送的时候我们将formData对象提交即可。