XMLHttpRequest对象可用来与服务器进行数据交互。

---

AJAX - 向服务器发送请求

在向服务器发送请求前，首先需要使用XMLHttpRequest对象的open()方法来定义该请求。

方法	描述
open(method, url, async, user, psw)	定义一个请求 method:请求方式（GET请求或POST请求） url:发送请求的url地址 async:是否异步请求，true代表异步请求，false代表同步请求，默认为true user:用户名（可选参数） psw:密码（可选参数）
send()	发送请求（常见于GET请求）
send(string)	发送请求，string为要发送给服务器的数据（常见于POST请求，大多POST请求都会发送一些数据给服务器）

示例：

xhttp.open("GET", "/action_page", true);
xhttp.send();

运行一下

GET方法 vs POST方法

GET方法和POST方法都是很常用的请求方法，但是各自有各自的特点。

对于GET方法来说：

• 主要以获取指定数据为主（更倾向于用来获取公开的数据）
• GET请求可以带有参数，但是一般来说，带有参数的目的会是获取指定数据，而不是以发送数据给服务器为目的

对于POST方法来说：

• POST请求一般是以发送数据给服务器为目的
• POST请求更适合发送大量数据给服务器
• POST请求更适合用来交互相对隐私的数据
• 提交用户表单一般都用POST请求

AJAX - GET请求

简单的GET请求。

xhttp.open("GET", "/action_page", true);
xhttp.send();

运行一下

在GET请求中附加上参数。

xhttp.open("GET", "/action_page?a=666&b=zhuanfou", true);
xhttp.send();

运行一下

AJAX - POST请求

简单的POST请求。

xhttp.open("POST", "/action_page", true);
xhttp.send();

运行一下

在POST请求中附加上参数。

xhttp.open("POST", "/action_page", true);
xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhttp.send("a=666&b=zhuanfou");

运行一下

AJAX - 回调函数

通过onreadystatechange属性可设置回调函数。

xhttp.onreadystatechange = function() {
  if (this.readyState == 4 && this.status == 200) {
    document.getElementById("demo").innerHTML = this.responseText;
  }
};
xhttp.open("POST", "/action_page", true);
xhttp.send();

运行一下

---

open()方法的第三个参数是布尔型，true代表异步请求，false代表同步请求。在这里虽然没有分别举例，但是基本上都不会有人去取值false来进行同步请求。总之，不要去用同步请求，异步请求是王道。