同源策略
什么是同源:如果两个页面的协议,域名和端口都相同,则两个页面具有相同的源。
什么是同源策略:同源策略(英文全称 Same origin policy)是浏览器提供的一个安全功能。
MDN官方给定的概念:同源策略限制了从同一个源加载的文档或脚本如何与来自另一个源的资源进行交互。这是一个用于隔离潜在恶意文件的重要安全机制。
通俗的理解:浏览器规定,A网站的JavaScript不允许和非同源的网站C之间进行资源的交互。
跨域
什么是跨域:同源指的是两个URL的协议、域名。端口一致,反之,则是跨域。
出现跨域的根本原因:浏览器的同源策略不允许非同源的URL之间进行资源的交互。
浏览器对跨域请求的拦截

注意:浏览器允许发起跨域请求,但是,跨域请求回来的数据,会被浏览器拦截,无法被页面获取到。
如何实现跨域数据请求:现如今,实现跨域数据请求,最主要的两种解决方案,分别是JSONP和CORS。
JSONP:出现的早,兼容性好(兼容低版本的IE)。是前端程序员为了解决跨域问题,被迫想出来的一种临时解决方案。缺点是只支持GET请求,不支持POST请求。CORS:出现的较晚,它是W3C标准,属于跨域Ajax请求的根本解决方案。支持GET和POST请求。缺点是不兼容某些低版本的浏览器。什么是JSONP
JSONP(JSON with Padding)是JSON的一种“使用模式”,可用于解决主流浏览器的跨域数据访问的问题。
JSONP的实现原理
由于浏览器同源策略的限制,网页中无法通过Ajax请求非同源的接口数据。但是标签不受浏览器同源策略的影响,跨域通过src属性,请求非同源的JS脚本。
因此,JSONP的实现原理,就是通过标签的src属性,请求跨域的数据接口,并通过函数调用的形式,接收跨域接口响应回来的数据。
自己实现一个简单的JSONP
<script>
function abc(data) {
console.log('JSONP响应回来的数据是');
console.log(data);
}
</script>
<script src="http://www.liulongbin.top:3006/api/jsonp?callback=abc&name=ls&age=30"></script>
jQuery中的JSONP
jQuery提供的$.ajax()函数,除了可以发起真正的Ajax数据请求之外,还能够发起JSONP数据请求,例如:
$(function () {
$.ajax({
url: 'http://www.liulongbin.top:3006/api/jsonp?name=zs&age=20',
dataType: 'jsonp',
jsonp: 'callback', // 发送到服务器端的参数名称,默认值为callback
jsonpCallback: 'abc', // 自定义的回调函数名称,默认值为jQeuryxxx格式
success: function (res) {
console.log(res);
}
})
})
jQuery中的JSON的实现过程
JQuery中的JSONP,也是通过标签的src属性实现跨域数据访问的,只不过,jQuery采用的是动态创建和移除标签分方式,来发起JSONP数据请求。
中append一个标签。中移除刚才append进去的标签。什么是防抖
防抖策略(debounce)是当事件被触发后,延迟n秒后再执行回调,如果在这n秒内事件又被触发,则重新计时。
什么是节流
节流策略(throttle),顾名思义,可以减少一段时间内事件的触发频率。
节流的应用场景
防抖和节流的区别