XMLHttpRequest

一直使用axios进行http配置，发现自己最基础的AJAX的内容忘记了。复习下。

1.XMLHttpRequest

• XMLHTTP最初是由微软公司发明的，在Internet Explorer 5.0中用作ActiveX对象，可通过JavaScript、VBScript或其它浏览器支持的脚本语言访问。Mozilla的开发人员后来在Mozilla 1.0中实现了一个兼容的版本。之后苹果计算机公司在Safari 1.2中开始支持XMLHTTP，而Opera从8.0版开始也宣布支持XMLHTTP。 ----- 维基百科
• XMLHttpRequest (XHR)对象是Web API的一个接口。使用XHR对象可以与服务器交互，从URL中获取数据，而无需让整个页面刷新，因此成为Ajax编程的基础
• 层级关系：
• XHR可以用于获取任何类型的数据，而不仅仅是XML，还支持HTTP以外的协议（包括文件和ftp）
• 如果需要从服务器接受事件或消息数据，可以考虑[EventSource](https://developer.mozilla.org/zh-CN/docs/Server-sent_events/Using_server-sent_events)接口适用serversent event。对于full-duplex通信，可以选择[WebSocket](https://developer.mozilla.org/zh-CN/docs/Web/API/WebSockets_API)

2. Constructor 构造方法

• XMLHttpRequest() 构造函数初始化一个XMLHttpRequest对象。必须在所有其他方法被调用前调用构造函数

---

3. 属性

此接口继承了XMLHttpRequestEventTarget 和 EventTarget 的属性

1. XMLHttpRequest.onreadystatechange
   • 语法： XMLHttpRequest.onreadystatechange = callback
   • 当readyState的值改变的时候， callback函数会被调用
2. XMLHttpRequest.readyState
   • 只读，该属性返回一个XMLHttpRequest代理当前所处的状态的状态码
   • 一个XHR代理总是以下状态之一
     值 | 状态 | 描述
     -----|-----|-----
     0 | UNSENT | 代理被创建，尚未调用open（）方法
     1 | OPENED | open()方法已经被调用。在这个状态中，可以通过setRequestHeader()方法来设置请求的头部，可以调用send()方法来发起请求
     2 | HEADERS_RECEIVED | send()方法已经被调用，响应头也已经被接收
     3 | LOADING | 下载中，响应体部分正在被接收。如果responseType属性是text或空字符串，responseText将会在载入过程中拥有部分响应数据
     4 | DONE | 请求操作已完成。意味着数据传输已彻底完成或失败
3. XMLHttpRequest.response
   • 只读，返回响应的正文。可以是ArrayBuffer, Blob, Document, JavaScript对象或者一个DOMString 类型，取决于XMLHttpRequest.responseType属性的值。
   • 如果请求未完成或未成功，响应值为null。但如果responseType的值设为"text"或空字符串，则响应可以包含部分文本响应，而请求仍处于加载状态
4. XMLHttpRequest.responseText
   • 只读，返回一个DOMString,包含对文本的请求的响应，如果请求不成功或尚未发送，返回null。
   • 如果XMLHttpRequest的值是text或空字符串，responseText属性在请求完成之前将会得到部分属性。如果不是，访问该属性会抛出异常。
5. XMLHttpRequest.responseType
   • 返回及设置返回响应数据的类型。如果设为一个空字符串，将默认使用"text"类型。
   • 语法

         var type = XMLHttpRequest.responseType
         XMLHttpRequest.responseType = type
     

   值	返回数据的属性
   ""	DOMString (默认值)
   "arraybuffer"	ArrayBuffer
   "blob"	Blob
   "document"	Document
   "json"	JSON字符串
   "text"	DOMString

6. XMLHttpRequest.responseURL
   • 只读，返回响应的基础链接， #后的参数会被删除。如果URL为空，返回空字符串。
7. XMLHttpRequest.responseXML
   • 只读，返回一个包含请求检索的HTML或XML的Document。如果请求成功，尚未发送，或者检索的数据无法正确解析为XML或HTML，则为null。
8. XMLHttpRequest.status
   • 只读，返回响应中的数字状态码（HTTP status codes）。在请求完成前，status的值为0，如果XMLHttpRequest出错，返回的status也是0.
   • e.g. status 200 代表一个成功的请求
9. XMLHttpRequest.statusText
   • 只读，返回一个DOMString,其中包含HTTP服务器返回的响应状态。与XMLHttpRequest.status不同的是，它包括响应状态的整个文本（"200 OK" /" 404 Not Found"）
   • 如果请求的状态readyState的值为UNSENT 或 OPENED, 这个属性为一个空字符串。如果服务器未明确指定一个状态文本信息，则statusText的值会被自动赋值为"OK"
10. XMLHttpRequest.timeout
    • 可用来设置一个请求在被自动终止前所消耗的毫秒数。默认值为0，意味着没有超时。不能给同步请求设置超时毫秒数。
    • 在IE中，超时属性只能在调用open() 方法之后并且在调用send()方法之前设置。
11. XMLHttpRequest.upload
    • 只读， 该方法返回一个XMLHttpRequest对象，用来表示上传的进度。这个对象是不透明的，但是作为一个XMLHttpRequestEventTarget，可以通过对其绑定事件来追踪它的进度。
    • 可以被绑定在upload对象上的事件监听器如下：
      事件 | 相应属性的信息类型
      ---- | ----------------
      onloadstart | 获取开始
      onprogress | 数据传输进行中
      onabord | 获取操作终止
      onerror | 获取失败
      onload | 获取成功
      ontimeout | 获取超时
      onloadend | 获取完成（不论成功与否）
12. XMLHttpRequest.widthCredentials
    • 值为Boolean类型，指示了是否该使用类似cookies,authorization headers或者TLS客户端证书这一类资格证书来创建一个跨站点访问控制（cross-site Access-Control)请求。在同一个站点下使用withCredentials属性是无效的。
    • 此外，这个指示也会被用作响应中cookies被忽视的标志。默认值是false。
    • 如果在发送来自其他域的XMLHttpRequest请求之前，未设置withCredentials为true,那么就不能为它自己的域设置cookie值。而通过设置wihtCredentials为true获得电放cookies，将将会依旧享受同源策略，因此不能被通过document.cookie或者从头部相应请求的脚本访问。

---

4. 方法

1. XMLHttpRequest.abort()
   • 如果请求已经被发送，就立刻中止请求
2. XMLHTttpRequest.getAllResponseHeaders()
   • 以字符串的形式返回所有用CRLF分隔的响应头，如果没有收到相应，则返回null
3. XMLHttpRequest.getResponseHeader()
   • 返回包含指定响应头的字符串，如果响应尚未收到或响应中不存在该报头，返回null
4. XMLHttpRequest.open()
   • 初始化一个请求。该方法只能用JavaScript中使用。若要在native code中初始化请求，使用openRequest()
5. XMLHttpRequest.overrideMimeType()
   • 重写由服务器返回的MIME type
6. XMLHttpRequest.send()
   • 发送请求。如果请求是异步（默认）的，该方法将在请求发送后立即返回
7. XMLHttpRequest.setRequestHeader()
   • 设置HTTP请求头的值，必须在open() 之后、send()之前调用。