Ajax了解与使用

一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第 11 天，点击查看活动详情。

Ajax 是什么

Ajax 全称 Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）

Ajax 的原理

Ajax 的工作原理相当于在用户和服务器之间加了—个中间层(AJAX 引擎)，使用户操作与服务器响 应异步化。并不是所有的用户请求都提交给服务器。像—些数据验证和数据处理等都交给 Ajax 引 擎自己来做,，只有确定需要从服务器读取新数据时再由 Ajax 引擎代为向服务器提交请求。

Ajax 的基本使用方法 #####创建 Ajax 实例

const xml = new XMLHttpRequest();

向服务器发送请求

open和send向服务器发送器请求 open(method,URL,async)规定请求的类型、URL 以及是否异步处理请求。method：请求的类型；GET 或 POSTurl：文件在服务器上的位置 async：true（异步）或 false（同步） send(string)将请求发送到服务器。string：仅用于 POST 请求 #####请求类型 GET:获取请求页面信息，并返回请求主体 POST提交请求，post 肯会导致新的表建立或者修改 PUT：提交请求，和 post 类似，但是他修改的是表的属性 DELETE：提交删除请求。删除数据库当中的一些数据 OPTIONS：允许客户端查看服务器请求 #####状态码

• 1** 信息，服务器收到请求，需要请求者继续执行操作
  • 100 客户端应该继续其请求
  • 101 切换协议
• 2** 成功，操作被成功接收并处理
  • 200 请求成功
• 3** 重定向，需要进一步的操作以完成请求
  • 301 永久重定向
  • 302 临时重定向
• 4** 客户端错误，请求包含语法错误或无法完成请求
  • 404 请求资源或网页不存在
• 5** 服务器错误，服务器在处理请求的过程中发生了错误
  • 500 内部服务器错误 #####简单的 Ajax 链接

// 创建一个ajax对象
const xhr = new XMLHttpRequest();
console.log(xhr.readyState);
// 参数1：请求的地址 post/get
// 参数二：请求的地址
// 参数三：同步还是异步，true为同步，false为异步
xhr.open("post", "01php.php", true);
// 设置编码头部
xhr.setRequestHeader("content-type: application/json;charset=UTF-8");
xhr.send();
console.log(xhr.readyState);
// readyState
/*
      0:初始化
      1：执行了open方法和send方法
      2：载入完成，接收服务器端数据
      3:接收到服务器端数据
      4:数据已经完成解析
    */
xhr.onreadystatechange = function (data) {
  console.log(xhr.readyState);
  if (xhr.readyState == 4 && status == 200) {
    console.log(data);
  }
};
console.log(xhr);