jQuery高级用法、axios、同源与跨域、JSONP以及防抖与节流

重点:
一、jQuery高级用法
1、 jQuery实现文件上传
(1)定义UI结构
(2)验证是否选择了文件
①将 jQuery 对象转化为 DOM 对象,并获取选中的文件列表
②判断是否选择了文件
(3)向FormData中追加文件
var fd = new FormData()
fd.append(‘avatar‘, files[0])
(4)使用jQuery发起上传文件的请求
①不修改 Content-Type 属性,使用 FormData 默认的 Content-Type 值
contentType: false,
②不对 FormData 中的数据进行 url 编码,而是将 FormData 数据原样发送到服务器
processData: false,
(5)jQuery实现loading效果
①ajaxStart(callback)
Ajax 请求开始时,执行 ajaxStart 函数。可以在 ajaxStart 的 callback 中显示 loading 效果,示例代码如下:
$(document).ajaxStart(function() {$(‘#loading‘).show()})
注意: $(document).ajaxStart() 函数会监听当前文档内所有的 Ajax 请求。
②ajaxStop(callback)
Ajax 请求结束时,执行 ajaxStop 函数。可以在 ajaxStop 的 callback 中隐藏 loading 效果,示例代码如下:
$(document).ajaxStop(function() {$(‘#loading‘).hide()})
二、axios
1、什么是axios
Axios 是专注于网络数据请求的库。
相比于原生的 XMLHttpRequest 对象,axios 简单易用。
相比于 jQuery,axios 更加轻量化,只专注于网络数据请求。
2、axios发起GET请求
axios 发起 get 请求的语法:
axios.get(‘url‘, { params: { /参数/ } }).then(callback)
3、axios发起POST请求
axios 发起 post 请求的语法:
axios.post(‘url‘, { /参数/ }).then(callback)
4、直接使用axios发起请求
axios 也提供了类似于 jQuery 中 $.ajax() 的函数,语法如下:
jQuery高级用法、axios、同源与跨域、JSONP以及防抖与节流
三、同源策略
1、什么是同源
如果两个页面的协议,域名和端口都相同,则两个页面具有相同的源。
默认的端口为80
2、什么是同源策略
同源策略(英文全称 Same origin policy)是浏览器提供的一个安全功能
通俗的理解:浏览器规定,A 网站的 JavaScript,不允许和非同源的网站 C 之间,进行资源的交互
四、跨域
1、什么是跨域
同源指的是两个 URL 的协议、域名、端口一致,反之,则是跨域
出现跨域的根本原因:浏览器的同源策略不允许非同源的 URL 之间进行资源的交互
2、浏览器对跨域请求的拦截
jQuery高级用法、axios、同源与跨域、JSONP以及防抖与节流
注意:浏览器允许发起跨域请求,但是,跨域请求回来的数据,会被浏览器拦截,无法被页面获取到
3、如何实现跨域数据请求
现如今,实现跨域数据请求,最主要的两种解决方案,分别是 JSONP 和 CORS。
JSONP :出现的早,兼容性好(兼容低版本IE)。缺点是只支持 GET 请求,不支持 POST 请求。
CORS :出现的较晚,它是 W3C 标准,属于跨域 Ajax 请求的根本解决方案。支持 GET 和 POST 请求。缺点是不兼容某些低版本的浏览器
五、JSONP
1、什么是JSONP
JSONP 是JSON 的一种“使用模式”,可用于解决主流浏览器的跨域数据访问的问题。
2、JSONP的实现原理
由于浏览器同源策略的限制,网页中无法通过 Ajax 请求非同源的接口数据。但是 script 标签不受浏览器同源策略的影响,可以通过 src 属性,请求非同源的 js 脚本。
因此,JSONP 的实现原理,就是通过 script 标签的 src 属性,请求跨域的数据接口,并通过函数调用的形式,接收跨域接口响应回来的数据
3、JSONP的缺点
由于 JSONP 是通过 script 标签的 src 属性,来实现跨域数据获取的,所以,JSONP 只支持 GET 数据请求,不支持 POST 请求。
注意: JSONP 和 Ajax 之间没有任何关系,不能把 JSONP 请求数据的方式叫做 Ajax,因为 JSONP 没有用到XMLHttpRequest 这个对象
4、jQuery中的JSONP
(1)jQuery 提供的 $.ajax() 函数,除了可以发起真正的 Ajax 数据请求之外,还能够发起 JSONP 数据请求
(2)如果要使用 $.ajax() 发起 JSONP 请求,必须指定 datatype 为 jsonp
dataType: ‘jsonp‘,
(3)默认情况下,使用 jQuery 发起 JSONP 请求,会自动携带一个 callback=jQueryxxx 的参数,jQueryxxx 是随机生成的一个回调函数名称
5、自定义参数及回调函数名称
在使用 jQuery 发起 JSONP 请求时,如果想要自定义 JSONP 的参数以及回调函数名称,可以通过如下两个参数来指定:
(1)发送到服务端的参数名称,默认值为 callback
jsonp: ‘callback‘,
(2)自定义的回调函数名称 ,默认值为 jQueryxxx 格式
jsonpCallback: ‘abc‘,
6、jQuery中JSONP的实现过程
jQuery 中的 JSONP,也是通过

jQuery高级用法、axios、同源与跨域、JSONP以及防抖与节流

上一篇:Python+APPIUM UI自动化代码获取设备信息:devicesId、deviceName、platformVersion以及获取测试的包的package


下一篇:uniapp 生成二维码