XMLHttpRequest 对象

一、介绍

　　XMLHttpRequest（XHR）对象用于与服务器交互。XMLHttpRequest 是 Ajax 技术的核心，通过 XMLHttpRequest 可以在不刷新页面的情况下请求特定 URL，获取数据。这允许网页在不影响用户操作的情况下，更新页面的局部内容。

XMLHttpRequest 可以用于获取任何类型的数据，而不仅仅是 XML。它甚至支持 HTTP 以外的协议（包括 file:// 和 FTP），尽管可能受到更多出于安全等原因的限制。

二、属性

readyState

　　数值，只读属性，表示请求的状态码，具体值如下表

值	状态	描述
0	UNSENT	表示对象被创建，但尚未调用 open() 方法
1	OPENED	表示 open() 方法已经被调用
2	HEADERS_RECEIVED	表示send()方法已被调用，并且头部和状态已经可以获得
3	LOADING	表示数据接收中，responseText 属性已经包含部分数据
4	DONE	表示数据接收已经完成

onreadystatechange

　　可写属性，期望得到一个函数，用作 readystatechange 事件的处理方法。当 readyState 属性的值发生变化时，该函数会被调用。

　　注 1：该方法不应用于同步的 XMLHttpRequest 请求。
　　注 2：当 XMLHttpRequest 的请求被 abort() 方法取消时，readystate 会被设置为 0，此时对应的 readystatechange 事件不会被触发。

responseType

　　字符串，只读属性，用于设置请求的响应体类型，期望值如下表。

值	描述
空字符串	相当于默认的 text
text	期望请求的响应体返回一个字符串
josn	期望请求的响应体返回一个将接收到的数据内容解析为 JSON 而创建的 JavaScript 对象
arraybuffer	期望请求的响应体返回一个包含二进制数据的 JavaScript ArrayBuffer
blob	期望请求的响应体返回一个包含二进制数据的 Blob 对象
document	期望请求的响应体返回一个 HTML Document 或 XML XMLDocument，具体类型根据接收到数据的 MIME 类型而定

　　注 1： responseType 需在 open() 方法调用之后且 send() 方法调用之前设置。
　　注 2：同步的 XMLHttpRequest 请求不可修改 responseType 的值。
　　注 3：服务端实际发送的响应体类型与 responseType 设置的类型不符时，请求体将为 null 。

response

　　只读属性，表示请求的响应体，其值的类型由 responseType 属性决定。

　　注： responseType 的值为空字符串或 'text' 情况下，当 readyState 属性的值为 3 时即可通过 response 属性读取该请求目前为止已经取得的数据。其他情况下，未完成或未成功的请求，response 都为 null。

responseText

　　字符串，只读属性，表示请求发送后服务端返回的文本。

　　注 1： send() 方法未调用时，responseText 为空字符串；请求失败时，responseText 为 null 。
　　注 2： 同 response 属性一样，当 readyState 属性的值为 3 时 responseText 返回目前为止服务端响应的文本内容，当readyState 为 4 且 status 属性为 200 时，responseText 返回后端响应的全部数据。

status

　　数值，只读属性，返回服务端响应的数字状态码。

　　注 1： 请求完成前或 XMLHttpRequest 出错时，status 的值为 0 。
　　注 2： 如果服务响应中没有明确指定 status 码，则默认为 200。

statusText

　　字符串，只读属性，返回服务端响应状态码对应的文本信息。

　　注 1： 如果 readyState 的值为 0 或者 1，则这个 statusText 返回空字符串。
　　注 2： 如果服务响应中没有明确指定，则默认为 OK。

timeout

　　可写属性，期望得到一个正整数，表示请求的最大毫秒数，超时后请求将自动终止，并触发超时事件。

　　注 1： 默认值为 0，表示无超时时间。
　　注 2： 在IE中，超时属性可能只能在调用 open() 方法之后且在调用 send() 方法之前设置。

ontimeout

　　可写属性，期望得到函数，用作请求超时事件的处理函数。

　　注： 只有设置了 timeout 属性才可能发生超时事件 。

upload

　　只读属性，返回一个 XMLHttpRequestUpload 对象，用来表示上传的进度，可以通过对其绑定事件来追踪它的进度。
　　可以为 upload 属性绑定以下事件，触发顺序由上至下。

　　注： IE 10 以下是不支持。

事件	描述
onloadstart	上传开始时触发
onprogress	数据传输中周期性触发，该事件中可获取上传进度
onabort	上传终止时触发，通过 xhr.abort() 方法可终止上传。
onerror	上传失败时触发
onload	上传成功时触发
ontimeout	上传超时时触发，同请求超时，但是先于请求超时触发
onloadend	上传结束时触发，无论成功与否

　　注： 调用 xhr.abort() 方法终止上传后会依次触发 xhr.onreadystatechange 、xhr.upload.onabort、xhr.upload.onloadend、xhr.onabort、xhr.onloadend 事件

示例代码

	const xhr = new XMLHttpRequest();
	// xhr.timeout = 1000; // 设置了 timeout 才有可能请求超时

	xhr.upload.onprogress = (e) => {
    
    
		if (e.total > 0) {
    
    
			// 获取进度
			console.log(parseInt((e.loaded / e.total) * 100, 10));
		}
	};
	xhr.upload.onloadstart = (e) => {
    
    
		console.log("上传开始", e);
	};
	xhr.upload.onabort = (e) => {
    
    
		console.log("上传终止", e);
	};
	xhr.upload.onerror = (e) => {
    
    
		console.log("上传失败", e);
	};
	xhr.upload.onload = (e) => {
    
    
		console.log("上传成功", e);
	};
	xhr.upload.ontimeout = (e) => {
    
    
		  console.log("上传超时", e);
	};
	xhr.upload.onloadend = (e) => {
    
    
		console.log("上传结束", e);
	};

	xhr.ontimeout = (e) => {
    
    
		console.log("请求超时", e);
	};
	xhr.open("post", "http://127.0.0.1:8888/test");
	
	xhr.send(formData);

withCredentials

　　可写属性，布尔值，用来指定跨域 Access-Control 请求是否应当带有授权信息，如 cookie 或授权 header 头。

三、方法

open()

说明：用于初始化一个 http 请求。已经调用过该方法的 xhr 对象再次调用该方法时，相当于调用 abort() 方法。

参数：(method, url[, async[, name[, password]]])

• method
  字符串，表示要使用的 HTTP 方法，如 GET、POST 等。对于非 HTTP(S) URL，该参数会被忽略。
• url
  字符串，表示要向其发送请求的 URL。
• async
  布尔值，可选，表示是否异步发送请求，默认值为 true。值为 false 时，send() 方法将阻塞，直至请求结束。
• user
  可选，表示用户名，用于认证，默认为null。
• password
  可选，表示密码，用于认证，默认为null。

setRequestHeader()

说明：设置 HTTP 请求头的值。必须在 open() 之后、send() 之前调用 setRequestHeader() 方法。

参数：(header, value)

• header
  请求头属性的名称。
• value
  请求头属性的值。

send()

说明：用于发送 HTTP 请求。请求方式为 GET 或 HEAD 时，参数应为 null.

参数：(body)

• body
  可选，默认为 null，类型可以是 Document、Blob、ArrayBufferView、FormData, URLSearchParams, 或者字符串。

getResponseHeader()

说明：获取包含指定响应头文本的字符串。

参数：(name)

• name
  表示响应头属性的字符串，不区分大小写。

返回值：响应头属性的值，采用 UTF 编码。

注 1：如果请求尚未返回响应头，或不存在该响应头属性，或者被 W3C 限制时，返回 null。
注 2： readyState 属性的值为 2 ，即状态为 HEADERS_RECEIVED 时，表示响应头已经返回。

getAllResponseHeaders()

说明：获取所有的响应头，以 \r\n 分割字符串。

参数：无

返回值：字符串，所有的响应头，无响应时返回 null。

注：其实并不是可以获取到所有的响应头，有些响应头需要在服务端允许才可以获取。比如下载文件时的 Content-Disposition，需要后端设置响应头 Access-Control-Expose-Headers : 'Content-Disposition' 才可以。Access-Control-Expose-Headers 可以设置允许客户端访问的响应头，其值是以逗号分隔的响应头名称。

abort()

说明：立即终止已经发送的请求。当一个请求被终止，它的 readyState 将被置为 0（此时并不会触发 onreadystatechange 事件），并且请求的 status 也置为 0。

注：调用 abort() 方法后，xhr 对象上会依次触发以下事件：readystatechange （此时 readyState 为 4）、abort （此时 readyState 为 0）和 loadend。

overrideMimeType()

说明：覆写由服务端返回的 MIME 类型，该方法较少使用到。

参数：(mimeType)

• mimeType
  字符串，指定具体的 MIME 类型去代替服务器指定的MIME类型，如果服务器没有指定类型，那么 XMLHttpRequest 将会默认为 "text/xml"。

场景举例：强制使流方式处理响应类型为 "text/xml" 类型的数据。

四、事件

以下事件皆可通过 xhr.addEventListener('eventName', handleFun) 或相应的事件属性（no*）绑定事件的回调。

事件名称	触发时机	说明
readystatechange	当 readyState 属性的值发生变化时触发	abort() 方法会将 readyState 设置为 0，但这一变化并不触发 readystatechange 事件
abort	当请求被停止时触发，如调用 abort() 方法之后	-
error	当请求出错时触发	只有在网络层级出现错误时（如无网络）才会触发。如果错误只出现在应用层（如发送一个HTTP的错误码），将不会触发该事件。
load	当请求成功完成时触发	load 与 error 是相对立的事件， error 不触发，load 就会触发
loadstart	当请求接收到响应数据时触发	该事件也适用于 <img> 和 <video> 元素；先于 readyState 变为 3 时的 readystatechange 触发
loadend	当请求结束时触发	无论请求成功 ( load) 还是失败 (abort 或 error)
progress	当请求接收到更多数据时，周期性地触发	-
timeout	当请求超时时触发	设置了 timeout 属性才有可能触发该事件