您现在的位置是:群英 > 开发技术 > web开发
axios和ajax分别是什么,有何优缺点
Admin发表于 2022-07-27 17:48:01685 次浏览
这篇文章给大家介绍了“axios和ajax分别是什么,有何优缺点”的相关知识,讲解详细,步骤过程清晰,对大家进一步学习和理解“axios和ajax分别是什么,有何优缺点”有一定的帮助,希望大家阅读完这篇文章能有所收获。下面就请大家跟着小编的思路一起来学习一下吧。

本文操作环境:windows7系统、ECMAScript 6版、Dell G3电脑。

axios和ajax的区别是什么?

axios和ajax的区别及优缺点:

ajax:

1、什么是ajax

Ajax是对原生XHR的封装,为了达到我们跨越的目的,增添了对JSONP的支持。

异步的javascript和xml,ajax不是一门新技术,而是多种技术的组合,用于快速的创建动态页面,能够实现无刷新更新数据从而提高用户体验。

2、ajax的原理?

由客户端请求ajax引擎,再由ajax引擎请求服务器,服务器作出一系列响应之后返回给ajax引擎,由ajax引擎决定将这个结果写入到客户端的什么位置。实现页面无刷新更新数据。

3、核心对象?

XMLHttpReques

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>.对呈现的操纵

7、代码

$.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的封装


以上就是关于axios和ajax分别是什么,有何优缺点的介绍啦,需要的朋友可以参考上述内容,希望对大家有帮助,欢迎关注群英网络,小编将为大家输出更多高质量的实用文章!

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:mmqy2019@163.com进行举报,并提供相关证据,查实之后,将立刻删除涉嫌侵权内容。

标签: axios
相关信息推荐
2022-10-09 18:13:56 
摘要:前一阵子抖音和微博开始陆续上了IP归属地的功能,引起了众多热议,有大批在国外的老铁们开始"原形毕露",被定位到国内来,那么IP归属到底是怎么实现的呢?那么网红们的归属地到底对不对呢
2022-07-14 17:15:13 
摘要:本篇文章给大家带来了关于PHP的相关知识,其中主要介绍了关于排序功能的相关问题,通过实例完成php+mysqli排序功能的实现,下面一起来看一下,希望对大家有帮助。
2022-08-22 17:59:49 
摘要:这篇文章主要介绍了插入排序算法之希尔排序+直接插入排序的相关知识,本文通过实例图文相结合给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
云活动
推荐内容
热门关键词
热门信息
群英网络助力开启安全的云计算之旅
立即注册,领取新人大礼包
  • 联系我们
  • 24小时售后:4006784567
  • 24小时TEL :0668-2555666
  • 售前咨询TEL:400-678-4567

  • 官方微信

    官方微信
Copyright  ©  QY  Network  Company  Ltd. All  Rights  Reserved. 2003-2019  群英网络  版权所有   茂名市群英网络有限公司
增值电信经营许可证 : B1.B2-20140078   粤ICP备09006778号
免费拨打  400-678-4567
免费拨打  400-678-4567 免费拨打 400-678-4567 或 0668-2555555
微信公众号
返回顶部
返回顶部 返回顶部