何为Ajax和Axios以及二者区别？

一. Ajax的基本知识

1. Ajax是什么？

        ① Ajax即Asynchronous Javascript And XML（异步JavaScript和XML），是一种创建交互式网页应用的技术；

        ② 在 2005年被Jesse James Garrett提出的新术语，用来描述一种使用现有技术集合的‘新’方法，包括: HTML或 XHTML, CSS, JavaScript, DOM, XML, XSLT, 以及最重要的XHMLHttpRequest（XHP），ajax是一个封装的结果，封装的是XMLHttpRequest (XHR)；

        ③ 使用Ajax技术网页应用能够快速地将增量更新呈现在用户页面上，而不需要重载（刷新）整个页面，这使得程序能够更快地回应用户的操作。

2. Ajax的作用

        ★ Ajax的主要作用包括：提升用户体验、优化浏览器和服务器之间的传输、减少不必要的数据往返、减少宽带占用、平衡客户端和服务器端的负载、以及实现无刷新页面更新。 

3. Ajax的优缺点

（1）优点

        ① 无需刷新页面即可更新数据；

        ② 异步与服务器通信，用户界面可以继续响应用户操作；

        ③ 可以只更新部分网页内容，减少数据传输量。

（2）缺点

        ① 不支持浏览器Back按钮；

        ② 安全问题。比如CSRF(跨站请求伪造)；

        ③ 对搜索引擎优化(SEO)不友好；

        ④ 需要处理网络延迟问题；

        ⑤ 不支持跨域通信，除非使用JSONP或CORS；

        ⑥ 对于网络速度慢的用户体验不佳；

        ⑧ 不支持IE5、6、7、8(可能需要ActiveX)；

        ⑨ 不支持一些老旧的浏览器。

4. 下面是一个使用原生JavaScript编写的Ajax示例代码，用于从服务器获取数据：

​

5. Ajax的工作流程

        ① 创建一个XMLHttpRequest对象；

        ② 设置请求的URL，以及请求方式（GET或POST）；

        ③ 绑定事件处理器到onreadystatechange事件(状态变化事件)，以便在AJAX任务完成时执行相应的操作。

        ④ 使用open()和send()方法发送请求；

        ⑤ 服务器响应请求，返回数据；

        ⑥ 在onreadystatechange事件(状态变化事件)处理器中，检查readyState（返回XMLHTTP请求的当前状态）和status(状态)；

        ⑦ 若请求成功（readyState为4，status为200），对返回的数据进行处理。

        ⑧ 以下是一个简单的AJAX GET(get获取)请求 代码示例：

​

二. Axios的基本知识

1. Axios是什么？

        ① Axios是一个基于promise的网络请求库，作用于node.js和浏览器中，主要用于向后台发送请求；

        ② Axios是 isomorphic(同构的；同形态的)，也就是同一套代码可以运行在浏览器和node.js中；

        ③ 在服务端它使用原生node.js http模块, 而在客户端 (浏览端) 则使用XMLHttpRequest；

        ④ Axios本质上是对原生XHR的封装，只不过它是Promise的实现版本，符合最新的ES规范； 

        ⑤ Axios是对XHR的封装，支持promise操作的请求库，并且提供了一系列方便的api接口。

2. Axios的优缺点

（1）优点

        ① 在浏览器中使用 XMLHttpRequests 或者在 node.js 中使用 http 模块进行 HTTP 请求；

        ② 支持 Promise API；

        ③ 能够执行并发请求，并且具有取消请求的能力。

        ④ 能够在 node.js 中使用并自动处理代理；

        ⑤ 请求和响应的拦截器允许你修改请求和响应；

        ⑥ 能够自动转换 JSON 数据。

（2）缺点

        ① 不支持 IE 浏览器，因为 IE 不支持 ES6 的 Promise；

        ② 如果你想要在不支持 Promise 的旧浏览器中使用 Axios，你需要引入一个 polyfill；

        ③ 不支持加载进度事件，这可能会影响文件的大型下载；

        ④ 不支持客户端验证 HTTP 响应的状态，这可能会导致安全问题。

 3. Axios的工作原理

        ① 创建一个 axios 实例:在使用 axios 发送请求之前，我们需要创建一个 axios 实例。通过这个实例，我们可以设置一些默认的配置例如请求的基本 URL、请求的超时时间、请求头等。创建实例的方法是使用 axios.create()函数；

        ② 发送请求:使用 axios 实例发送请求时，可以使用多种方法，例如 get、post、put、delete 等。每个方法都返回一个 Promise 对象，我们可以通过 then 和 catch 方法来处理请求的响应或错误；

        ③ 处理请求的配置:在发送请求之前，axios 会根据配置项对请求进行一系列处理。例如，可以设置请求头、请求参数、请求体等,可以使用 axios 的 config 对象来设置这些配置项；

        ④ 发送请求并返回响应:当发送请求后，axios 会将请求发送到服务器，并等待服务器返回响应。一旦收到响应，axios 会将响应包装在一个 Promise 对象中，并将其返回；
        ⑤ 处理响应:在收到响应后，axios 会根据响应的状态码来判断请求是否成功。如果请求成功，axios 会将响应数据封装在一个对象中，并将其传递给 then 方法。如果请求失败，axios 会将错误信息封装在一个对象中，并将其传递给 catch 方法；
        ⑥ 拦截器:axios 还提供了拦截器的功能，可以在发送请求和处理响应的过程中添加额外的逻辑。拦截器可以用于在请求发送前或响应返回后对请求或响应进行修改或处理。例如，可以在发送请求前添加认证信息，或者在收到响应后对响应进行处理。

4. 下面是一个发送GET请求的示例代码：

​

5. Axios的常用方法 

     ★ Axios提供了多种常用的HTTP请求方法，包括GET(get)、POST(post)、PUT(put)、DELETE(delete)等，这些方法用于处理不同的网络请求场景。

        ① GET请求：用于从服务器获取数据，通常用于列表和信息查询。

        ② POST请求：用于向服务器提交数据，例如表单提交或文件上传。

        ③ PUT请求：用于更新服务器上的数据，客户端发送的数据会取代指定的文档内容。

        ④ DELETE请求：用于请求服务器删除指定的数据。

三. Ajax和Axios的区别？ 

     ★ Ajax和Axios的主要区别在于它们的实现方式、支持性、功能丰富性、链式调用、跨域限制、拦截器功能、扩展性以及受众和使用场景。

1. 实现方式：
        ① Ajax是基于原生的JavaScript技术，通过XMLHttpRequest对象向后端发送请求并获取数据；
        ② Axios是一个基于Promise的HTTP客户端，使用更加简洁方便，支持浏览器和Node.js环境；

2. 支持性:
        ① Ajax在不同浏览器之间的支持存在一些差异，需要进行一些兼容处理；
        ② Axios则是一个独立于浏览器的第三方库，可以在不同环境下使用，具有更好的兼容性；

3. 功能丰富性:
        ★ Axios相比Ajax更加强大，提供了更多的功能，例如拦截请求和响应、转换请求和响应数据、取消请求等，这些功能使得开发者能够更方便地处理和管理HTTP请求；

4. 链式调用:
        ★ Axios支持链式调用，可以通过.then()方法来处理请求和响应的结果，使得代码结构更加清晰和易于维护；

5. 跨域限制:
        ★ 由于浏览器的同源策略限制，使用Ajax进行跨域请求时需要进行一定的处理(如
JSONP、CORS等),而Axios内置了可以解决跨域问题的配置选项，使用起来更加方便；

6. 拦截器功能:
        ★ Axios提供了拦截器功能，可以在发送请求或响应数据时对其进行拦截和处理，这使得我们能够更加灵活地控制请求和响应；

7. 扩展性:
        ★ Axios可以通过插件来扩展其功能，例如可以使用qs插件来构建查询字符串、使用redux-axios-middleware将Axios与Redux集成等，这些扩展能够提高开发效率并为项目提供更强大的功能；

8. 受众和使用场景:
        ★ 绝大部分后端人员都会使用Aiax，而Axios的主要使用者为前端。在前端框架整合方面，Axios的整合程度远远高于Ajax，例如在使用Vue构建工程时，百分之九十以上概率会选用Axios。此外，Axios的依赖度较低，不需要像Ajax那样可能先引入jQuery。