js-原创-《前端与服务器异步交互的两种方式：XMLHttpRequest（XHR）、fetch》

参考：

https://qianduan.group/posts/5bebe26f9fd64d5a7458a932

https://blog.csdn.net/qq_39096319/article/details/82347033

一，XMLHttpRequest（XHR）

XMLHttpRequest是最早出现的与服务器交互数据的方案，有了XMLHttpRequest，开发者终于可以在不重新加载页面的情况下更新网页，可以在页面加载后请求接受以及发送数据。

1，原生XMLHttpRequest

所有浏览器均可以获取XMLHttpRequest对象：

var xhr = new XMLHttpRequest(); //获取xhr对象

但XMLHttpRequest是个比较粗燥的底层对象，各个浏览器对其的创建方法也不同，以下是兼容方法：

var xhr;
if (window.XMLHttpRequest) { // Mozilla, Safari...
    xhr = new XMLHttpRequest();
} else if (window.ActiveXObject) { // IE
    try {
        xhr = new ActiveXObject('Msxml2.XMLHTTP');
    } catch (e) {
        try {
            xhr = new ActiveXObject('Microsoft.XMLHTTP');  //IE5,6
        } catch (e) {
            
        }
    }
}

get请求：

//get请求
xhr.open("GET","test1.txt",true);
xhr.send();

完整的post请求：

var xhr;
if (window.XMLHttpRequest) { // Mozilla, Safari...
  xhr = new XMLHttpRequest();
} else if (window.ActiveXObject) { // IE
  try {
    xhr = new ActiveXObject('Msxml2.XMLHTTP');
  } catch (e) {
    try {
      xhr = new ActiveXObject('Microsoft.XMLHTTP');
    } catch (e) {}
  }
}
if (xhr) {
  xhr.onreadystatechange = onReadyStateChange;
  xhr.open('POST', '/api', true);
  // 设置 Content-Type 为 application/x-www-form-urlencoded
  // 以表单的形式传递数据
  xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
  xhr.send('username=admin&password=root');
}


// onreadystatechange 方法
function onReadyStateChange() {
  // 该函数会被调用四次
  if (xhr.readyState === 4 &&xhr.status === 200) {
    console.log('执行成功');
  } else {
    console.log('执行出错');
  }
}

2，jQuery.ajax

实际开发过程中，一般不会使用原生的XHR来写，而是使用一些工具包提供的封装，最常见的就是jQuery.ajax。独特的优势是支持jsonp，但是有过实际使用体验的人都知道，这样不支持链式写法的代码可读性很差。

$.ajax({   //标准写法
   type: 'POST',
   url: url,
   data: data,
   dataType: dataType,
   success: function () {},
   error: function () {}
});
$.get(url,function(){}); //get请求
$.post(url,body,function(){}); //post请求
$.getJSON(url,function(){});  //get请求从服务器加载Json编码

3，axios

axios其实就是在ajax的基础上加了promise

const myAxios = {
        get: function(url) {
            return new Promise((resolve, reject) => {
                var xhr = new XMLHttpRequest();
                xhr.open('GET', url, true);
                xhr.onreadystatechange = function() {
                    if (xhr.readyState == 4 && xhr.status == 200) {
                        resolve(xhr.responseText)
                };
                xhr.send();
            })
        },

二，fetch

fetch是不同于XHR的另一种底层技术，基于ES5的Promise的异步处理机制，使用起来会比起ajax更加简单

fetch(url).then(function(response) {
    return response.json();
}).then(function(data) {
    console.log(data);
}).catch(function(e) {
    console.log("Oops, error");
});

fetch (
    url, 
    {
        body: JSON.stringify(data), // must match 'Content-Type' header
        cache: 'no-cache', // *default, no-cache, reload, force-cache, only-if-cached
        credentials: 'same-origin', // include, same-origin, *omit
        headers: {
          'user-agent': 'Mozilla/4.0 MDN Example',
          'content-type': 'application/json'
        },
        method: 'POST', // *GET, POST, PUT, DELETE, etc.
        mode: 'cors', // no-cors, cors, *same-origin
        redirect: 'follow', // manual, *follow, error
        referrer: 'no-referrer', // *client, no-referrer
    }
).then(response => response.json())

缺点：

1，兼容性比较凄惨，低级别浏览器均不支持，需要实现fetch的polyfill了。思路其实很简单，就是判断浏览器是否支持原生的fetch，不支持的话，就仍然使用XMLHttpRequest的方式实现，同时结合Promise来进行封装。常见的polyfill就有：es6-promise,babel-polyfill,fetch-ie8等

2，fetch虽然底层，但是还是缺少一些常用xhr有的方法，比如能够取消请求（abort）方法

3，fetch在服务器返回4xx、5xx时是不会抛出错误的，这里需要手动通过，通过response中的ok字段和status字段来判断