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）节流阀：节流阀为空，可以执行下一次操作；不为空，不能执行下次操作（当前操作执行完，必须将节流阀置空，表示可以继续执行，执行之前都要判断一下节流阀是否为空）
网友评论