ajax 和 axios 的区别是什么？使用场景有哪些？
回答·47
最热
最新
- axios 和 ajax 的区别： 1、axios 是一个基于 Promise 的 HTTP 库，而 ajax 是对原生 XHR 的封装； 2、ajax 技术实现了局部数据的刷新，而 axios 实现了对 ajax 的封装。 axios 和 ajax 的区别及优缺点: ajax： 1、什么是 ajax Ajax 是对原生 XHR 的封装，为了达到我们跨域的目的，增添了对 JSONP 的支持。 异步的 javascript 和 xml，ajax 不是一门新技术，而是多种技术的组合，用于快速的创建动态页面，能够实现无刷新更新数据从而提高用户体验。 2、ajax 的原理？ 由客户端请求 ajax 引擎，再由 ajax 引擎请求服务器，服务器作出一系列响应之后返回给 ajax 引擎，由 ajax 引擎决定将这个结果写入到客户端的什么位置。实现页面无刷新更新数据。 3、核心对象？ XMLHttpRequest 4、ajax 优缺点？ 优点 1、 无刷新更新数据 2、异步与服务器通信 3、前端和后端负载平衡 4、基于标准被广泛支持 5、界面与应用分离 缺点： 1、ajax 不能使用 Back 和 history 功能，即对浏览器机制的破坏。 2、安全问题 ajax 暴露了与服务器交互的细节 3、对收索引擎的支持比较弱 4、破坏程序的异常处理机制 5、违背 URL 和资源定位的初衷 6、ajax 不能很好的支持移动设备 7、太多客户端代码造成开发上的成本 5、Ajax 适用场景 <1>.表单驱动的交互 <2>.深层次的树的导航 <3>.快速的用户与用户间的交流响应 <4>.类似投票、yes/no 等无关痛痒的场景 <5>.对数据进行过滤和操纵相关数据的场景 <6>.普通的文本输入提示和自动完成的场景 6、Ajax 不适用场景 <1>.部分简单的表单 <2>.搜索 <3>.基本的导航 <4>.替换大量的文本 <5>.对呈现的操纵 $.ajax({ type: 'POST', url: url, data: data, dataType: dataType, success: function () {}, error: function () {} }); 8、ajax 请求的五个步骤 1. 创建 XMLHttpRequest 异步对象 2. 设置回调函数 3. 使用 open 方法与服务器建立连接 4. 向服务器发送数据 5. 在回调函数中针对不同的响应状态进行处理 axios： 1、axios 是什么 Axios 是一个基于 Promise 的 HTTP 库，可以用在浏览器和 node.js 中。 2、axios 有那些特性？ 1、在浏览器中创建 XMLHttpRequests 2、在 node.js 则创建 http 请求 3、支持 Promise API 4、支持拦截请求和响应 5、转换请求和响应数据 6、取消请求 7、自动转换成 JSON 数据格式 8、客户端支持防御 XSRF 3、执行 get 请求，有两种方式 // 第一种方式 将参数直接写在 url 中 axios.get('/getMainInfo?id=123').then((res) => { console.log(res) }).catch((err) => { console.log(err) }) // 第二种方式 将参数直接写在 params 中 axios.get('/getMainInfo', { params: {id: 123 }}).then((res) => { console.log(res) }).catch((err) => { console.log(err) }) 4、执行 post 请求，注意执行 post 请求的入参，不需要写在 params 字段中，这个地方要注意与 get 请求的第二种方式进行区别 axios.post('/getMainInfo', { id: 123}).then((res) => { console.log(res) }).catch((err) => { console.log(err) }) axios 和 ajax 的区别： axios 是通过 Promise 实现对 ajax 技术的一种封装，就像 jquery 对 ajax 的封装一样，简单来说就是 ajax 技术实现了局部数据的刷新，axios 实现了对 ajax 的封装，axios 有的 ajax 都有，ajax 有的 axios 不一定有，总结一句话就是 axios 是 ajax，ajax 不止 axios。 注： 传统 Ajax 指的是 XMLHttpRequest（XHR），axios 和 jQuer ajax 都是对 Ajax 的封装
- 1.区别 axios 是通过 promise 实现对 ajax 技术的一种封装，就像 jQuery 实现 ajax 封装一样。 简单来说： ajax 技术实现了网页的局部数据刷新，axios 实现了对 ajax 的封装。 axios 是 ajax ajax 不止 axios。 下面列出代码来对比一下： axios： axios({ url: '/getUsers', method: 'get', responseType: 'json', // 默认的 data: { //'a': 1, //'b': 2, } }).then(function (response) { console.log(response); console.log(response.data); }).catch(function (error) { console.log(error); }） 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 ajax： $.ajax({ url: '/getUsers', type: 'get', dataType: 'json', data: { //'a': 1, //'b': 2, }, success: function (response) { console.log(response)； } }) 1 2 3 4 5 6 7 8 9 10 11 12 2.优缺点： ajax： 本身是针对 MVC 的编程,不符合现在前端 MVVM 的浪潮 基于原生的 XHR 开发，XHR 本身的架构不清晰，已经有了 fetch 的替代方案 JQuery 整个项目太大，单纯使用 ajax 却要引入整个 JQuery 非常的不合理（采取个性化打包的方案又不能享受 CDN 服务 axios： 从 node.js 创建 http 请求 支持 Promise API 客户端支持防止 CSRF 提供了一些并发请求的接口（重要，方便了很多的操作）
- 从以下几方面来评论一下 结果：都能完成浏览器的异步请求操作，实现不刷新页面就能请示到数据 原理：ajax 基于回调函数来实现，axios 基于 promise 可封装性：axios 优于 ajax，如统一拦截的封装，基础路由的封装，axios 设计更巧妙 受众：绝大部分前后端都会使用 ajax，axios 主要使用者为前端 框架整合程度：axios 远远高于 ajax，比如我现在要使用 vue 构建一个工程，百分之九十以上概率会选用 axios jquey 依赖程度：ajax 依赖度很高，axios 依赖很低，举个例子，大家想使用 ajax 前基本都会先引入 jquey 而目前大部分主流框架都不需要使用 jquey，如果引入 jquey，包体积会变得较大，故一个体积小的请求框架就会受欢迎啦，毕竟世界上还是以初级前端为多的，典型的金字塔结构
- ajax 有的，axios 不一定有；而 axios 有的，ajax 都有！axios 通过 promise 实现对 ajax 一种技术封装，而 ajax 是通过 jQ 来封装！
- 竟然真的有人一本正经的解释 ajax 和 axios 的区别～受累好好了解一下 ajax 好不好？
- ajax 是为了异步请求数据的，axios 是基于 promise 封装的 ajax，就跟＄ajax 是 jq 封装的 ajax 一样，axios 前后端都可用，是通往全栈的必经之路，简单来说 axios 是 ajax ajax 不止 axios
- 5 年前端 咋回提出这样的问题
- axios 是对 ajax 的封装，区别就是 axios 用起来方便，很多需要的代码，axios 已经帮我们写了，我们只需调用 axios 的接口；只要喜欢，随时可以用 axios 用于网络请求。不过 axios 需要环境支持 Promise～
- 两者并没有太大的区别，在写法上大致相同。其实 axios 是通过 promise 实现对 ajax 技术的一种封装一样，也就是说 jquery 将请求技术封装成了 ajax，而通过 promise 又把 ajax 封装成了 axios
- axios 就是 ajax 的一种实现手段而已，返回 promise 对象。 你问我车跟宝马车有什么区别，都是车 宝马把车提现的更好而已。 不区分使用场景，你用 axios 的时候，就在用 ajax。