一、XMLHttpRequest(XHR)即Ajax

Ajax是指一种创建交互式网页应用的网页开发技术，并且可以做到无需重新加载整个网页的情况下，能够更新部分网页，也叫作局部更新。

使用ajax发送请求是依靠于一个对象，叫XmlHttpRequest对象，通过这个对象我们可以从服务器获取到数据，然后再渲染到我们的页面上。现在几乎所有的浏览器都有这个对象，只有IE7以下的没有，而是通过ActiveXObject这个对象来创建的。

XmlHttpRequest对象有一些常见的方法：

使用Ajax步骤

1. 创建XmlHttpRequest对象

2. 调用open方法设置基本请求信息

3. 设置发送的数据，发送请求

4. 注册监听的回调函数

5. 拿到返回值，对页面进行更新

示例代码

// get请求
<script>
    //步骤一:创建异步对象
    var xhr = new XMLHttpRequest();
    //步骤二:设置请求的基本参数
    xhr.open('get','test.php');
    //步骤三:发送请求
    xhr.send();
    //步骤四:注册onreadystatechange监听事件，只要状态改变就会调用
    xhr.onreadystatechange = function () {
    if (ajax.readyState == 4 && ajax.status == 200) {
      //步骤五 如果能够进到这个判断 说明数据完美到手
　　　　console.log(ajax.responseText);//操作返回内容
　　  }
    }
</script>
// post请求
<script>
    //创建异步对象  
    var xhr = new XMLHttpRequest();
    //设置请求基本信息，并加上请求头
    xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
    xhr.open('post', 'test.php' );
    //发送请求
    xhr.send('name=Lan&age=18');
    xhr.onreadystatechange = function () {
        // 这步为判断服务器是否正确响应
      if (xhr.readyState == 4 && xhr.status == 200) {
        console.log(xhr.responseText);
      } 
    };
</script>

onreadystatechange状态值

优缺点

二、Jquery Ajax

Jquery的ajax就是在原生的ajax的基础上进行了封装，加上了对JSONP的支持

代码示例

<script>
    var loginBtn =  document.getElementsByTagName("button")[0];
    loginBtn.onclick = function(){
        $.ajax({
            type:"post",
            url:"test.php",
            data:"name=lan&pwd=123456",
            success:function(data){
               console.log(data);
            }
        });
    }
</script>

优缺点

继承了Ajax的所有优缺点，同时产生了以下几个缺点：

1. 本身是针对MVC的编程,不符合现在前端MVVM的浪潮

2. 基于原生的XHR开发，XHR本身的架构不清晰

3. JQuery整个项目太大，单纯使用ajax却要引入整个JQuery非常的不合理（采取个性化打包的方案又不能享受CDN服务）

4. 不符合关注分离（Separation of Concerns）的原则

5. 配置和调用方式非常混乱，而且基于事件的异步模型不友好

三、axios

axios 是一个基于Promise用于浏览器和nodejs的HTTP客户端，本质上也是对原生XHR的封装，只不过它是Promise的实现版本，符合最新的ES规范

代码示例

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

流程图

axios流程图

优缺点（几乎没有缺点）

四、fetch

Fetch API 提供了一个 JavaScript 接口，用于访问和操纵 HTTP 管道的一些具体部分，例如请求和响应。它还提供了一个全局 fetch() 方法，该方法提供了一种简单，合理的方式来跨网络异步获取资源。fetch不是ajax的进一步封装，而是原生js，没有使用XMLHttpRequest对象。

fetch 规范与 jQuery.ajax() 主要有三种方式的不同

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

• fetch() 不会接受跨域 cookies；你也不能使用 fetch() 建立起跨域会话。其他网站的 Set-Cookie 头部字段将会被无视。

• fetch 不会发送 cookies。除非你使用了credentials 的初始化选项。（自 2017 年 8 月 25 日以后，默认的 credentials 政策变更为 same-origin。Firefox 也在 61.0b13 版本中进行了修改）

示例代码

fetch('http://example.com/movies.json')
  .then(function(response) {
    return response.json();
  })
  .then(function(myJson) {
    console.log(myJson);
  });

优缺点