AJAX - XMLHttpRequest
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) |
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 不必等待服务器响应，而是可以
- 在等待服务器响应时执行其他脚本
- 在响应准备好后处理响应
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 异常。
