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(asynchronous异步)或false(synchronous同步) |
send() | 将请求发送到服务器(用于GET) |
send(string) | 将请求发送到服务器(用于POST) |
GET 或 POST?
GET比POST更简单、更快,并且可以在大多数情况下使用。
但是,在以下情况下始终使用POST请求:
- 缓存文件不是选项(更新服务器上的文件或数据库)。
- 向服务器发送大量数据(POST没有大小限制)。
- 发送用户输入(可能包含未知字符),POST比GET更健壮、更安全。
GET 请求
一个简单的 GET 请求:
在上面的实例中,您可能会得到缓存的结果。要避免这种情况,请向URL添加唯一ID:
如果要使用GET方法发送信息,请将信息添加到URL:
POST 请求
一个简单的 POST 请求:
要像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异常时抛出异常。