AJAX - XMLHttpRequest
XMLHttpRequest 对象用于从服务器请求数据。
向服务器发送请求
要向服务器发送请求，我们使用 XMLHttpRequest 对象的 open() 和 send() 方法
xhttp.open("GET", "ajax_info.txt", true);
xhttp.send();
| 方法 | 描述 |
|---|---|
| open(方法, url, async) | 指定请求的类型 method：请求类型：GET 或 POST url：服务器（文件）位置 async：true（异步）或 false（同步） |
| send() | 将请求发送到服务器（用于 GET） |
| send(string) | 将请求发送到服务器（用于 POST） |
URL - 服务器上的文件
open() 方法的 url 参数是服务器上文件的地址
xhttp.open("GET", "ajax_test.asp", true);
文件可以是任何类型的文件，如 .txt 和 .xml，或者服务器脚本文件，如 .asp 和 .php（这些文件可以在服务器上执行操作，然后再将响应发送回来）。
异步 - 真或假？
应异步发送服务器请求。
open() 方法的 async 参数应设置为 true
xhttp.open("GET", "ajax_test.asp", true);
通过异步发送，JavaScript 不必等待服务器响应，而是可以
- 在等待服务器响应时执行其他脚本
- 在响应准备就绪后处理响应
async 参数的默认值为 async = true。
您可以安全地从代码中移除第三个参数。
不建议使用同步 XMLHttpRequest（async = false），因为 JavaScript 将停止执行，直到服务器响应就绪。如果服务器繁忙或缓慢，应用程序将挂起或停止。
GET 还是 POST？
GET 比 POST 更简单、更快，并且大多数情况下都可以使用。
但是，请始终在以下情况下使用 POST 请求：
- 无法使用缓存文件（更新服务器上的文件或数据库）。
- 向服务器发送大量数据（POST 没有大小限制）。
- 发送用户输入（可能包含未知字符），POST 比 GET 更健壮、更安全。
GET 请求
一个简单的 GET 请求
在上面的示例中，您可能会得到缓存的结果。要避免这种情况，请向 URL 添加一个唯一的 ID
如果您想使用 GET 方法发送信息，请将信息添加到 URL
服务器如何使用输入以及服务器如何响应请求，将在后续章节中进行解释。
POST 请求
一个简单的 POST 请求
要像 HTML 表单一样 POST 数据，请使用 setRequestHeader() 添加一个 HTTP 标头。在 send() 方法中指定要发送的数据
示例
xhttp.open("POST", "ajax_test.asp");
xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhttp.send("fname=Henry&lname=Ford");
自己动手试一试 »
| 方法 | 描述 |
|---|---|
| setRequestHeader(header, value) | 向请求添加 HTTP 标头 header：指定标头名称 value：指定标头值 |
同步请求
要执行同步请求，请将 open() 方法中的第三个参数更改为 false
xhttp.open("GET", "ajax_info.txt", false);
有时会使用 async = false 进行快速测试。您还会在旧的 JavaScript 代码中找到同步请求。
由于代码将等待服务器完成，因此不需要 onreadystatechange 函数
示例
xhttp.open("GET", "ajax_info.txt", false);
xhttp.send();
document.getElementById("demo").innerHTML = xhttp.responseText;
自己动手试一试 »
不建议使用同步 XMLHttpRequest（async = false），因为 JavaScript 将停止执行，直到服务器响应就绪。如果服务器繁忙或缓慢，应用程序将挂起或停止。
鼓励现代开发工具警告使用同步请求，并在发生时抛出 InvalidAccessError 异常。
