jQuery的全局ajax处理器
作用:用来对页面中的ajax操作进行统一设置,简化操作
常见场景:加载资源的loading功能
-
ajaxStart() 任意请求开始时触发内部回调
- 写法:
$(document).ajaxStart(function () { // 代码... });
-
ajaxStop() 任意请求结束后触发内部回调
- 写法:
$(document).ajaxStop(function () { // 代码... });
axios使用
- axios.get()的使用
// axios.get('地址', {params: {数据。。。}}).then(成功时的处理函数);
// 示例:
axios.get('http://www.liulongbin.top:3006/api/getbooks', {
params: {
id: 2
}
})
.then(function (res) {
// axios对响应的res部分进行了包装,之前jQuery中的res,相当于axios中的res.data
// - 刚开始使用时,可以使用以下操作
res = res.data;
console.log(res);
});
- axios.post()的使用
// axios.post('地址', {数据。。。}).then(成功时的处理函数)
axios.post('http://www.liulongbin.top:3006/api/post', {
name: 'jack',
age: 18
})
.then(function (res) {
console.log(res);
});
-
axios()的使用
-
发送get和post的区别:
- 设置请求参数的属性名不同
- get请求参数的属性名为params
- post为data
- 设置请求参数的属性名不同
-
发送get请求演示:
axios({ method: 'GET', url: 'http://www.liulongbin.top:3006/api/get', params: { name: 'jack', age: 18 } }) .then(function (res) { console.log(res.data); });
-
发送post请求演示:
axios({ method: 'POST', url: 'http://www.liulongbin.top:3006/api/post', data: { name: 'rose', age: 21 } }) .then(function (res) { console.log(res.data); });
-
跨域
同源策略
同源(同源地址)
指的是两个地址的 协议 域名 端口 完全一样,这两个地址就是同源的,或者称为同源地址。
- 我们发现,在现代网站中(京东)一个公司可能具有很多的域名,也都不是同源地址,如果在公司内部都不能进行数据请求,是很不方便的。
浏览器同源策略的机制
发送跨域请求时,请求发送是成功的,响应也是成功的,只不过浏览器将响应的信息拦截了,我们无法操作。
- 对我们操作的影响,无法对非同源的地址发送ajax请求(不能跨域)
跨域方式
- JSONP
- 兼容性好,但是只支持GET
- CORS - nodejs中学
- 兼容性不太好,但是支持GET、POST,并且是标准中提供的方式。
JSONP的实现原理
- 实现原理:
- 同源策略不限制script标签对非同源地址进行请求
- 可以借助script标签进行JSONP实现
- 实现方式:
<!--
使用JSONP进行请求处理
步骤:
1 准备一个处理函数
2 通过script标签的src属性,进行接口的请求
- 因为同源策略不会限制script标签的功能
3 请求时传入请求参数
- callback 用来传递本地处理函数的函数名
- 其他参数随便写
4 当响应结束后,步骤1设置的处理函数会自动调用
- 可以在处理函数中对响应数据进行后续处理
-->
<script>
function fun(res) {
console.log(res);
}
</script>
<script src="http://ajax.frontend.itheima.net:3006/api/jsonp?callback=fun&name=jack"></script>
- 小说明:
- JSONP和JSON没有本质关联
- JSONP与ajax没有任何关联
- JSONP是使用script标签进行请求发送
- ajax是通过浏览器提供的XMLHttpRequest对象发送
jQuery发送JSONP请求的方式
- jQuery使用的是$.ajax()方法进行JSONP操作
- 设置dataType属性为’jsonp’
- 小说明:
- 可以从浏览器的network看到请求的类型为 script
- jQuery会将使用过的用于发送jsonp请求的script标签移除,打开页面也看不到
$.ajax({
type: 'GET',
url: 'http://ajax.frontend.itheima.net:3006/api/jsonp',
data: {
name: 'jack',
age: 18
},
/*
// 下面的两个属性作为了解即可,通常不会使用
jsonp: 'xyz', // 将默认的请求参数名callback设置为其他名称
jsonpCallback: 'abc', // 将处理函数名称设置为指定名称
*/
dataType: 'jsonp', // 设置这句话后,jQuery就会使用JSONP的方式进行请求发送
success: function (res) {
console.log(res);
}
});
节流和防抖
防抖
进行重复操作时,设置时间间隔,以最后一次满足间隔的操作为准进行执行。
简单来说:就是以满足间隔的最后一次为准
具体操作方式:见淘宝搜索框案例
节流
- 概念:也可以称为函数节流,目的是减少某些操作的触发速度
- 让操作以指定间隔执行
- 通过定时器进行设置
- 在指定的时间间隔内再次触发操作会被忽略
- 直到本次操作完毕,才允许执行下一次
- 在指定的时间间隔内再次触发操作会被忽略
- 常见使用场景:
- mousemove事件、scroll等事件
- 节流和防抖的区别:
- 防抖是当指定间隔时间内再次触发,使用新触发的操作再次重新记时。
- 节流是在指定间隔时间内再次触发,新操作会被忽略。
HTTP协议
基本概念
- HTTP 协议即超文本传输协议 (HyperText Transfer Protocol) ,它规定了客户端与服务器之间进行网页内容传输时,所必须遵守的传输格式。
HTTP的请求报文和响应报文
- 内容传输格式分为请求报文和响应报文两种
- 请求报文(客户端给服务端发送请求时发送的那些内容)
- 请求报文由4部分组成
- 请求行
- 3部分组成: 请求方式 请求地址 协议和版本
- 请求头:用来保存客户端的相关信息(大部分是浏览器自动设置的)
- Host:主机地址
- User-Agent:用户代理字符串,客户端的一些浏览器和系统信息
- Content-Type:发送的请求体的内容类型(内容格式)
- 空行
- 请求体:就是我们发送的请求参数
- get请求的参数在url中发送,请求体为空
- post请求的参数在请求体中,所以需要设置Content-Type
- 请求行
- 响应报文由4部分组成
- 状态行
- 由3部分组成: 协议和版本 状态码 状态文本
- 响应头:用来保存服务端的相关信息(有的是服务端自动设置的,有的是后端自己设置的)
- Content-Type: 响应体的内容类型
- 空行
- 响应体
- 服务端发送给客户端的响应内容(无论什么请求方式,响应的数据都在响应体中保存)
- 例如我们在jQuery中接收的res就是响应体
- 服务端发送给客户端的响应内容(无论什么请求方式,响应的数据都在响应体中保存)
- 状态行
- 请求报文由4部分组成
- 请求报文(客户端给服务端发送请求时发送的那些内容)
请求方式
最常用的是GET和POST
- GET 用来获取数据(查询)
- POST 用来发送数据(新增)
- PUT 用来修改数据(修改)
- DELETE 用来删除数据(删除)
状态码
通过一些数字表示本次请求的状态:除了状态码还会配有状态文本
- 2xx 成功,常见的是200
- 3xx 重定向(我们请求a.html,服务端认为a.html有问题,没法给你看,将你的请求转给了b.html)
- 常见:304 读取缓存的内容了
- 4xx 客户端错误,常见的是404,找不到服务器,地址有误
- 5xx 服务器错误,通常为服务端有问题时出现