AJAX 请求
XMLHttpRequest 对象用于与服务器交换数据。
向服务器发送请求
要向服务器发送请求，我们使用XMLHttpRequest对象的open()和send()方法:
xhttp.open("GET", "ajax_info.txt", true);xhttp.send();
| 方法 | 描述 |
|---|---|
| open(method, url, async) | 指定请求的类型 method: 请求类型:GET或POST url: 服务器（文件）位置 async: true（asynchronous异步）或false（synchronous同步） |
| send() | 将请求发送到服务器（用于GET） |
| send(string) | 将请求发送到服务器（用于POST） |
GET 或 POST?
GET比POST更简单、更快，并且可以在大多数情况下使用。
但是，在以下情况下始终使用POST请求:
- 缓存文件不是选项（更新服务器上的文件或数据库）。
- 向服务器发送大量数据（POST没有大小限制）。
- 发送用户输入（可能包含未知字符），POST比GET更健壮、更安全。
GET 请求
一个简单的 GET 请求:
实例
xhttp.open("GET", "demo_get.asp", true);xhttp.send(); 尝试一下 »
在上面的实例中，您可能会得到缓存的结果。要避免这种情况，请向URL添加唯一ID:
实例
xhttp.open("GET", "demo_get.asp?t=" + Math.random(), true);xhttp.send(); 尝试一下 »
如果要使用GET方法发送信息，请将信息添加到URL:
实例
xhttp.open("GET", "demo_get2.asp?fname=Henry&lname=Ford", true);xhttp.send(); 尝试一下 »
POST 请求
一个简单的 POST 请求:
实例
xhttp.open("POST", "demo_post.asp", true);xhttp.send(); 尝试一下 »
要像HTML表单一样发布数据，请添加一个带有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 or False?
服务器请求应异步发送。
open() 方法的异步参数应设置为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(); 尝试一下 »
在后面的章节中，您将了解有关onreadystatechange的更多信息。
Synchronous 请求
要执行同步请求，请将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异常时抛出异常。
