ajax（Asynchronous JavaScript And XML）：异步的JavaScript和数据传输
- 数据传输格式
① XML：适合重量级数据，通过标签传输，解析较复杂
② JSON：适合轻量级数据，通过字符串传输，解析较容易（经常使用） - 语法
① 声明ajax对象：let xhr = new XMLHttpRequest();
② 预设请求方式、要访问的地址、是否异步：xhr.open(‘get/post’, url, true/false);
③ 发送请求：xhr.send();
④ 等待响应：通过事件处理函数onreadystatechange监听readystate变化 - readyState取值
① 0：调用open方法之前
② 1：调用send方法之后，发送请求时
③ 2：send方法完成，已经接收到所有相应数据
④ 3：正在解析数据
⑤ 4：解析完成 - get请求
let xhr = new XMLHttpRequest(); // 声明ajax对象 xhr.open('get', './get.php?username=xxx&password=yyy', true); // 预设get请求方式、拼接查询字符串的地址、是否异步 xhr.send(); // 向服务器发送请求 xhr.onreadystatechange = function() { // 等待数据相应 if (xhr.readyState === 4 && xhr.status === 200) { // 解析完成且状态码为200时，进行后续操作 console.log(xhr.responseText); } - post请求
let xhr = new XMLHttpRequest(); // 声明ajax对象 xhr.open('post', 'post.php', true); // 预设post请求方式，要访问的地址，是否异步 xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded'); // 设置请求头部，用来解析传入的参数 xhr.send('username=xxx&password=yyy'); // 向服务器发送请求，需要传入queryString xhr.onreadystatechange = function () { // 等待数据响应 if (xhr.readyState === 4 && xhr.status === 200) { // 解析完成且状态码为200时，进行后续操作 console.log(xhr.responseText); } }