XMLHttpRequest对象

先抛出问题：咱们如何使用JS脚原本发起一个http请求?

首先应该请楚，咱们在使用浏览器浏览网页时，实际上是浏览器帮咱们发起一个又一个请求，唰唰唰~想象一下，当输入地址按下回车开始（其实在webkit的实现中，当咱们输入地址时，浏览器已经在开始作地址匹配，DNS预查了..），一个GET请求便发起了，通过一系列的解析最终到达服务器（其中过程网上有不少版本，包括从键盘按下开始解释，这个不是咱们如今的重点哈），服务器再返回咱们想要的资源。
那么，前端如何使用本身的代码发送请求，获得本身想要的数据呢？除了使用style / script / img 这些标签，它们能够由浏览器解析并发出请求。若是咱们本身程序中须要数据，后端给咱们接口，咱们该如何获取呢？

写在前面：这篇文章不涉及兼容问题，只是为了了解XMLHttpRequest对象及其属性方法，还有请求过程当中的事件对象查看。对于跨域这些问题，会陆续总结出来。其中参考了不少MDN的文档，去掉了mozilla自用的非标准方法。这里讲的是通用的标准内容。

DOM标准中定义了一个XMLHttpRequest类型的对象，提供前端开发中发出请求的接口。我在控制台中打出来，一块儿来看看：

 
 
 
 

  
  
  
  

  
  
  
  

 
 
 
 
var xhr=new XMLHttpRequest(); console.log(xhr);

abort getAllResponseHeaders getResponseHeader open overrideMimeType send setRequestHeader

一个个解释过来：

注：在MDN中咱们还能够看到XMLHttpRequestEventTarget的介绍，当时看到顺手翻译了，当回头想一想，以前真的不知道这个对象是在哪里用的。它实际上是一个描述事件处理程序的接口，其中有onabort / onerror / onload / onloadstart / onprogress / ontimeout /onloadend 这些用来指定发生相关事件时执行的方法。在chrome中，从原型链往上追溯，咱们的确能够看到XMLHttpRequest的原型的原型是一个XMLHttpRequestEventTarget对象。在firefox中，咱们依然能够看到该对象中的这些属性，但chrome中是没有的，由于咱们也看到了，这些属性现在都被定义在XMLHttpRequest对象中了。google了一下，大体看到的都是关于要取消这个对象的文章。先无论了，反正都是作的事件处理的事情，并且浏览中看到都在XMLHttpRequest对象中。

属性：

• onbort: 当请求失败时调用该方法
• onerror: 当请求发生错误时调用该方法
• onload: 当一个HTTP请求正确加载出内容后返回时调用
• onloadstart: 当一个HTTP请求开始加载数据时调用
• onprogress: 间歇调用该方法用来获取请求过程当中的信息
• ontimeout: 当时间超时时调用；只有经过设置XMLHttpRequest对象的timeout属性来发生超时时，这种状况才会发生
• onloadend: 当内容加载完成，无论失败与否，都会调用该事件
• onreadystatechange: 当readystatechange发生改变时调用该方法
• readystate: 请求状态

  0: open()方法还未被调用
  1: send()方法还未被调用
  2: send()方法已经被调用，响应头和相应状态已经返回
  3: 响应体下载中,responseText中已经有了部分数据
  4: 整个请求过程完毕

• response: 是一个类型为ArrayBuffer,Blob,Document的javascript对象或字符串，这取决于responseType的值。它包含了响应主体，若是没有东西返回则该值为null
• responseText: 一个包含响应文本的字符串，若是没有东西返回则该值为null
• responseType: 可能为'' / 'arraybuffer' / blob / document / json / text 中的一个

  '': 默认值，表示响应主体类型为DOMString，关于DOMString类型，它就是一个utf-16的字符串，相似javascript使用的string类型，DOMString直接映射为一个字符串
  ArrayBuffer: 响应主体类型为ArrayBuffer，ArrayBuffer用来表示一个定长的原始二进制buffer
  Blob: 响应主体类型为Blob，Blob类型用来表示定长原始二进制的类文件对象(file-like)
  document: 相应主体类型为Document, 即文档对象
  json: 响应主体类型为json
  text: 响应主体为DOMString

• responseURL:
• responseXML: 一个文档对象。当请求不成功、请求尚未被发送时，或不能被解析为XML或HTML时，返回null.
• status: 一个短整形，用来表示请求的响应状态
• statusText: 字符串，用来描述请求的响应状态
• timeout: 无符号长整形，表示还有多少毫秒请求将被自动终止，为0时表示没有超时
• upload: 是一个XMLHttpRequestUpload对象, 用来表示相应体的下载进度
• withCredentials: 一个布尔值，用来表示一个跨域请求是否使用了如cookies或认证头部的证书，默认为false

从上图看到，XMLHttpRequest构造方法的原型中，定义了几个常量，这些常量就是上面说到的一些状态码，除此以外，它定义了XMLHttpRequest对象用到的方法，一块儿看看：
方法：

• abort()：此方法用来终止一个已经发送的http请求
• getAllResponseHeaders(): 返回全部的响应头部，若是没有响应则该值为null.值得注意的是，若是是multipart形式的请求，那么返回值指的是当前响应的部分数据的头部
• getResponseHeader(DOMString header): 返回特定的请求头部，没有则为null
• open(DOMString method, DOMString url, optional boolean async, optional DOMSring? user, optional DOMString? password): 初始化一个http请求
• overrideMimeType(DOMString mime): 以指定的类型强制处理响应内容，该方法应在send()以前调用
• send([ArrayBuffer data / Blob data / Document data / DOMString? data / FormData data]): 发送请求。若是请求为异步的（也就是默认值），这个方法将在发送请求后马上返回。若是是同步请求，该方法会直到响应到达后才返回。

  不建议使用文本类型的ArrayBuffer做为参数，由于它已经不是XMLHttpRequest的一部分了。使用ArrayBufferView替代它。
  若是数据是一个文档对象，会在发出以前进行序列化。

• setRequestHeader(DOMString header, DOMString value): 设置请求头部

说了这么多概念性的东西，写个请求试试:

get请求

 
 
 
 

  
  
  
  

  
  
  
  

  
  
  
  

  
  
  
  

  
  
  
  

  
  
  
  

  
  
  
  

  
  
  
  

  
  
  
  

 
 
 
 
var xhr=new XMLHttpRequest();xhr.onreadystatechange=function(e){ console.log(e); if(xhr.readyState==4 && xhr.status==200){ console.log(xhr.responseText); }}xhr.open('get','./data.json');xhr.send();

先看看event中的东西：

每次readyState改变时，event对象清楚地记录了当前事件的状况，如不冒泡、没有取消冒泡、事件不能被取消、当前的目标是XMLHttpRequest对象、没有阻止默认事件、事件传播的当前阶段、是否返回值，发生时刻，事件名称等等状况。
我以前老是简单认为事件目标都是在某个DOM节点上，其实并非这样，由于就像这个http请求，它就是由一个XMLHttpRequest对象发起的。

来自为知笔记(Wiz)