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