跨域与JSONP 防抖与节流

了解同源策略和跨域

什么是同源：如果两个页面的协议、域名和端口号都相同，则两个页面具有相同的源，只要三者中任何一项不同则是跨域。
示例：

var url = "http://www.test.com/index.html"
//协议：http
//域名：www.test.com
//端口号：80（域名后面紧跟的:就是端口号，没有则默认是80）

同源策略：是浏览器提供的一个安全功能，同源策略禁止了不同源网站之间利用JS进行资源交互，这是一个用于隔离潜在恶意文件的重要安全机制。主要体现在以下几个方面：

1. 无法读取非同源网页的cookie、LocalStore和IndexDB
2. 无法接触非同源网页的DOM
3. 无法向非同源地址发送Ajax请求

实现跨域数据的请求

实现跨域数据请求，主要有两种方案，一是JSOP和CORS。
JSON：出现的早，兼容性好，但是只支持get请求不支持post请求。

CORS：出现的比较晚，是W3C标准，属于Ajax跨域请求数据的根本解决方案，支持get和post请求，缺点是不兼容某些低版本的浏览器。

JSONP

JSON（JSON with Padding）是JSON的一种使用模式，可用于解决主流浏览器的跨域数据访问的问题。

实现原理

受同源策略的影响，网页中无法通过Ajax请求非同源的接口数据。但是<script>标签则不受浏览器同源策略的影响，可以通过src属性，请求非同源的脚本。因此，JSONP的实现原理就是通过<script>标签的src属性，请求跨域的数据接口，并通过函数调用的形式，接收跨域接口响应回来的数据。由于JSONP没有用到XMLHttpRequest对象，所以不属于Ajax

先在定义一个回调函数：

<script>
function success(data){
	console.log("获取到了数据！");
	console.log(data);
}
</script>

然后在另一个

<script src="123.js?callback=success"></script>

自定义实现一个简单的JSONP：

<script>
	//首先仍然是自定义一个回调函数
	function success(data){
		console.log(data);
	}
</script>
<script src="http://ajax.frontend.itheima.net:3006/api/jsonp?callback=success"></script>

JQuery中的JSONP

JQuery中提供的$.ajax()函数不但可以发起真正的ajax请求，还可以发起JSONP数据请求：

$.ajax({
	url: "http://ajax.frontend.itheima.net:3006/api/jsonp?callback=success",
	//如果要使用ajax发起JSONP请求，则需要指定dataType属性为“JSONP”
	dataType: "JSONP",
	//jsonpCallback属性用于修改回调函数名，默认是callback
	jsonpCallback: "cb",
	success: function (data){
		console.log(data);
	}
});

防抖和节流

什么是防抖

防抖策略（debounce）是当事件被触发后，延迟n秒后再执行回调，如果在这n秒内事件又被触发，则重新计时。
可以用下图理解防抖策略：

防抖策略的好处：当我们频繁地触发某个事件时，让回调函数最终只执行最后一次，可以可以有效减少请求次数，节约请求资源。
防抖的应用场景：用户在输入框中输入一串字符串时，通过防抖策略，只在输入完成后进行查询，减少请求次数，节约资源。还有其他应用场景等。

具体实现代码：（以用户向输入框输入文字为例）

var timer = null;
function debounceSearch(){
	timer = setTimeout(function(){
		//这里是将用户输入的值发送到服务器请求搜索数据后将结果展示到下来菜单的代码
	}, 500);
}

//在<input type="text" id="ipt">输入框标签中绑定keyup事件
var ipt = document.querySelector("#ipt");
ipt.addEventListener("keyup", function(){
	//每次按下后将定时器清空
	clearTimerout(timer);
	//...这里是部分业务相关代码，比如输入框为空值时清空展示列表并隐藏
	//下一步重新开启定时器
	debounceSearch();
});

缓存搜索结果

对于输入框，不仅可以设置防抖来减少服务器的请求次数，还可以设置保存缓存搜索的建议列表来防止重复搜索相同内容。

第一步：设置一个全局缓存对象
第二步：当得到服务器的响应后的数据，将用户在输入框中输入的字符串作为键，服务器响应回来的数据（对象）作为值，存储在刚刚设置的全局缓存对象中。
第三步：优先从缓存中获取搜索建议

什么是节流

节流策略（throttle），就是指在某一段时间内减少事件的触发频率。
比如在射击类游戏中，装弹时再次装弹是无意义的操作，必须等装弹完成后才能再次装弹。再比如高铁上的卫生间，有红绿灯，当为红灯时厕所不可用，绿灯才可用，这里红绿灯就是节流阀了。
节流的应用场景：

• 鼠标连续不断的触发某事件（比如点击），只在单位时间内触发一次。
• 懒加载要监听计算滚动条的位置，但不必每次滑动都触发，可以降低计算的频率，而不必去浪费CPU的资源。