AJAX和Fetch的学习与比较

一、Ajax

AJAX简介

Ajax：异步的JavaScript和XML，一种用于快速创建动态网页的技术。通过在后台与服务器进行少量数据交换，是网页实现异步更新。
注意：Ajax不是一种新的编程语言，而是一种用于创建更好更快以及交互性更强的web应用程序的技术。

AJAX-创建XMLHttpRequest对象

XHR：可扩展超文本传输请求。用于在后台与服务器交换数据，可以在不向服务器提交整个页面的情况下，实现局部更新网页，是Ajax的基础。
所有现代浏览器（IE7+、Firefox、Chrome、Safari、Opera）均内建XHR对象，其语法为：

const xmlhttp = new XMLHttpRequest();

AJAX-向服务器发送请求

将请求发送到服务器时，使用XMLHttpRequest对象的open()和send()方法，实例如下：

xmlhttp.open("GET","ajax_info.txt",true);
xmlhttp.send();

AJAX-服务器响应

1、监听响应

XHR对象提供了三个重要属性来监听响应的状态，继而实现响应：

当readyState等于4且状态为200时，表示响应已就绪：

xmlhttp.onreadystatechange = () => {
 if (xmlhttp.readyState == 4 && xmlhttp.status==200) {
  console.log(xmlhttp.responseText);
 }
};

注意：onreadystatechange 事件被触发5次（0 - 4），对应着readyState的每个变化。

2、获取响应

XMLHttpRequest对象提供responseText 、responseXML 属性来获取服务器的响应：

AJAX实例

const request = new XMLHttpRequest();
request.open('POST', `/ipos-chains/1/2`, true);
request.send(params);
request.onreadystatechange = () => {
  if (request.readyState === 4 && request.status === 200) {
    const data = JSON.parse(request.responseText);
    if (data.success) {
      message.success('成功');
    } else {
      message.error(data.errorInfo);
    }
  }
};

二、Fetch

认识Fetch

fetch是全局变量window的一个方法，它的主要特点有：

1. 第一个参数是URL；
2. 第二个是可选参数，可以控制不同配置的init对象；
3. 使用了JavaScript Promise来处理结果/回调；

Fetch实例

// 链式处理,将异步变为类似单线程的写法: 高级用法.
fetch('/some/url').then(function(response) {
    return . //... 执行成功, 第1步...
}).then(function(returnedValue) {
    // ... 执行成功, 第2步...
}).catch(function(err) {
    // 中途任何地方出错...在此处理...
});

Fetch规范与AJAX的区别

1. Ajax的本质是使用XMLHttpRequest对象来请求数据，而fetch采用了Promise的异步处理机制，使用比ajax更加简单，有可能会逐渐代替ajax；
2. 从fetch()返回的Promise将不会拒绝HTTP错误状态, 即使响应是一个HTTP404或500。相反，它会正常解决 , 并且仅在网络故障时或任何阻止请求完成时，它才会拒绝。可以做简单的封装：

function checkStatus(response) {
  if (response.status >= 200 && response.status < 300) {
    return response
  } else {
    var error = new Error(response.statusText)
    error.response = response
    throw error
  }
}

function parseJSON(response) {
  return response.json()
}

fetch('/users')
  .then(checkStatus)
  .then(parseJSON)
  .then(function(data) {
    console.log('request succeeded with JSON response', data)
  }).catch(function(error) {
    console.log('request failed', error)
  })

3. 默认情况下, fetch在服务端不会发送或接收任何cookies。如果想要在同域中自动发送cookie，加上credentials的same-origin 选项，same-origin值使得fetch处理Cookie与XMLHttpRequest类似。如下：

fetch(url, {
  credentials: ’same-origin'
})

三、参考

https://www.w3cschool.cn/ajax/ajax-tutorial.html.
https://www.cnblogs.com/September-9/p/7099975.html