### XMLHttpRequest
[XMLHttpRequest](http://en.wikipedia.org/wiki/XMLHttpRequest)是一个浏览器接口，使得Javascript可以进行HTTP(S)通信。
最早，微软在IE 5引进了这个接口。后来各大浏览器纷纷效仿也提供了这个接口，再后来W3C对它进行了标准化，提出了[`XMLHttpRequest`标准](https://www.w3.org/TR/XMLHttpRequest/)。`XMLHttpRequest`标准又分为`Level 1`和`Level 2`。也是`AJAX`的主要实现原理，它的存在使得在不重新加载整个页面的情况下与服务器交换数据并更新部分网页的艺术。
```
// 创建一个XMLHttpRequest对象
// IE6, IE5
// var xhr = new ActiveXObject("Microsoft.XMLHTTP");
// IE7+, Firefox, Chrome, Opera, Safari
var xhr = new XMLHttpRequest()
// 重置服务器端返回的类型
xhr.overrideMimeType('image/png')
// 初始化一个请求 参数3：表示该请求应该以`异步模式`执行。
xhr.open('GET', 'https://www.jianshu.com/shakespeare/notes/40193041/user_notes', true)
// 超时时间，单位是毫秒
xhr.timeout = 2000;
// 设置 HTTP 请求头的值。在`open()`之后、`send()`之前调用`setRequestHeader()`方法。
xhr.setRequestHeader('test', 'test')
// 发送请求。如果请求是异步的（默认），那么该方法将在请求发送后立即返回。
xhr.send()
// 只要 `readyState` 属性发生变化，就会调用相应的处理函数。这个回调函数会被用户线程所调用。当一个`XMLHttpRequest`请求被abort()方法取消时，其对应的 `readystatechange`事件不会被触发。
xhr.onreadystatechange = function(){
if ( xhr.readyState == 4 && xhr.status == 200 ) {
console.info(xhr)
console.info(xhr.getAllResponseHeaders())
console.info(xhr.getResponseHeader('content-type'))
console.info( xhr.responseText );
console.info( xhr.response);
} else {
console.info( xhr.statusText );
}
}
// 取消请求
// xhr.abort()
```
*****
**`onreadystatechange`**
只要 `readyState` 属性发生变化，就会调用相应的处理函数。这个回调函数会被用户线程所调用。当一个`XMLHttpRequest`请求被abort()方法取消时，其对应的 `readystatechange`事件不会被触发。
**`readyState`**
| 值 | 状态 | 描述 |
| :---: | :---: | :---: |
| 0 | UNSENT | XMLHttpRequest 代理已被创建， 但尚未调用 open() 方法。 |
| 1 | OPENED | open() 方法已经被触发。在这个状态中，可以通过 [setRequestHeader()](https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/setRequestHeader)方法来设置请求的头部， 可以调用[send()](https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/send)方法来发起请求。 |
| 2 | HEADERS_RECEIVED | send() 方法已经被调用，响应头也已经被接收。 |
| 3 | LOADING | 下载中；`responseText`属性已经包含部分数据。 |
| 4 | DONE | 下载操作已完成。 |
**`status`**
status码是标准的[HTTP status codes](https://developer.mozilla.org/en-US/docs/Web/HTTP/Response_codes)。在请求完成前，`status`的值为`0`。值得注意的是，如果 XMLHttpRequest 出错，浏览器返回的 status 也为0。
**`response`**
响应的正文，返回的类型可以是[`ArrayBuffer`](https://developer.mozilla.org/zh-CN/docs/Web/API/ArrayBuffer "此页面仍未被本地化, 期待您的翻译!")、[`Blob`](https://developer.mozilla.org/zh-CN/docs/Web/API/Blob "Blob 对象表示一个不可变、原始数据的类文件对象。Blob 表示的不一定是JavaScript原生格式的数据。File 接口基于Blob，继承了 blob 的功能并将其扩展使其支持用户系统上的文件。")、[`Document`](https://developer.mozilla.org/zh-CN/docs/Web/API/Document "Document 接口表示任何在浏览器中载入的网页，并作为网页内容的入口，也就是DOM 树。DOM 树包含了像 、 这样的元素，以及大量其他元素。它向网页文档本身提供了全局操作功能，能解决如何获取页面的 URL ，如何在文档中创建一个新的元素这样的问题。")、 JavaScript[`Object`](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object "Object 构造函数创建一个对象包装器。")或[`DOMString`](https://developer.mozilla.org/zh-CN/docs/Web/API/DOMString "DOMString 是一个UTF-16字符串。由于JavaScript已经使用了这样的字符串，所以DOMString 直接映射到 一个String。")。 这取决于`responseType`，XMLHttpRequest.responseType 属性是一个枚举类型的属性，返回响应数据的类型。它允许我们手动的设置返回数据的类型。如果我们将它设置为一个空字符串，它将使用默认的"text"类型。
**`responseType`**
| 值 | 描述 |
| :---: | :---: |
|" "| 将`responseType`设为空字符串与设置为`"text"`相同， 是默认类型 （实际上是[`DOMString`](https://developer.mozilla.org/zh-CN/docs/Web/API/DOMString "DOMString 是一个UTF-16字符串。由于JavaScript已经使用了这样的字符串，所以DOMString 直接映射到 一个String。")）。|
|"arraybuffer"| [`response`](https://developer.mozilla.org/zh-CN/docs/Web/API/XMLHttpRequest/response "The XMLHttpRequest response 属性返回响应的正文。返回的类型可以是 ArrayBuffer 、 Blob 、 Document 、 JavaScript Object 或 DOMString 。 这取决于 responseType 属性。")是一个包含二进制数据的 JavaScript[`ArrayBuffer`](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer "The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.")。|
|"blob"| `response`是一个包含二进制数据的[`Blob`](https://developer.mozilla.org/zh-CN/docs/Web/API/Blob "Blob 对象表示一个不可变、原始数据的类文件对象。Blob 表示的不一定是JavaScript原生格式的数据。File 接口基于Blob，继承了 blob 的功能并将其扩展使其支持用户系统上的文件。")对象 。|
|"document"| `response`是一个[HTML](https://developer.mozilla.org/en-US/docs/Glossary/HTML "HTML: HTML (HyperText Markup Language) is a descriptive language that specifies webpage structure.")[`Document`](https://developer.mozilla.org/zh-CN/docs/Web/API/Document "Document 接口表示任何在浏览器中载入的网页，并作为网页内容的入口，也就是DOM 树。DOM 树包含了像 、 这样的元素，以及大量其他元素。它向网页文档本身提供了全局操作功能，能解决如何获取页面的 URL ，如何在文档中创建一个新的元素这样的问题。")或[XML](https://developer.mozilla.org/en-US/docs/Glossary/XML "XML: eXtensible Markup Language (XML) is a generic markup language specified by the W3C. The information technology (IT) industry uses many languages based on XML as data-description languages.")[`XMLDocument`](https://developer.mozilla.org/zh-CN/docs/Web/API/XMLDocument "W3C并没有定义XMLDocument接口。原因是document接口本来就是为xml定义的。而HTML只是xml的一种实现。因此需要定义HTMLDocument。但是在FireFox有一个专门的XMLDocument构造器。应该是对document对象的一些扩展。通常情况下，就当作document来使用。")，这取决于接收到的数据的 MIME 类型。|
|"json"|`response`是一个 JavaScript 对象。这个对象是通过将接收到的数据类型视为[JSON](https://developer.mozilla.org/en-US/docs/Glossary/JSON "JSON: JavaScript Object Notation (JSON) is a data-interchange format. Although not a strict subset, JSON closely resembles a subset of JavaScript syntax. Though many programming languages support JSON, JSON is especially useful for JavaScript-based apps, including websites and browser extensions.")解析得到的。|
|"text"|`response`是包含在[`DOMString`](https://developer.mozilla.org/zh-CN/docs/Web/API/DOMString "DOMString 是一个UTF-16字符串。由于JavaScript已经使用了这样的字符串，所以DOMString 直接映射到 一个String。")对象中的文本。|
**`responseText`**
服务器返回的文本数据
**`statusText`**
服务器返回的状态文本
**`timeout`**
是一个无符号长整型数，代表着一个请求在被自动终止前所消耗的毫秒数。默认值为 0，意味着没有超时。
**`upload`**
**返回一个**`XMLHttpRequestUpload`对象，用来表示上传的进度。可以通过对其绑定事件来追踪它的进度。
|事件|信息类型|
| :---- | :-----|
|onloadstart| 开始|
|onprogress|数据传输进行中|
|onabort|操作终止|
|onerror|失败|
|onload|成功|
|ontimeout|操作在用户规定的时间内未完成|
|onloadend|完成（不论成功与否）|
**`withCredentials`**
属性是一个[`Boolean`]类型，它指示了是否该使用类似cookies,authorization headers(头部授权)。
**`FormData`**
提供了一种表示表单数据的键值对的构造方式，此方法相当简单直接。如果送出时的编码类型被设为`"multipart/form-data"`，它会使用和表单一样的格式。
```
// 参数可选
let formData = new FormData(`<Form表单元素>`)
// 添加参数 **filename** 传给服务器端的文件名称，默认为该文件的名称
formData.append(name, value, filename<可选>)
// 删除参数
formData.delete(name)
// 返回一个迭代器对象，此对象可以遍历`formData`中的键值对
formData.entries()
// 返回指定的键关联的第一个值
formData.get(name)
// 返回指定的键关联的所有值
formData.getAll(name)
// 表示该对象是否包含某个`key`
formData.has(name)
// 返回一个迭代器，遍历所有的keys
formData.keys()
// 对对象中的某个`key`设置一个新的值，如果不存在，则添加。
formData.set(name, value, filename<可选>)
// 返回一个迭代器，遍历所有的值
formData.values()
```
**`abort()`**
调用该方法将终止该请求。当一个请求被终止，它的 readyState 属性将被置为0（`UNSENT` )。
**`getAllResponseHeaders()`**
该方法返回所有的响应头，以[CRLF](https://developer.mozilla.org/en-US/docs/Glossary/CRLF "CRLF: CR and LF are control characters or bytecode that can be used to mark a line break in a text file.")分割的字符串，或者`null`如果没有收到任何响应。
**`setRequestHeader()`**
设置 HTTP 请求头的值。在`open()`之后、`send()`之前调用`setRequestHeader()`方法。
**`getResponseHeader()`**
该方法返回包含指定头文本的字符串。
**`overrideMimeType()`**
该方法是指定一个MIME类型用于替代服务器指定的类型，使服务端响应信息中传输的数据按照该指定MIME类型处理。（服务器端没有指定一个`Content-Type`头）
**`XHR事件`**
```
// 开始请求
xhr.addEventListener('loadstart', handleEvent);
// 请求完成
xhr.addEventListener('load', handleEvent);
// 一个资源的加载进度停止之后被触发（例如，在已经触发“error”，“abort”或“load”事件之后）
xhr.addEventListener('loadend', handleEvent);
// 一个操作正在进行中
xhr.addEventListener('progress', handleEvent);
// 请求遇到错误时会被触发
xhr.addEventListener('error', handleEvent);
// 当一个请求终止时 `abort` 事件被触发
xhr.addEventListener('abort', handleEvent);
// 当一个请求超时时，将被触发
xhr.addEventListener('timeout', handleEvent);
```
- 版本控制之Git简介
- Git工作流程
- Git工作区、暂存区、版本库
- Git 指令汇总
- Git 忽略文件规则 .gitignore
- pull request
- HTTP简介
- HTTP - Keep-Alive
- HTTP缓存
- XMLHttpRequest
- Fetch
- 跨域
- HTTP 消息头
- TCP/IP
- TCP首部
- IP首部
- IP 协议
- TCP/IP漫画
- 前端开发规范
- 前端开发规范整理
- 前端未来规划
- HTML思维导图
- CSS思维导图
- 布局
- position，float，display的关系和优先级
- line-height、height、font-size
- 移动端适配
- JS 对象
- JS 原型模式 - 创建对象
- JS 预编译
- 探索JS引擎
- ES