XMLHttpRequest 对象: Ajax 的强大功能

2022-11-10 17:09:31

使用 XMLHttpRequest 对象进行异步通信

在现代 Web 开发中，异步通信对于创建响应迅速且用户友好的应用程序至关重要。XMLHttpRequest（XHR）对象是 JavaScript 中的一个内置工具，它允许你与服务器进行异步通信，而无需刷新页面。

XMLHttpRequest 对象的工作原理

XHR 对象提供了一种机制，可以在后台向服务器发送请求并接收响应，从而使 Web 应用程序可以同时执行其他任务。当我们使用 XHR 对象时，我们会创建一个 XHR 实例，使用 open() 方法指定请求的 URL 和 HTTP 方法，然后使用 send() 方法发送请求。

当服务器处理请求时，它会将响应发送回客户端。我们可以使用 onload 事件来处理响应。如果请求成功（HTTP 状态代码为 200），我们可以访问响应数据并对其进行处理。

跨域请求

在某些情况下，你需要向其他域名的服务器发送请求，这称为跨域请求。为了安全起见，浏览器通常会阻止跨域请求。但是，可以通过设置 XHR 对象的 withCredentials 属性为 true 来启用跨域请求。

HTTP 方法

XHR 对象支持不同的 HTTP 方法，用于执行不同的操作：

POST: 用于向服务器发送数据，例如提交表单数据或创建新资源。
GET: 用于从服务器获取数据，例如加载页面数据或获取资源。
PUT: 用于更新服务器上的现有资源。
DELETE: 用于删除服务器上的现有资源。

代码示例

以下代码示例展示了如何使用 XHR 对象向服务器发送 GET 请求并获取响应数据：

// 创建 XHR 对象
var xhr = new XMLHttpRequest();

// 打开请求
xhr.open('GET', 'https://example.com/data.json', true);

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

// 处理响应
xhr.onload = function() {
  if (xhr.status === 200) {
    // 请求成功，处理响应数据
    var data = JSON.parse(xhr.responseText);
    console.log(data);
  } else {
    // 请求失败，处理错误
    console.error(xhr.status, xhr.statusText);
  }
};