XHR详解：掌握网络编程的钥匙，轻松实现数据交互

2023-04-26 23:40:51

XHR：解锁浏览器端的 HTTP 交互

一、XHR 简介

在现代 Web 开发中， XMLHttpRequest（XHR）是必不可少的。它是一个内置在 JavaScript 中的对象，使开发者能够与服务器进行交互，发送和接收 HTTP 请求和响应。通过 XHR，你可以获取数据、发送表单、上传文件，甚至实现复杂的 AJAX 操作。

二、XHR 基本用法

要使用 XHR，你需要：

创建一个 XHR 对象： var xhr = new XMLHttpRequest();
设置请求属性：
- xhr.open(method, url);（指定请求方法和 URL）
- xhr.setRequestHeader(name, value);（设置请求头）
发送请求： xhr.send();
处理响应： xhr.onreadystatechange = function() { ... };

三、XHR 常见问题

1. 如何防止缓存？

浏览器默认对 XHR 请求进行缓存，可能会导致数据不一致。要避免这种情况，请使用：

xhr.setRequestHeader("Cache-Control", "no-cache");
xhr.setRequestHeader("Pragma", "no-cache");

2. GET 和 POST 请求的区别？

GET 请求的参数放在 URL 中，而 POST 请求的参数放在请求体中。GET 请求的限制更小，只能携带少量参数，而 POST 请求没有限制，还可以上传文件。

3. readyState 的意义？

readyState 是 XHR 对象的一个属性，表示其状态。有 5 种状态：

0：未初始化
1：已建立连接
2：已发送请求
3：正在处理
4：已完成

四、XHR 代码示例

获取服务器上的 JSON 数据：

var xhr = new XMLHttpRequest();
xhr.open("GET", "data.json");
xhr.send();

xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    var data = JSON.parse(xhr.responseText);
    // 使用 data
  }
};

发送带有数据的 POST 请求：

var xhr = new XMLHttpRequest();
xhr.open("POST", "submit.php");
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhr.send("name=John&age=30");

xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    // 处理服务器响应
  }
};