Ajax简单使用

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