jQuery中的ajax模板
$.ajax({
url: 请求的地址,
data: 传递给后台的数据,
method: 请求方法(get,post),
async: 是否异步(同步:必须等待后台返回数据后程序才会继续往下走,异步:发送后不管是否成功都可以继续往下走),
beforeSend: 发送到后台前执行的函数,可以用作校验或给按钮添加样式,如果用作校验return false;则可以取消本次请求,
contentType: 默认值: "application/x-www-form-urlencoded"。发送信息至服务器时内容编码类型,
dataType:"json"(指定服务器返回的数据类型),
success: function(data) {
请求成功的函数,data是后台返回的数据,在这里对数据进行操作
},
error: function(err) {
请求失败,err是失败的内容
},
complete: function(e) {
不管成功还是失败都会调用这个函数
}
})
axios和ajax的区别:
① axios是一个基于Promise的HTTP库,而ajax是对原生XHR的封装。
② ajax技术实现了局部数据的刷新,而axios实现了对ajax的封装。
③ axios是通过Promise实现对ajax技术的一种封装,就像jquery对ajax的封装一样,简单来说就是ajax技术实现了局部数据的刷新,axios实现了对ajax的封装,axios有的ajax都有,ajax有的axios不一定有,总结一句话就是axios是ajax,ajax不止axios。
1、什么是ajax
ajax 是对原生XHR的封装,为了达到我们跨越的目的,增添了对JSONP的支持。
ajax 是异步的javascript和xml,ajax不是一门新技术,而是多种技术的组合,用于快速的创建动态页面,能够实现无刷新更新数据从而提高用户体验。
2、ajax的原理
由客户端请求ajax引擎,再由ajax引擎请求服务器,服务器作出一系列响应之后返回给ajax引擎,由ajax引擎决定将这个结果写入到客户端的什么位置。实现页面无刷新更新数据。
3、核心对象
核心对象是XMLHttpReques。
4、ajax优缺点
优点:
① 无刷新更新数据。
② 异步与服务器通信。
③ 前端和后端负载平衡。
④ 基于标准被广泛支持。
⑤ 界面与应用分离。
缺点:
① ajax不能使用Back和history功能,即对浏览器机制的破坏。
② 安全问题 ajax暴露了与服务器交互的细节。
③ 对收索引擎的支持比较弱。
④ 破坏程序的异常处理机制。
⑤ 违背URL和资源定位的初衷。
⑥ ajax不能很好的支持移动设备。
⑦ 太多客户端代码造成开发上的成本。
5、Ajax适用场景
① 表单驱动的交互。
② 深层次的树的导航。
③ 快速的用户与用户间的交流响应。
④ 类似投票、yes/no等无关痛痒的场景。
⑤ 对数据进行过滤和操纵相关数据的场景。
⑥ 普通的文本输入提示和自动完成的场景。
6、Ajax不适用场景
① 部分简单的表单。
② 搜索。
③ 基本的导航。
④ 替换大量的文本。
⑤ 对呈现的操纵。
7、ajax请求的五个步骤
① 创建XMLHttpRequest异步对象。
② 设置回调函数。
③ 使用open方法与服务器建立连接。
④ 向服务器发送数据。
⑤ 在回调函数中针对不同的响应状态进行处理。
1、axios是什么
axios 是一个基于 Promise 的 HTTP 库,可以用在浏览器和 node.js 中。
2、axios有那些特性
① 在浏览器中创建 XMLHttpRequests。
② 在node.js则创建http请求。
③ 支持Promise API。
④ 支持拦截请求和响应。
⑤ 转换请求和响应数据。
⑥ 取消请求。
⑦ 自动转换成JSON数据格式。
⑧ 客户端支持防御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);
})