掌握 XMLHttpRequest：JavaScript 中 AJAX 调用指南-js教程-PHP中文网

掌握 XMLHttpRequest：JavaScript 中 AJAX 调用指南

碧海醫心

发布： 2024-12-18 19:39:31

原创

991人浏览过

掌握 xmlhttprequest：javascript 中 ajax 调用指南

使用XMLHttpRequest进行AJAX调用

JavaScript的核心功能XMLHttpRequest (XHR) 对象，允许开发者在不刷新页面的情况下异步地向服务器发送和接收数据，是构建动态交互式Web应用的基础，也是AJAX（异步JavaScript和XML）的核心。

1. 什么是XMLHttpRequest？

XMLHttpRequest是JavaScript的API，用于通过HTTP请求与服务器通信，其主要优势在于：

无需页面重新加载即可获取数据。
支持多种数据格式，例如JSON、XML、HTML和文本。
支持同步和异步操作（但大多数情况下不建议使用同步模式）。

2. 创建XMLHttpRequest对象

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

<code class="javascript">const xhr = new XMLHttpRequest();</code>

登录后复制

3. XHR调用的步骤

创建XHR对象:

<code class="javascript">   const xhr = new XMLHttpRequest();</code>

登录后复制

初始化请求: 使用open()方法定义HTTP方法、URL以及请求是否异步。

<code class="javascript">   xhr.open("GET", "https://api.example.com/data", true);</code>

登录后复制

设置响应回调: 使用onload事件或readystatechange事件处理服务器响应。

<code class="javascript">   xhr.onload = function () {
       if (xhr.status === 200) {
           console.log("响应数据:", xhr.responseText);
       } else {
           console.error("错误:", xhr.status, xhr.statusText);
       }
   };</code>

登录后复制

发送请求:

<code class="javascript">   xhr.send();</code>

登录后复制

4. 完整示例：GET请求

<code class="javascript">const xhr = new XMLHttpRequest();
xhr.open("GET", "https://jsonplaceholder.typicode.com/posts", true);

xhr.onload = function () {
    if (xhr.status === 200) {
        console.log("数据获取成功:", JSON.parse(xhr.responseText));
    } else {
        console.error("数据获取失败. 状态码:", xhr.status);
    }
};

xhr.onerror = function () {
    console.error("网络错误导致请求失败。");
};

xhr.send();</code>

登录后复制

5. 使用POST请求发送数据

XHR支持使用POST方法向服务器发送数据。

立即学习“Java免费学习笔记（深入）”；

示例：

<code class="javascript">const xhr = new XMLHttpRequest();
xhr.open("POST", "https://jsonplaceholder.typicode.com/posts", true);
xhr.setRequestHeader("Content-Type", "application/json");

xhr.onload = function () {
    if (xhr.status === 201) {
        console.log("数据保存成功:", JSON.parse(xhr.responseText));
    } else {
        console.error("错误:", xhr.status);
    }
};

const data = JSON.stringify({
    title: "foo",
    body: "bar",
    userId: 1
});

xhr.send(data);</code>

登录后复制

6. XHR的属性和方法

重要属性：

百度文心百中

百度大模型语义搜索体验中心

查看详情

readyState：请求的状态 (0到4)。
- 0: 未初始化
- 1: 打开
- 2: 发送
- 3: 接收
- 4: 完成
status：HTTP状态码 (例如，200表示成功，404表示未找到)。
responseText：响应正文作为文本字符串。
responseXML：XML格式的响应正文 (如果适用)。

重要方法：

open(method, url, async)：初始化请求。
send(data)：将请求发送到服务器。
setRequestHeader(header, value)：设置自定义请求头。
abort()：取消请求。

7. 处理响应状态

可以使用onreadystatechange事件监控XHR请求的进度。

示例：

<code class="javascript">xhr.onreadystatechange = function () {
    if (xhr.readyState === 4 && xhr.status === 200) {
        console.log("数据:", xhr.responseText);
    }
};</code>

登录后复制

8. 使用XHR的优点

异步通信: 避免阻塞主线程。
跨浏览器兼容性: 适用于现代和旧版浏览器。
灵活的数据格式: 支持JSON、XML、HTML和纯文本。

9. XHR的局限性

详细的语法: 相比fetch等现代API，需要更多代码。
回调地狱: 复杂的请求可能导致嵌套的回调函数。
有限的现代特性: 缺少Promise或async/await等功能。

10. 现代替代方案：Fetch API

尽管XHR仍然被广泛支持，但Fetch API提供了一种更现代化、基于Promise的HTTP请求方法。

Fetch示例：

<code class="javascript">fetch("https://jsonplaceholder.typicode.com/posts")
  .then(response => response.json())
  .then(data => console.log("数据:", data))
  .catch(error => console.error("错误:", error));</code>

登录后复制