写在前面

学习前端的道路中，从AJAX开始，就要与后端打交道了，因此我认为学好AJAX是非常必要的，本文就总结一下AJAX的前世今生及使用~

一、什么是AJAX?

AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。AJAX又称阿贾克斯。

是谁在叫我🤣

AJAX 不是新的编程语言，而是一种使用现有标准的新方法。

AJAX 是与服务器交换数据并更新部分网页的艺术，在不重新加载整个页面的情况下。

Ajax带来的最大影响就是页面可以无刷新的请求数据。以往，页面表单提交数据，在用户点击完”submit“按钮后，页面会强制刷新一下，体验十分不友好。 有很多使用 AJAX 的应用程序案例：新浪微博、Google 地图、开心网等等。 AJAX的出现极大了推动了前端的发展，那我们就开始学习AJAX吧~

二、AJAX的使用

2.1 创建XHR对象

所有现代浏览器均支持 XMLHttpRequest 对象（IE5 和 IE6 使用 ActiveXObject）。

XMLHttpRequest 用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。 所有现代浏览器（IE7+、Firefox、Chrome、Safari 以及 Opera）均内建 XMLHttpRequest 对象。

let xmlhttp = new XMLHttpRequest()
复制代码

老版本的 Internet Explorer （IE5 和 IE6）使用 ActiveX 对象：

let xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
复制代码

处理兼容性问题：

let xmlhttp;
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp = new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
  }
复制代码

2.2 向服务器发送请求

向服务器发送请求就要用到XMLHtttpRequest对象的open和send方法

xmlhttp.open("GET","test1.txt",true);
xmlhttp.send();
复制代码

GET or POST?

与 POST 相比，GET 更简单也更快，并且在大部分情况下都能用。

然而，在以下情况中，请使用 POST 请求：

• 无法使用缓存文件（更新服务器上的文件或数据库）
• 向服务器发送大量数据（POST 没有数据量限制）
• 发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠

2.3 服务器响应

如需获得来自服务器的响应，请使用 XMLHttpRequest 对象的 responseText属性。 responseText 属性返回字符串形式的响应，因此您可以这样使用：

document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
复制代码

2.4 onreadystatechange 事件

当请求被发送到服务器时，我们需要执行一些基于响应的任务。

每当 readyState 改变时，就会触发 onreadystatechange 事件。

readyState 属性存有 XMLHttpRequest 的状态信息。

下面是 XMLHttpRequest 对象的三个重要的属性：

3. 手写一个简易的AJAX

这也算是面试中的一个高频考点了，虽然工作中不会中不会使用原生的AJAX而是使用封装好的AJAX，但是掌握基本原理还是必要的，这也应该是每位程序员的素养~

let xhr = new XMLHttpRequest();
    xhr.open('GET', url, true)
    xhr.onreadystatechange = function () {
      if (xhr.readyState === 4 && xhr.status === 200) {
        console.log(xhr.responseText);
      }else{
      console.log('404 NOT FOUND')
      }
    }
    xhr.send()
复制代码

上面这种是最简易的，我们还可以结合Promise来实现，看下面一个版本👇

function ajax(url) {
  const p = new Promise((resolve, reject) => {
    let xhr = XMLHttpRequest()
    xhr.open("GET", url, true)
    xhr.onreadystatechange = function () {
      if (xhr.readyState === 4 && xhr.status === 200) {
        resolve(xhr.responseText)
      } else {
        reject(new Error("404 NOT FOUND"))
      }
    }
    xhr.send()
  })
  return p
}
复制代码

4. 现代AJAX的使用方式

使用原生的js还是比较繁琐，实际工程中建议使用jQuery之类的库，封装的ajax请求方法非常好用，且解决了浏览器兼容性的问题。

关于jQuery中的AJAX

由于jQuery的使用频率已经很低了，关于jQuery中的AJAX如何使用，小伙伴们请自行查阅资料噢~

fetch API

fetch是前端发展的一种新技术产物。

以下内容摘自mozilla：

Fetch API 提供了一个 JavaScript接口，用于访问和操纵HTTP管道的部分，例如请求和响应。它还提供了一个全局 fetch()方法，该方法提供了一种简单，合理的方式来跨网络异步获取资源。

这种功能以前是使用 XMLHttpRequest实现的。Fetch提供了一个更好的替代方法，可以很容易地被其他技术使用，例如 Service Workers。Fetch还提供了单个逻辑位置来定义其他HTTP相关概念，例如CORS和HTTP的扩展。

在使用fetch的时候需要注意：

• 当接收到一个代表错误的 HTTP 状态码时，从 fetch()返回的 Promise 不会被标记为 reject， 即使该 HTTP 响应的状态码是 404 或 500。相反，它会将 Promise 状态标记为 resolve （但是会将 resolve 的返回值的 ok 属性设置为 false ），仅当网络故障时或请求被阻止时，才会标记为 reject。
• 默认情况下，fetch 不会从服务端发送或接收任何 cookies, 如果站点依赖于用户 session，则会导致未经认证的请求（要发送 cookies，必须设置 credentials 选项）。 一个使用fetch获取数据的例子

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

fetch代表着更先进的技术方向，但是目前兼容性不是很好，在项目中使用的时候得慎重。

axios

首先需要知道：axios不是一种新的技术。 首先需要知道：axios不是一种新的技术。

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

• 从浏览器中创建 XMLHttpRequests
• 从 node.js 创建 http 请求
• 支持 Promise API
• 拦截请求和响应
• 转换请求数据和响应数据
• 取消请求
• 自动转换 JSON 数据
• 客户端支持防御 XSRF

axios的使用

// 为给定 ID 的 user 创建请求
axios.get('/user?ID=12345')   
.then(function (response) {     
console.log(response);   })   
.catch(function (error) {     
console.log(error);   });  
// 上面的请求也可以这样做 
axios.get('/user', {     
params: {      
ID: 12345     }   })   .
then(function (response) {    
console.log(response);   })   
.catch(function (error) {    
console.log(error);   });
复制代码

关于更多axios的使用，大家请参考axios官方文档

浏览器支持

axios面向现代浏览器设计，所以古老的浏览器并不支持。

因为axios设计简洁，API简单，支持浏览器和node，所以大受欢迎。它能很好的与各种前端框架整合。

因此推荐大家在项目中使用axios库~

最后

本文总结了AJAX的使用及如何手写一个AJAX,又介绍了AJAX的多种使用方式~

如果这篇文章对你有帮助的话，麻烦点赞收藏哟~

后期更文计划

• 异步进阶及event loop的那些事儿~
• Grid布局原理及实战
• vw和vh布局或许会成为新趋势？