【AJAX】XMLHttpRequest查询参数与数据提交详解

XMLHttpRequest 是浏览器中用来与服务器进行交互的基础 API，广泛应用于异步数据获取以及表单提交等场景。本文将详细介绍如何使用 XMLHttpRequest 在查询字符串中传递参数以及通过请求体提交数据，以便开发者能够灵活地处理 GET 和 POST 请求。

一、XMLHttpRequest 简介

1. XMLHttpRequest 的定义与作用

XMLHttpRequest 是一种在浏览器端用来与服务器通信的 API。它允许网页在不重新加载整个页面的情况下，向服务器发送请求并接收响应，从而实现异步更新内容的效果。虽然近年来 fetch API 更加流行，但 XMLHttpRequest 仍然被广泛使用，尤其是在对旧浏览器的兼容性需求较高的情况下。

2. XMLHttpRequest 的常见用法

XMLHttpRequest 主要用于以下几种场景：

• 从服务器获取数据（如 HTML、XML、JSON 等格式）。
• 向服务器提交表单数据。
• 实现异步数据交互，避免页面刷新。

在使用 XMLHttpRequest 时，我们可以通过两种常见的 HTTP 方法与服务器进行交互：GET 和 POST。其中，GET 主要用于获取数据，而 POST 主要用于提交数据。

二、GET 请求与查询参数

1. GET 请求的定义

在 GET 请求中，数据通过 URL 的查询字符串传递。查询字符串是指 URL 中 ? 之后的部分，通常由键值对组成，并且多个键值对通过 & 分隔。GET 请求适用于请求一些不会对服务器数据产生修改的操作。

2. 通过 URL 传递查询参数

在使用 XMLHttpRequest 发起 GET 请求时，可以通过 URL 传递参数。以下是一个通过 XMLHttpRequest 执行 GET 请求的基本示例：

const xhr = new XMLHttpRequest();
const url = "https://example.com/api/data?param1=value1&param2=value2";

// 打开 GET 请求
xhr.open("GET", url, true);

// 设置请求头（可选）
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

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

在这个例子中，param1 和 param2 是通过查询字符串的形式传递的参数。需要注意的是，查询字符串中的特殊字符（如空格、&、= 等）需要经过编码才能正确传递。

3. 动态构建查询字符串

在实际应用中，我们经常需要根据用户输入或其他条件动态构建查询参数。可以通过 JavaScript 的 encodeURIComponent() 函数对每个参数进行编码，确保其能正确传递。示例如下：

const xhr = new XMLHttpRequest();
const baseUrl = "https://example.com/api/data";
const params = `param1=${encodeURIComponent("value1")}&param2=${encodeURIComponent("value2")}`;

xhr.open("GET", `${baseUrl}?${params}`, true);
xhr.send();

通过 encodeURIComponent，可以确保 URL 中的特殊字符（如空格）被正确编码，从而避免请求失败。

三、POST 请求与数据提交

1. POST 请求的定义

POST 请求主要用于向服务器提交数据，通常用于表单提交或其他会对服务器数据产生修改的操作。与 GET 请求不同的是，POST 请求的数据通常不会通过 URL 传递，而是通过请求体（body）进行传递。

2. 使用 POST 发送数据

在 POST 请求中，数据可以以多种形式提交，如 application/x-www-form-urlencoded、multipart/form-data 或 application/json 等格式。以下是一个通过 XMLHttpRequest 执行 POST 请求并发送表单数据的示例：

const xhr = new XMLHttpRequest();
const url = "https://example.com/api/submit";
const params = "name=JohnDoe&age=30";

xhr.open("POST", url, true);

// 设置请求头，告诉服务器数据的格式
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

// 发送请求并将数据放入请求体
xhr.send(params);

在这个例子中，数据以 application/x-www-form-urlencoded 的格式发送，即表单数据的形式，数据 name=JohnDoe&age=30 被放在请求体中，而不是 URL 中。

3. 发送 JSON 数据

除了表单数据外，POST 请求还可以用于发送 JSON 格式的数据。发送 JSON 数据时，Content-Type 通常设置为 application/json，并将数据通过 JSON.stringify() 转换为 JSON 字符串。示例如下：

const xhr = new XMLHttpRequest();
const url = "https://example.com/api/submit";
const data = JSON.stringify({
  name: "John Doe",
  age: 30
});

xhr.open("POST", url, true);

// 设置请求头，告诉服务器数据的格式为 JSON
xhr.setRequestHeader("Content-Type", "application/json");

// 发送请求并将 JSON 数据放入请求体
xhr.send(data);

在这个例子中，JSON.stringify() 将 JavaScript 对象转换为 JSON 格式的字符串，从而确保数据可以以 JSON 格式发送到服务器。

四、查询参数与请求体的比较

1. 查询参数的优缺点

优点：

• 简单直接，适用于少量数据的传递。
• 可以通过 URL 直接访问和共享请求。
• 易于在浏览器中进行缓存和书签保存。

缺点：

• 受限于 URL 长度，无法传递大量数据。
• 数据在 URL 中暴露，安全性较差。

2. 请求体的优缺点

优点：

• 可以传递大量数据，适合复杂的表单提交。
• 数据隐藏在请求体中，相对更安全。

缺点：

• 请求体中的数据无法通过 URL 直接访问，不适合 GET 请求。
• 数据不可被缓存或书签保存。

五、常见的错误与注意事项

1. URL 长度限制

虽然大多数现代浏览器支持相当长的 URL，但不同浏览器和服务器对 URL 长度有不同的限制，通常在 2000 个字符左右。因此，GET 请求传递大量数据时容易超出这个限制，导致请求失败。

2. 安全性问题

在 GET 请求中，查询参数暴露在 URL 中，容易被中间人截获或记录在服务器日志中。因此，涉及敏感信息（如密码）的数据传递应使用 POST 请求，并结合 HTTPS 进行加密。

3. 跨域问题

当使用 XMLHttpRequest 发起跨域请求时，可能会遇到跨域资源共享（CORS）问题。服务器需要在响应头中设置适当的 CORS 规则，允许跨域请求成功。

六、总结

通过本文，我们详细介绍了如何使用 XMLHttpRequest 发送 GET 和 POST 请求，并分别讲解了查询参数的使用与数据提交的方式。在实际开发中，选择合适的请求方法与数据传输方式至关重要。希望这篇文章能帮助开发者更好地理解和使用 XMLHttpRequest，灵活地处理查询参数与数据提交，从而开发出更加高效和安全的 Web 应用。

推荐：

• JavaScript
• react
• vue