Ajax概念及使用

1. Ajax概念

  首先我们来说一下，什么是Ajax,它的全名是async JavaScript and XML,翻译过来就是“异步的JavaScript和XML”，有很多人会误认为Ajax是发送请求的一种方式或者认为Ajax和XMLHttpRequest是一样的，其实这种想法是错误的。Ajax是一个技术统称，是一个概念模型，是客户端个服务端发送消息以及接受响应的工具，是一种使用现有标准的新方法，它的特性之一就是实现页面局部刷新。

1.1 同步和异步

  Ajax是一个默认异步执行机制的功能，AJAX分为同步（async=false）和异步（async=true）

  1）同步请求

        同步请求就是指当前请求发生后，浏览器在请求完成返回数据之前什么都不能做，也不能执行后续的状态，也就是说，当js代码加载到当前Ajax的时候，会把页面里所有的代码都停止加载，此时页面就会处于一种假死状态

        只有当Ajax执行完才能解除假死状态

  2）异步请求

        默认情况下是异步，这个的意思就是，当发生异步请求的时候，浏览器可以做任何事情，不会影响页面的加载和用户的 *** 作

2. Ajax的优势 原生js即可使用不需要刷新页面就可以更新数据可以减轻服务端和宽带的负担 3. Ajax如何工作

*** 作流程

页面发生一个事件（如页面加载、按钮点击…）js创建XMLHttpRequest对象XMLHttpRequest对象向web服务器发送请求服务器处理该请求服务器将响应发送返回到网页js读取响应js执行正确 *** 作（如页面更新） 4. Ajax的使用   1）给服务器发送请求

// 1. 创建 xmlHttpRequest 对象
      let xmlhttp;
      if (window.XMLHttpRequest) {
         //  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
         xmlhttp = new XMLHttpRequest();
         } else {
         // IE6, IE5 浏览器执行代码
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }

// 2. 设置回调函数
      xmlHttp.onreadystatechange = callback;

// 3. 使用 open 方法与服务器建立连接
      xmlhttp.open(method, url, async);
     /*
       method：请求的类型；GET 或 POST
       url：文件在服务器上的位置
       async：true（异步）或 false（同步）
     */

// 添加请求头信息（可选）
      xmlhttp.setRequestHeader(header, value);

// 4. 使用 send 方法发送请求
      xmlhttp.send(string);
      /*
     string：仅用于 POST 请求,格式可以为 multipart/form-data，JSON，XML
     */

  以上步骤只能把请求发送到服务端，如果我们要相应到客户端的话，必须要有两个前提条件，即：

本次http请求是成功的ajax请求成功

  可以通过它们各自的状态码判断

  2)针对不同状态进行处理

   function callback() {
      if (xmlHttp.readyState == 4) {
    //判断交互是否成功
    /*
    readyState属性：表示请求/响应过程的当前阶段
    0：未初始化。尚未调用 open()方法。
    1：启动。已经调用 open()方法，但尚未调用 send()方法。
    2：发送。已经调用 send()方法，但尚未接收到响应。
    3：接收。已经接收到部分响应数据。
    4：完成。已经接收到全部响应数据，而且已经可以在客户端使用了。
    只有在XMLHttpRequest对象完成了以上5个步骤之后，才可以获取从服务器端返回的数据。
    */
      if (xmlHttp.status == 200) {
      /*
        status属性：响应的 HTTP 状态码,常见的状态码如下
        200：响应成功
        301：永久重定向/永久转移
        302：临时重定向/临时转移
        304：本次获取内容是读取缓存中的数据
        400：请求参数错误
        401：无权限访问
        404：访问的资源不存在
    */
      //服务器的响应，可使用 XMLHttpRequest 对象的 responseText（获得字符串形式的响应数据） 或
      // responseXML (获得 XML 形式的响应数据) 属性获得
      let responseText = xmlHttp.responseText;
    } else {
      // 失败，根据响应码判断失败原因
    }
  }
}

3)响应成功和失败的API使用

//响应成功
      xmlHttp.onload = function () {};
//等效于
      xmlHttp.onreadystatechange = function () {
        if (xmlHttp.readyState == 4) {
         if (xmlHttp.status == 200) {
      }
   }
};

//响应失败
      xmlHttp.onerror = function () {};
//等效于
       xmlHttp.onreadystatechange = function () {
         if (xmlHttp.readyState == 4) {
          if (xmlHttp.status !== 200) {
      }
   }
};

5. 实例

// 将前端请求接口单独提取出来,方便复用和调整
//此接口可以改变
const BASE_URL="http://localhost:3000";
export default function Ajax({
    // 请求参数配置
    method="GET",
    // 默认为'get'请求
    url,
    data={},
}){
    return new Promise ((resolve)=>{
        // 通过Promise返回异步请求
        // 创建一个ajax对象
        const xhr=new XMLHttpRequest();
        /**
         * xhr对象中的open方法用来配置请求信息，建立对服务器的调用
         * xhr.open('请求⽅式', '请求地址', 是否异步)
         */
        xhr.open(method,BASE_URL+url);
        // XMLHttpRequest提供的响应成功时api的使用
        xhr.onload=function(){
            resolve(JSON.parse(xhr.response));
        };
        // XMLHttpRequest提供的响应失败时api的使用
        xhr.onerror=function(){
            // 最后进行错误处理
            if(xhr.status==0){

            }
        };
        //发送请求
        xhr.send(JSON.stringify(data));
    });
}