创建 XMLHttpRequest 对象

open 方法

onreadystatechange

responseText

POST 请求注意事项

• POST请求必须用 application/x-www-form-urlencoded 来告诉后端我是POST请求，需要后端把参数转为键值对形式解析

{
	a: 1,
  b: 2,
  c: 3
}

示例

GET

var xhr;

// 1. 创建一个 XMLHttpRequest 类型的对象 —— 相当于打开了一个浏览器
if (window.XMLHttpRequest) { // 兼容性
  xhr = new XMLHttpRequest();
} else {
  xhr = new ActiveXObject('Microsoft.XMLHTTP');
}

// 2. 打开与一个网址之间的连接 —— 相当于在地址栏输入访问地址
xhr.open('GET', '<https://api.publicapis.org/entries>', true);

// 3. 通过连接发送一次请求 —— 相当于回车或者点击访问发送请求
xhr.send();

console.log(xhr.readyState); // 0 1 在发送前和发送后

// 4. 指定 xhr 状态变化事件处理函数 —— 相当于处理网页呈现后的操作
xhr.onreadystatechange = function() {
  console.log(xhr.readyState); // 2 3 4 在 onreadystatechange 中
  // 通过 xhr 的 readyState 判断此次请求的响应是否接收完成
  // 4代表done
  if (xhr.readyState === 4 && xhr.status === 200) {
    // 通过 xhr 的 responseText 获取到响应的响应体
    console.log(JSON.parse(xhr.responseText));
  }
}

POST

var xhr;

if (window.XMLHttpRequest) { // 兼容性
  xhr = new XMLHttpRequest();
} else {
  xhr = new ActiveXObject('Microsoft.XMLHTTP');
}

xhr.open('POST', '<https://api.publicapis.org/entries>', true);
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
// post请求要写 👆(setRequestHeader写open和send之间) 
// post参数是字符串形式 👇🏻
xhr.send('status=1&flag=1');

console.log(xhr.readyState); // 0 1 在发送前和发送后

xhr.onreadystatechange = function() {
  console.log(xhr.readyState); // 2 3 4 在 onreadystatechange 中
  if (xhr.readyState === 4 && xhr.status === 200) {
    console.log(JSON.parse(xhr.responseText));
  }
}