关于 ajax的笔记

手写ajax

• 定义一个XhlHttpRequest对象，异步调用对象；
• 创建一个XHR的请求，并且指定 请求方式，url ，验证
• 设置响应Http请求状态变化的函数
• 发送Http请求
• 获取异步调用返回数据
• JS和DOM实现局部的刷新

const server_url = /server;
let xhr = new XMLHTTPRequest();

xhr.open("get",server_url,true)  //（method,url,async）

xhr.onreadystatechange = function(){
  if(this.readyState !== 4 ) return;
    
  // 当请求成功时
  if(this.status === 200){
    handle(this.response);
  }else{
    console.error(this.statusText);
  }
};
xhr.onerror = function() {
  console.error(this.statusText);
};

//设置请求头  json/form
xhr.responseType = "json";
xhr.setRequestHeader("Accept", "application/json");

//发送http请求
xhr.send(null);  


//使用Promise封装：
function getJSON(url) {
    // 创建一个 promise 对象
    let promise = new Promise(function(resolve, reject) {
      let xhr = new XMLHttpRequest();
  
      // 新建一个 http 请求
      xhr.open("GET", url, true);
      // 设置状态的监听函数
      xhr.onreadystatechange = function() {
        if (this.readyState !== 4) return;
  
        // 当请求成功或失败时，改变 promise 的状态
        if (this.status === 200) {
          resolve(this.response);
        } else {
          reject(new Error(this.statusText));
        }
      };
  
      // 设置错误监听函数
      xhr.onerror = function() {
        reject(new Error(this.statusText));
      };
  
      // 设置响应的数据类型
      xhr.responseType = "json";
  
      // 设置请求头信息
      xhr.setRequestHeader("Accept", "application/json");
  
      // 发送 http 请求
      xhr.send(null);
    });
  
    return promise;
  }

  getJSON("http://127.0.0.1:7001/default/index").then(
    res => console.log('请求成功: ' , res),
    err => console.log('请求失败: ' , err)
)

​ readyStatus的值会随着请求各阶段的变化而改变，其一共有 5 个值：

xhr.readyStatus==0 尚未调用 open 方法 xhr.readyStatus==1 已调用 open 但还未发送请求（未调用 send） xhr.readyStatus==2 已发送请求（已调用 send） xhr.readyStatus==3 已接收到请求返回的数据 xhr.readyStatus==4 请求已完成

ajax、fetch、axios 的区别

fetch号称是ajax的替代品，它的API是基于Promise设计的，旧版本的浏览器不支持Promise，需要使用polyfill es6-promise

fetch

• 当接收到一个代表错误的 HTTP 状态码时，从 fetch() 返回的 Promise 不会被标记为 reject， 即使响应的 HTTP 状态码是 404 或 500。相反，它会将 Promise 状态标记为 resolve （但是会将 resolve 的返回值的 ok 属性设置为 false ），仅当网络故障时或请求被阻止时，才会标记为 reject。
• fetch() 不会接受跨域 cookies；
• fetch 不会发送 cookies

fetch不是ajax的进一步封装，而是原生js，没有使用XMLHttpRequest对象

并不推荐

axios

• 可以在node.js中使用
• 提供了并发请求的接口
• 支持Promise API
• 客户端支持防止CSRF
• 提供了一些并发请求的接口（重要，方便了很多的操作）

function getUserAccount() {
  return axios.get('/user/12345');
}

function getUserPermissions() {
  return axios.get('/user/12345/permissions');
}

axios.all([getUserAccount(), getUserPermissions()])
  .then(axios.spread(function (acct, perms) {
    console.log('两个请求都完成了')
  }));