XMLHttpRequest: 原生JavaScript实现ajax请求的简单教程

2023-08-09 22:59:11

XMLHttpRequest：在不重新加载页面下进行异步通信

在当今快节奏的网络世界中，用户期望无缝且响应迅速的交互。XMLHttpRequest (XHR) 是实现这一目标的强大工具，它允许您在不重新加载页面的情况下与服务器交换数据。

XMLHttpRequest 简介

XHR 是一种 JavaScript API，可与网络服务器进行异步通信。这意味着您可以向服务器发送请求，而无需等待响应后再加载页面。这使得创建动态、交互式的 Web 应用程序成为可能。

创建 XMLHttpRequest 对象

要使用 XHR，您首先需要创建一个 XMLHttpRequest 对象：

var xhr = new XMLHttpRequest();

设置请求类型和 URL

下一步是指定您要发送的请求类型（例如 GET 或 POST）以及您要连接的服务器端脚本的 URL：

xhr.open("GET", "http://www.example.com/script.php");

发送请求

要向服务器发送请求，请调用 send() 方法：

xhr.send();

处理服务器响应

当服务器响应时，XHR 对象的 readyState 属性将变为 4。此时，您可以通过 responseText 属性获取响应内容：

xhr.onreadystatechange = function() {
  if (xhr.readyState === 4) {
    if (xhr.status === 200) {
      console.log(xhr.responseText);
    } else {
      console.log("Error: " + xhr.status);
    }
  }
};

GET 请求示例

以下是一个示例，说明如何使用 XHR 进行 GET 请求：

<!DOCTYPE html>
<html>
<head>
</head>
<body>
  <button onclick="makeRequest()">Make Request</button>

  <script>
    function makeRequest() {
      var xhr = new XMLHttpRequest();

      xhr.open("GET", "http://www.example.com/script.php");

      xhr.onreadystatechange = function() {
        if (xhr.readyState === 4) {
          if (xhr.status === 200) {
            console.log(xhr.responseText);
          } else {
            console.log("Error: " + xhr.status);
          }
        }
      };

      xhr.send();
    }
  </script>
</body>
</html>