乐趣区

关于ajax:ajax和axios区别及优缺点

ajax:

1、什么是 ajax

Ajax 是对原生 XHR 的封装,为了达到咱们逾越的目标,削减了对 JsonP 的反对。

异步的 javascript 和 xml,ajax 不是一门新技术,而是多种技术的组合,用于疾速的创立动静页面,可能实现无刷新更新数据从而进步用户体验。
属性:url、method、dataType、beforeSend、success、error…

web 前端全套视频学习材料:http://www.atguigu.com/download.shtml

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 是一个基于 Promise 的 HTTP 库,能够用在浏览器和 node.js 中;是申请资源的模块;通过 promise 对 ajax 的封装。
属性:url、method、data、responseType、.then、.catch…
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 不肯定有。

关键词:前端培训

退出移动版