AJAX -XMLHTTPREQUEST

XMLHttpRequest 对象用于从服务器请求数据。

向服务器发送请求

要将请求发送到服务器，我们使用open（）和send（）方法XMLHttpRequest目的：

xhttp.open("GET", "ajax_info.txt", true);
xhttp.send();

Method	Description
open(method, url, async)	Specifies the type of request method: the type of request: GET or POST url: the server (file) location async: true (asynchronous) or false (synchronous)
send()	Sends the request to the server (used for GET)
send(string)	Sends the request to the server (used for POST)

url - 服务器上的文件

URL参数open()方法，是服务器上文件的地址：

xhttp.open("GET", "ajax_test.html", true);

该文件可以是任何类型的文件，例如.txt和.xml，也可以是服务器脚本的文件，例如.html和.html（在将响应发送回响应之前，可以在服务器上执行操作）。

异步——正确还是错误？

服务器请求应该异步发送。

Open（）方法的异步参数应设置为true：

xhttp.open("GET", "ajax_test.html", true);

通过异步发送，JavaScript不必等待服务器响应，而是可以：

等待服务器响应时执行其他脚本
响应准备好后处理响应

async 参数的默认值为 async = true。

您可以安全地从代码中删除第三个参数。

不建议使用同步XMLHTTPREQUEST（async = false），因为JavaScript将停止执行直到服务器响应准备就绪。如果服务器忙或慢，则应用程序将悬挂或停止。

获取还是发布？

GET比比POST，并且可以在大多数情况下使用。

但是，在以下情况下请始终使用 POST 请求：

缓存文件不是一个选项（更新服务器上的文件或数据库）。
向服务器发送大量数据（POST没有大小限制）。
发送用户输入（可能包含未知字符），帖子比获得更强大和安全。

获取请求

一个简单的GET要求：

示例

xhttp.open("GET", "demo_get.html");
xhttp.send();

亲自试一试 »

在上面的示例中，您可能会得到缓存的结果。为了避免这种情况，请向 URL 添加唯一 ID：

示例

xhttp.open("GET", "demo_get.html?t=" + Math.random());
xhttp.send();

亲自试一试 »

如果您想与GET方法，将信息添加到URL：

示例

xhttp.open("GET", "demo_get2.html?fname=Henry&lname=Ford");
xhttp.send();

亲自试一试 »

服务器如何使用输入以及服务器如何响应请求，将在后面的章节中解释。

发布请求

一个简单的POST要求：

示例

xhttp.open("POST", "demo_post.html");
xhttp.send();

亲自试一试 »

要像HTML表单一样发布数据，请添加一个HTTP标头setRequestHeader()。指定要发送的数据send()方法：

示例

xhttp.open("POST", "ajax_test.html");
xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhttp.send("fname=Henry&lname=Ford");

亲自试一试 »

Method	Description
setRequestHeader(header, value)	Adds HTTP headers to the request header: specifies the header name value: specifies the 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例外。