无需 jQuery 也能轻松发起 AJAX 请求：原生 JavaScript 详解

2024-03-15 18:11:59

无需 jQuery 发起 AJAX 调用：使用原生 JavaScript

背景

AJAX（异步 JavaScript 和 XML）是一种强大的技术，允许网页与服务器进行异步通信，从而在不重新加载整个页面的情况下请求和接收数据。虽然 jQuery 提供了简化的 AJAX 调用方式，但掌握如何在没有它的情况下执行 AJAX 调用也很重要。本文将提供分步指南，介绍如何使用原生 JavaScript 发起 AJAX 调用。

步骤 1：创建 XMLHttpRequest 对象

XMLHttpRequest（XHR）对象是 JavaScript 中用于发起 AJAX 调用的核心对象。它提供了用于与服务器通信的方法和属性。要创建 XHR 对象，请使用以下代码：

var xhr = new XMLHttpRequest();

步骤 2：配置 XHR 对象

接下来，配置 XHR 对象，包括请求类型（如 GET 或 POST）、请求 URL 和处理响应的回调函数。例如，要向 example.com/api/data 发起 GET 请求，请使用以下代码：

xhr.open('GET', 'example.com/api/data');
xhr.onload = function() {
  // 当服务器响应时调用此回调函数
  if (xhr.status === 200) {
    // 请求成功，处理响应
    console.log(xhr.responseText);
  } else {
    // 请求失败，处理错误
    console.error('请求失败：', xhr.status);
  }
};

步骤 3：发送请求

配置好 XHR 对象后，使用 send() 方法发送请求：

xhr.send();

步骤 4：处理响应

当服务器响应时，onload 回调函数将被触发。在此函数中，处理响应数据。例如，要将响应解析为 JSON 对象，请使用以下代码：

var response = JSON.parse(xhr.responseText);

步骤 5：使用异步请求

默认情况下，AJAX 请求是同步的，这意味着它们会阻塞执行，直到服务器响应。为了让请求变为异步，请使用以下代码：

xhr.async = true;

这将允许脚本在等待服务器响应时继续执行。

示例代码

以下是一个完整的示例，演示如何使用原生 JavaScript 发起 AJAX 调用：

var xhr = new XMLHttpRequest();
xhr.open('GET', 'example.com/api/data');
xhr.onload = function() {
  if (xhr.status === 200) {
    var response = JSON.parse(xhr.responseText);
    console.log(response);
  } else {
    console.error('请求失败：', xhr.status);
  }
};
xhr.async = true;
xhr.send();