XMLHttpRequest教程：学会轻松请求！

前端

2023-09-22 12:00:28

在现代 Web 开发中掌握 XMLHttpRequest，提升用户交互体验

XMLHttpRequest (XHR) 是一个强大的 JavaScript 对象，让你的 Web 页面在不刷新页面的情况下与服务器交互。了解 XHR 的工作原理将极大地提升你的 Web 开发技能，从而创造出更具交互性和动态性的用户体验。

一、XMLHttpRequest 简介

XHR 允许客户端（你的浏览器）与服务器进行 HTTP 请求，从而在不刷新页面的情况下获取或发送数据。它是一种异步请求，意味着它不会阻塞页面加载，从而实现更流畅的用户体验。

二、创建 XMLHttpRequest 对象

通过调用 new XMLHttpRequest() 创建一个 XHR 对象。这是全局对象，可以在代码中的任何位置使用。

三、发送 GET 请求

GET 请求用于从服务器获取数据。首先使用 open() 方法设置请求方式和 URL，然后使用 send() 方法发送请求。

xhr.open('GET', 'https://example.com/data.json');
xhr.send();

四、发送 POST 请求

POST 请求用于向服务器发送数据。除了设置请求方式和 URL 外，还需要使用 setRequestHeader() 方法设置请求头。

xhr.open('POST', 'https://example.com/submit-data');
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.send(JSON.stringify({ name: 'John Doe' }));

五、异步响应

XHR 支持异步请求。使用 onreadystatechange 事件监听器监听请求状态的变化。当请求完成时，触发该事件，你可以获取请求状态和响应数据。

xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    // 请求已完成并成功
  }
};

六、状态 ReadyState

readyState 属性表示请求的状态，有 5 种状态：

0: 请求未初始化
1: 请求已建立
2: 请求已发送
3: 请求正在处理
4: 请求已完成

七、终止请求 Abort()

使用 abort() 方法可以终止请求。在请求正在处理或已完成之前调用此方法，可以停止请求并释放资源。

xhr.abort();

八、获取 XML 数据

使用 responseXML 属性可以获取 XML 数据。如果请求成功，此属性将包含一个 XMLDocument 对象，否则为 null。

九、获取和设置头部信息

可以使用 setRequestHeader() 方法设置请求头，可以使用 getResponseHeader() 方法获取响应头。

// 设置请求头
xhr.setRequestHeader('Authorization', 'Bearer my-token');

// 获取响应头
var contentType = xhr.getResponseHeader('Content-Type');

十、实例演示

以下是一个获取 JSON 数据的 XHR 实例：

var xhr = new XMLHttpRequest();
xhr.open('GET', 'https://example.com/data.json');
xhr.send();

xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    var data = JSON.parse(xhr.response);
    console.log(data);
  }
};