AJAX - 向服务器发送 请求
XMLHttpRequest 对象用于与服务器交换数据。
向服务器发送请求
要向服务器发送请求，我们使用 XMLHttpRequest 对象的 open() 和 send() 方法
xhttp.open("GET", "ajax_info.txt", true);
xhttp.send();
| 方法 | 描述 |
|---|---|
| open(method, url, async) | 指定请求的类型 method: 请求的类型：GET 或 POST url: 服务器（文件）位置 async: true（异步）或 false（同步） |
| send() | 将请求发送到服务器（用于 GET） |
| send(string) | 将请求发送到服务器（用于 POST） |
GET 还是 POST？
GET 更简单、比 POST 更快，并且可以在大多数情况下使用。
但是，请始终使用 POST 请求，当
- 无法缓存文件时（更新服务器上的文件或数据库）。
- 发送大量数据到服务器时（POST 没有大小限制）。
- 发送用户输入时（可能包含未知字符），POST 比 GET 更健壮、更安全。
GET 请求
一个简单的 GET 请求
在上面的示例中，您可能会得到一个缓存的结果。要避免这种情况，请在 URL 中添加一个唯一 ID
如果您想通过 GET 方法发送信息，请将信息添加到 URL
POST 请求
一个简单的 POST 请求
要像 HTML 表单一样 POST 数据，请使用 setRequestHeader() 添加一个 HTTP 标头。在 send() 方法中指定要发送的数据
示例
xhttp.open("POST", "demo_post2.asp", true);
xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhttp.send("fname=Henry&lname=Ford");
自己动手试一试 »
| 方法 | 描述 |
|---|---|
| setRequestHeader(header, value) | 向请求添加 HTTP 标头 header: 指定标头名称 value: 指定标头值 |
URL - 服务器上的文件
open() 方法的 url 参数是服务器上文件的地址
xhttp.open("GET", "ajax_test.asp", true);
文件可以是任何类型的文件，如 .txt 和 .xml，或者服务器脚本文件，如 .asp 和 .php（它们可以在将响应发送回来之前在服务器上执行操作）。
异步 - True 或 False？
服务器请求应异步发送。
open() 方法的 async 参数应设置为 true
xhttp.open("GET", "ajax_test.asp", true);
通过异步发送，JavaScript 不必等待服务器响应，而是可以
- 在等待服务器响应时执行其他脚本
- 在响应准备好后处理响应
onreadystatechange 属性
使用 XMLHttpRequest 对象，您可以定义一个在请求收到答案时执行的函数。
该函数在 XMLHttpRequest 对象的 onreadystatechange 属性中定义
示例
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("demo").innerHTML = this.responseText;
}
};
xhttp.open("GET", "ajax_info.txt", true);
xhttp.send();
自己动手试一试 »
上面示例中使用的 "ajax_info.txt" 文件是一个简单的文本文件，内容如下：
<h1>AJAX</h1>
<p>AJAX 不是一种编程语言。</p>
<p>AJAX 是一种从网页访问 Web 服务器的技术。</p>
<p>AJAX 代表 Asynchronous JavaScript And XML（异步 JavaScript 和 XML）。</p>
您将在后续章节中了解更多关于 onreadystatechange 的信息。
同步请求
要执行同步请求，请将 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 将停止执行，直到服务器响应准备就绪。如果服务器繁忙或响应缓慢，应用程序将挂起或停止。
同步 XMLHttpRequest 正在被移除出 Web 标准，但这个过程可能需要很多年。
鼓励现代开发工具警告使用同步请求，并在发生时抛出 InvalidAccessError 异常。
