ToB企服应用市场:ToB评测及商务社交产业平台

标题: 作甚Ajax和Axios以及二者区别？ [打印本页]

作者: 玛卡巴卡的卡巴卡玛 时间: 2024-11-2 06:18
标题: 作甚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。

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

欢迎光临 ToB企服应用市场:ToB评测及商务社交产业平台 (https://dis.qidao123.com/)