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不肯定有。
关键词:前端培训