同源策略
如果两个页面的协议,域名和端口都相同,则两个页面具有相同的源.
同源策略
同源策略是浏览器提供的一个安全功能.
MDN官方给定的概念:同源策略限制了从同一个源加载的文档或脚本如何与来自另一个源的资源进行交互.这是一个用于隔离潜在恶意文件的重要安全机制.
通俗的理解:浏览器规定,A网站的JavaScript,不允许和非同源的网站C之间进行资源的交互,例如:
- 无法读取非同源网页的Cookie,LocalStorage和IndexedDB
- 无法接触非同源网页的DOM
- 无法向非同源地址发送Ajax请求
跨域JSONP
同源指的是两个URL的协议,域名,端口一致,反之,就是跨域.
出现跨域的根本原因:浏览器的同源策略不允许非同源的URL之间进行资源交互.
JSONP
JSONP是JSON的一种'使用模式',可用于解决主流浏览器的跨域数据访问的问题.
JSONP的实现原理
由于浏览器同源策略的限制,网页无法通过Ajax请求非同源的接口数据.但是script标签不受浏览器同源策略的影响,可以通过src属性,请求非同源的js脚本.
因此,JSONP的实现原理,就是通过script标签的src属性,请求跨域的数据接口,并通过函数调用的形式,接收跨域接口响应回来的数据.
JSONP的缺点
由于JSONP是通过script标签的src属性,来实现跨域数据获取的,所以,JSONP只支持GET数据请求,不支持POST请求.
注意:JSONP和Ajax之间没有任何关系,不能把JSONP请求数据的方式叫做Ajax,因此JSONP没有用到XMLHttpRequest这个对象.
$.ajax({
url:'http://ajax.frontend.itheima.net:3006/api/jsonp?name=zs&age=20',
dataType:'jsonp',
//发送到服务器的参数名称,默认值为callback
jsonp:'callback',
//自定义的回调函数名称,默认值为jQueryxxx格式
jsonpCallback:'abc',
success:function(res){
console.log(res)
}
})
jQuery中的JSONP的实现过程
jQuery中的JSONP,也是通过script标签的src属性实现跨域数据访问的,只不过,jQuery采用的是动态创建和移除script标签的方式,发起JSONP数据请求.
1. 在发起JSONP请求的时候,动态向<header>中append一个<script>标签;
2. 在JSONP请求成功以后,动态从<header>中移除刚才append进去的script标签;
防抖
当持续触发事件时，一定时间段内没有再触发事件，事件处理函数才会执行一次，如果设定的时间到来之前，又一次触发了事件，就重新开始延时。
防抖应用场景
用户在输入框中连续输入一串字符时,可以通过防抖策略,只在输入完成后,才执行查询的请求,这样可以有效减少请求次数,节约请求资源;
节流
让一个函数无法在很短的时间间隔内连续调用，当上一次执行完之后过了规定的时间间隔，才能进行下一次的函数调用.可以减少一段事件内事件的触发频率.
节流的应用场景
- 鼠标连续不断地触发某事件(如点击),只在单位时间内触发一次;
- 懒加载时要监听计算滚动条的位置,但不必每次滑动都触发,可以降低计算的频率,而不必去浪费CPU资源;
防抖和节流的区别
- 防抖:如果事件被频繁触发,防抖能保证只有最近一次触发生效!前面N多次的触发都会被忽略!
- 节流:如果事件被频繁触发,节流能够减少事件触发的频率,因此,节流是有选择性地执行一部分事件!