前端随笔（七）——Ajax是个啥？

《都看到第7期了，真的不动动小手点个赞嘛QAQ》

话不多说，进入正题；

1.什么是Ajax？这到底是个啥东东，可以吃嘛？

每当我们在笔面试中看到诸如：网络请求，页面局部刷新这类字眼时，旁边总会出现一个叫Ajax的词。相信大家跟作者一样好奇———Ajax是什么东东？

首先，我们来看看W3C官网对Ajax的解释；

AJAX（Asynchronous（异步）JavaScript And XML ）是一种使用 XMLHttpRequest 技术构建更复杂，动态刷新的网页的编程实践。严格意义上来说，Ajax并不是用来解决发送网络请求的方法，而是一种进行网络请求的思想。当用户在程序中使用了Ajax模型以后， 网页应用能够快速地将更新变化呈现在用户界面上，而不需要重载（刷新）整个页面。这使得程序能够更快地回应用户的操作。

AJAX允许只更新一个 HTML 页面的部分 DOM，而无须重新加载整个页面。AJAX还允许异步工作，这意味着当网页的一部分正试图重新加载时，您的代码可以继续运行（相比之下，同步会阻止代码继续运行，直到这部分的网页完成重新加载）。

Ajax官方解释.mdnhttps://developer.mozilla.org/zh-CN/docs/Web/Guide/AJAX【了解了什么是Ajax之后，就让我们一起再深入探究下它背后的秘密吧！】

2.Ajax是如何实现的？

说到这儿就不得不提一下XMLHttpRequest了，这是一种用于创建Ajax请求，并在客户端与服务端发送请求的JS API；

创建XHR对象：

let xhr = new XMLHttpRequest();

它有以下两个内部方法：

①open方法，用来设置请求。可以选择请求方式，URL和设置同步异步状态，具体写法为：

xhr.open('get','URL地址',true（同步）);

②send方法，用来发送请求。具体写法为：

xhr.send(null);

XMLHttpRequesthttps://developer.mozilla.org/zh-CN/docs/Glossary/XHR_(XMLHttpRequest)

3.其他实现Ajax的方法；

【1】Fetch方法

官方解释：Fetch API 提供了一个 JavaScript 接口，用于访问和操纵 HTTP 管道的一些具体部分，例如请求和响应。它还提供了一个全局 fetch() 方法，该方法提供了一种简单，合理的方式来跨网络异步获取资源。这种功能以前是使用 XMLHttpRequest 实现的。

本质上，Fetch是由ES6提供的一个API，它可以使用数据流方法处理数据从而获得更好的性能。

Fetch有以下特点：

①使用了数据流的处理方式，大大提高了效率；

②使用Promise，不再使用回调函数；

③使用Promise的.then方法实现链式调用，方便修改请求数据。

Fetch.mdnhttps://developer.mozilla.org/zh-CN/docs/Web/API/Fetch_API/Using_Fetch

【2】Axios方法

本质：axios 是一个用于浏览器和Node.js上的基于 Promise 的http网络请求库。是基于XHR的二次封装。
安装：

npm install axios

使用：

//引入axios
const axios = require('axios');
import axios from 'axios';

由于作者并没有对Axios进行深入研究，就不在此赘述啦，但有好的资源我一定会分享给大家的：

Axios-简书https://www.jianshu.com/p/5d6411ffc17c以上都是作者在学习中接触到的一些东西，如果各位看官大人有什么建议可以在评论区畅所欲言哦！

                                                                ——————（听说一键三连的人能够心想事成哦）