Ajax原理&ajax、axios、fetch区别

• Ajax的原理：
  简单来说，是在用户和服务器之间加了—个中间层(AJAX引擎)，通过XmlHttpRequest对象来向服务器发异步请求，从服务器获得数据，然后用javascript来操作DOM而更新页面。使用户操作与服务器响应异步化。这其中最关键的一步就是从服务器获得请求数据。

//1.创建连接
xhr = new XMLHttpRequest();
//2.连接服务器
xhr.open('get', url, true);
//3.发送请求
xhr.send(null);
//4.接受请求
xhr.onreadystatechange = function(){
    if(xhr.readyState == 4){ //响应已就绪
        if(xhr.status == 200){ //服务器返回数据成功
            success(xhr.responseText);
        } else { 
            /** false **/
            fail && fail(xhr.status);
        }
    }
}

XMLHttpRequest 对象的三个重要的属性

• ajax优点：
  1.通过异步模式，提升了用户体验；
  2.Ajax在客户端运行，承担了一部分本来由服务器承担的工作，减少了大用户量下的服务器负载；
  3.Ajax可以实现动态不刷新（局部刷新）；

• ajax缺点：
  1.安全问题 AJAX暴露了与服务器交互的细节；
  2.对搜索引擎的支持比较弱；
  3.不容易调试；

• 基于Promise封装Ajax:

1. 返回一个新的Promise实例
2. 创建HMLHttpRequest异步对象
3. 调用open方法，打开url，与服务器建立链接（发送前的一些处理）
4. 监听Ajax状态信息
5. 如果xhr.readyState == 4（表示服务器响应完成，可以获取使用服务器的响应了）
   5.1 xhr.status == 200，返回resolve状态
   5.2 xhr.status == 404，返回reject状态
6. xhr.readyState !== 4，把请求主体的信息基于send发送给服务器

function ajax(url, method) {
  return new Promise((resolve, reject) => {
    const xhr = new XMLHttpRequest() //实例化，以调用方法
    xhr.open(method, url, true)   //参数1，请求方法。参数2，url。参数3：异步
    xhr.onreadystatechange = function () {//每当 readyState 属性改变时，就会调用该函数。
      if (xhr.readyState === 4) {  //XMLHttpRequest 代理当前所处状态。
        if (xhr.status >= 200 && xhr.status < 300) { //200-300请求成功
          //JSON.parse() 方法用来解析JSON字符串，构造由字符串描述的JavaScript值或对象
          resolve(JSON.parse(xhr.responseText))
        } else if (xhr.status === 404) {
          reject(new Error('404'))
        }
      } else {
        reject('请求数据失败')
      }
    }
    xhr.send(null) //发送hppt请求
  })
}
let url = '/data.json'
ajax(url,'get').then(res => console.log(res))
  .catch(reason => console.log(reason))

• ajax、axios、fetch区别：
  jQuery ajax：

$.ajax({
   type: 'POST',
   url: url,
   data: data,
   dataType: dataType,
   success: function () {},
   error: function () {}
});

axios:

axios({
    method: 'post',
    url: '/user/12345',
    data: {
        firstName: 'Fred',
        lastName: 'Flintstone'
    }
})
.then(function (response) {
    console.log(response);
})
.catch(function (error) {
    console.log(error);
});

fetch:

try {
  let response = await fetch(url);
  let data = response.json();
  console.log(data);
} catch(e) {
  console.log("Oops, error", e);

}