写在前面
学习前端的道路中，从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 对象的三个重要的属性：
| 属性 | 描述 |
| onreadystatechange | 存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。 |
| readyState | 存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。- 0: 请求未初始化 1: 服务器连接已建立2: 请求已接收3: 请求处理中4: 请求已完成，且响应已就绪 |
| status | 200: "OK";404: 未找到页面 |
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布局或许会成为新趋势？
