JS AJAX---请求

XMLHttpRequest对象用于同服务器交换数据

向服务器发送请求

如需向服务器发送请求，我们使用 XMLHTTPRequest 对象的open（）和 send（）方法：

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

open(method,url,async,user,psw)

规定请求

• method：请求类型 GET或POST
• url ：服务器（文件）位置
• async : true(异步) 或false（同步）
• user： 可选的用户名称
• psw: 可选的密码

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=Bill&lname=Gates", true);
xhttp.send();

POST请求

一条简单的POST请求：
实例

xhttp.open("POST", "demo_post.asp", true);
xhttp.send();

如需像 HTML 表单那样 POST 数据，请通过 setRequestHeader() 添加一个 HTTP 头部。
请在 send() 方法中规定您需要发送的数据：

实例

xhttp.open("POST", "ajax_test.asp", true);
xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhttp.send("fname=Bill&lname=Gates");

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);

发送异步请求对 web 开发人员来说是一个巨大的进步。服务器上执行的许多任务都非常耗时。
在 AJAX 之前，此操作可能会导致应用程序挂起或停止。

通过异步发送 ，JS 不必等待服务器响应，，而是可以做些其他事情：

• 在等待服务器响应时执行其他脚本
• 当响应就绪时处理响应

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();

同步请求

如需执行同步的请求，请把 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 异常。