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 对象，您可以定义一个在请求收到响应时执行的函数。
该函数定义在 XMLHttpResponse 对象的 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。</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 异常。
