同源策略与跨域

1、同源：两个页面协议、域名、端口(默认80)都相同，两个页面具有相同的源

2、同源策略：浏览器提供的安全功能（A的javascript，不允许和非同源网站C之间进行资源交互）

（1）无法读取非同源网页的Cookie、LocalStorage等

（2）无法接触非同源网页的DOM

（3）不能向非同源地址发送Ajax请求

3、跨域：两个页面协议、域名、端口有任何一个不同都会出现跨域（由于浏览器的同源策略导致的）

（1）浏览器对跨域请求进行拦截

跨域请求可以正常发起——浏览器能正常接收到跨域响应的数据——数据被浏览器同源策略拦截，因此Ajax获取不到数据

（2）如何实现跨域数据请求：

• JSONP（出现得早,兼容性好,只支持get请求）

• CORS（支持get,也支持post）

4、JSONP（script标签src属性不受同源策略的影响，可以请求到跨域的接口，以函数调用的形式接收跨域接口响应回来的数据）（前后端进行配合）

（1）借助 script标签的src属性，将请求服务器当作请求JS进行

（2）请求JS时将回调函数作为查询字符串发送给服务器

（3）服务器返回的数据作为回调函数的参数返回给浏览器，回调函数被执行，这样就可以进行跨域请求了

缺点： JSONP只能是get请求，请求资源都是get请求

5、jquery中的JSONP请求

$.ajax({
 url: 请求的url地址,
 dataType: 'jsonp',
 // 默认情况下，jquery发送jsonp请求时，会生成一个callback=jQueryXXX的参数（随机生成的回调函数的名称）
 // 指定发送到服务器端参数的名称，默认为callback
 jsonp: 'cb',
 // 自定义回调函数的名称
 jsonpCallback: 'fn',
 success: function(res) {}
})

• 动态创建和移除script标签的方式，来发起JSONP数据请求

• 发起JSONP请求时，动态在header中append一个script标签

• 完成JSONP请求时，动态从header中移除script标签

案例：淘宝搜索（地址：https://suggest.taobao.com/sug?q=keywords）

6、防抖

（1）防抖策略：当事件触发后，延迟n秒后再执行回调，如果在这n秒内事件又被触发，则重新计时。

（2）应用场景：文本框确认输入完再去发送请求(可借助定时器实现)（缓存搜索建议列表）

7、节流

（1）节流策略：减少一段时间内事件的触发频率

（2）应用场景：

鼠标连续不断地出发某事件，只在单位时间内触发一次；

懒加载

（3）节流阀：节流阀为空，可以执行下一次操作；不为空，不能执行下次操作（当前操作执行完，必须将节流阀置空，表示可以继续执行，执行之前都要判断一下节流阀是否为空）