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