本文共 2229 字，大约阅读时间需要 7 分钟。

XMLHttpRequest对象用于和服务器交换数据，简单来说，它是JavaScript与服务器通信的核心技术。以下是关于XMLHttpRequest的详细指南，供开发者参考。

1. 向服务器发送请求

要实现与服务器的通信，XMLHttpRequest对象提供了两个关键方法：open()和send()。open()方法用于指定请求的类型、URL以及是否异步处理，而send()方法则用于将请求发送到服务器。

open()方法

open(method, url, async)

• method：指定请求的类型，常见值有"GET"和"POST"。
• url：文件在服务器上的路径，可以是 TXT、XML 或服务器脚本文件（如 ASP、PHP）。
• async：true表示异步处理，false表示同步处理。

send()方法

send(string)

• string：仅在 POST 请求中使用，用于发送数据。对于 GET 请求，send()方法通常不需要参数。

2. GET 与 POST 请求

选择 GET 还是 POST 请求取决于具体需求。

GET 请求

GET 请求简单且效率高，是大多数场景的最佳选择。以下是示例代码：

xmlhttp.open("GET", "demo_get.asp", true);
xmlhttp.send();

为了避免缓存问题，可以在 URL 中添加唯一的标识符：

xmlhttp.open("GET", "demo_get.asp?t=" + Math.random(), true);
xmlhttp.send();

如果需要通过 GET 方法传递参数，可以直接在 URL 中添加参数：

xmlhttp.open("GET", "demo_get2.asp?fname=Bill&lname=Gates", true);
xmlhttp.send();

POST 请求

POST 请求适用于需要发送数据的场景，常见于表单提交。以下是基础的 POST 请求示例：

xmlhttp.open("POST", "demo_post.asp", true);
xmlhttp.send();

如果需要像 HTML 表单那样发送数据，可以使用 setRequestHeader() 方法添加 HTTP 头，并在 send() 方法中指定数据：

xmlhttp.open("POST", "ajax_test.asp", true);
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlhttp.send("fname=Bill&lname=Gates");

3. HTTP 头设置

为了更灵活地控制请求，可以通过 setRequestHeader() 方法添加自定义 HTTP 头。以下是示例：

xmlhttp.setRequestHeader("headerName", "headerValue");

4. URL - 服务器上的文件

open() 方法的 url 参数指定的是服务器上的文件路径。例如：

xmlhttp.open("GET", "ajax_test.asp", true);

该文件可以是任何类型的文件，包括脚本文件（如 ASP、PHP）。

5. 异步 - true 或 false？

AJAX（Asynchronous JavaScript and XML）本质上是基于异步请求的。因此，XMLHttpRequest 对象的 open() 方法中，async 参数应设置为 true：

xmlhttp.open("GET", "ajax_test.asp", true);

异步请求的优势在于 JavaScript 可以在等待服务器响应时继续执行其他脚本。当服务器响应就绪时，通过 onreadystatechange 事件处理响应。

6. onreadystatechange 事件

当 async=true 时，需要指定一个回调函数来处理响应：

xmlhttp.onreadystatechange = function() {
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
        document.getElementById("myDiv").innerHTML = xmlhttp.responseText;
    }
};
xmlhttp.open("GET", "test1.txt", true);
xmlhttp.send();

当使用 async=false 时，send() 方法后面可以立即执行其他代码：

xmlhttp.open("GET", "test1.txt", false);
xmlhttp.send();
document.getElementById("myDiv").innerHTML = xmlhttp.responseText;

7. GET 与 POST 的选择

选择 GET 还是 POST 请求时，需综合考虑以下因素：

• GET 请求简单且无数据量限制。
• POST 请求适合发送大量数据或更新服务器上的文件和数据库。
• GET 请求的缓存特性可能导致结果过期。