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

标题: ajax和axios区别及优缺点 [打印本页]

作者: 河曲智叟 时间: 2024-12-13 18:40
标题: ajax和axios区别及优缺点
ajax和axios区别及优缺点

axios是一个基于promise 的 http库，主要实现 ajax异步通信功能，用于向后端发起请求，还有在请求中做更多是可控功能；是一种可以发http请求的js库；
ajax是对原生XHR的封装；是欣赏器天生依法支持的 API；
axios实现对 ajax封装，ajax实现局部数据的革新；

一、ajax

1、什么是ajax
Ajax是对原生XHR的封装，为了到达我们跨越的目的，增长了对JsonP的支持。
异步的 javascript和 xml，ajax不是一门新技术，而是多种技术的组合，用于快速的创建动态页面，能够实现无革新更新数据从而进步用户体验。
　　属性：url、method、dataType、beforeSend、success、error…
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、对呈现的操纵
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与后台交互步骤
Axios 是一个基于 Promise 的 HTTP 库，可以用在欣赏器和 node.js 中；是请求资源的模块；通过promise对ajax的封装。
简单理解为：封装好的、基于promise的发送请求的方法，因此不消设置回调函数，直接去调用then方法。
　　属性：url、method、data、responseType、.then、.catch…
2、axios有那些特性？
1、在欣赏器中创建 XMLHttpRequests
2、在node.js则创建http请求
3、支持Promise API
4、支持拦截请求和相应
5、转换请求和相应数据
6、取消请求
7、主动转换成JSON数据格式
8、客户端支持防御XSRF
9、提供了一些并发请求的接口(重要)
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 = ajax + http，此中 ajax支持客户端请求资源(比如欣赏器)，http 用于服务端请求资源(比如 Node.js等服务器)。
axios是通过Promise实现对ajax技术的一种封装，就像jquery对ajax的封装一样，axios回来的数据是promise，ajax回来的数据是回调，axios比ajax功能丰富，风格前卫，更好用更安全。
简单来说就是ajax技术实现了局部数据的革新，axios实现了对ajax的封装；axios包括但不限于ajax。
因此，也可以说Axios是Ajax技术的一个实现库，它简化了Ajax请求的处理处罚过程，使得开发者可以更加高效地进行Web开发。
Axios和Ajax之间的关系可以理解为：Ajax是一种技术概念，而Axios是Ajax的一个具体实现库。

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

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