XMLHttpRequest 对象

XMLHttpRequest 对象是前端与服务器之间进行数据传输的核心原生 API，可以用于向服务器发送HTTP请求并获取响应数据，动态更新页面内容。

基本使用

const xhr = new XMLHttpRequest(); // 创建一个 XMLHttpRequest 对象

xhr.open('GET', url, true); // 配置请求方式、请求地址和是否异步

xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) { // 监听响应状态，判断是否成功
    const response = xhr.responseText;  // 获取响应数据
    console.log(response);
  }
};

xhr.send(); // 发送请求

属性

| 属性 | 描述 | | ------------- | ------------------------------------------------------------ | | onreadystatechange | 处理响应的回调函数 | | readyState | 请求状态：

• 0：请求未初始化
• 1：请求已建立，但未发送
• 2：请求已发送，但未接收到响应
• 3：接收到部分响应数据，继续接收
• 4：请求已完成，且响应已就绪

| | response | 响应数据（不适用于非文本类型响应） | | responseText | 响应数据（文本形式） | | responseType | 响应类型：

• ''：文本形式，与 responseText 等效
• 'document'： Document 形式，需设置响应类型为 text/xml 或 application/xml
• 'json'： JSON 形式
• 'blob'： Blob 形式
• 'arraybuffer'： ArrayBuffer 形式

| | responseURL | 响应地址 | | responseXML | 响应数据（XML 形式） | | status | 响应状态码，根据 HTTP 协议定义 | | statusText | 响应状态码描述 | | timeout | 超时时间（毫秒数） | | upload | 分别对应请求和响应的 upload 和 download 对象 |

方法

| 方法 | 描述 | | ---------------------- | ------------------------------------------------------------ | | abort() | 终止请求 | | getAllResponseHeaders() | 获取所有响应头 | | getResponseHeader() | 获取指定响应头 | | open(method, url, async)| 初始化请求 | | send(body) | 发送请求 | | setRequestHeader() | 设置请求头 |

注意事项

• 在配置请求之前调用 setRequestHeader() 方法可以设置自定义请求头。
• 在接收到响应之前调用 responseType 属性设置响应类型，不建议再之后进行修改。
• 同源策略（Same-Origin Policy）限制了 XMLHttpRequest 对象不能跨域请求，否则会报错（除了通过 CORS 或 JSONP 等方式绕过同源限制）。
• 在不支持 XMLHttpRequest 对象的浏览器或环境中，可以使用相应的 Polyfill 实现 API 兼容性。

参考资料

• MDN Web 文档 XMLHTTPRequest
• AJAX 教程 - 阮一峰的网络日志