AJAX XMLHttpRequest
XMLHttpRequest 对象用于从服务器请求数据。
向服务器发送请求
要向服务器发送请求,我们使用 XMLHttpRequest
目的:
xhttp.open("GET", "ajax_info.txt", true);
发送();
方法 | 描述 |
---|---|
打开(方法,url,异步) | 指定请求的类型 方法:请求类型:GET 或 POST 网址:服务器(文件)位置 异步:true(异步)或 false(同步) |
发送() | 向服务器发送请求(用于 GET) |
发送(细绳) | 向服务器发送请求(用于 POST) |
URL——服务器上的文件
url 参数 open()
方法,是服务器上文件的地址:
xhttp.open("GET", "ajax_test.asp", true);
该文件可以是任何类型的文件,如 .txt 和 .xml,或者服务器脚本文件,如 .asp 和 .html(可以在发回响应之前在服务器上执行操作)。
异步——正确还是错误?
服务器请求应该异步发送。
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 表单一样发布数据,请在 HTTP 标头中添加 setRequestHeader()
. 在 send()
方法:
例子
xhttp.open("POST", "ajax_test.asp");
xhttp.setRequestHeader("内容类型", "application/x-www-form-urlencoded");
xhttp.send("fname=Henry&lname=Ford");
亲自尝试 »
方法 | 描述 |
---|---|
设置请求头(标头,值) | 向请求添加 HTTP 标头 标题:指定标题名称 价值:指定标头值 |
同步请求
要执行同步请求,请更改 open()
方法false
:
xhttp.open("GET", "ajax_info.txt", false);
有时 async = false 用于快速测试。您还会在较旧的 JavaScript 代码中发现同步请求。
由于代码将等待服务器完成,因此不需要 onreadystatechange
功能:
例子
xhttp.open("GET", "ajax_info.txt", false);
发送();
文档.getElementById(“演示”)。innerHTML = xhttp.responseText;
亲自尝试 »
不建议使用同步 XMLHttpRequest (async = false),因为 JavaScript 将停止执行,直到服务器响应准备就绪。如果服务器繁忙或缓慢,应用程序将挂起或停止。
鼓励现代开发工具对使用同步请求发出警告,并在发生同步请求时抛出 InvalidAccessError 异常。