同源
同源:两个页面的协议、域名和端口相同,则认为他们具有相同的源
示例:对http://www.test.com/index.html页面进行同源检测
URL | 是否同源 | 原因 |
---|---|---|
http://www.test.com/other.html | 是 | 同源(端口、域名、端口相同) |
https://www.test.com/about.html | 否 | 协议不同(http与https) |
http://blog.test.com/movie.html | 否 | 域名不同(www.test.com与blog.test.com) |
http://www.test.com:7001/home.html | 否 | 端口不同(默认的80端口与7001端口) |
http://www.test.com:80/main.html | 是 | 同源(端口、域名、端口相同) |
同源策略
全称Same origin policy 是浏览器提供的一个安全功能
目的:隔离一些潜在的恶意文件
浏览器规定A网站的JavaScript不允许和非同源的网站c之间进行资源的交互
跨域
不同源就是跨域 根本原因就是浏览器的同源策略导致的
浏览器对跨域请求的拦截
Ajax能对服务器发起请求,服务器也能正常接收并返回,但是返回到浏览器被同源策略拦截,无法被页面获取
实现跨域数据请求
最主要的两种解决方案是JSONP和CORS
JSONP:出现早,兼容性好 缺点是只支持GET请求
CORS:W3C标准,属于跨域Ajax请求的根本解决方案,不兼容低版本浏览器
JSONP(JSON with padding)
是JSON的一种‘使用模式’,用于解决主流浏览器的跨域数据访问问题
实现原理:(因为<script>标签不受同源策略的影响)
所以可以通过<script>标签src属性,请求跨域的数据接口,通过函数调用的形式,接收 跨域接口响应回来的数据
示例:
<script>
function success(data) {
console.log('JSONP响应回来的数据是:');
console.log(data);
}
</script>
<script src="http://ajax.frontend.itheima.net:3006/api/jsonp?callback=success&name=ls&age=30"></script>
注:JSONP和Ajax之间没有任何关系,不能把JSONP请求数据的方式叫做Ajax,因为JSONP没有用到XMLHttpRequest这个对象,发起的是一种js脚本类的请求
jQuery中的JSONP
示例:
// 发起JSONP请求
$.ajax({
url: 'http://ajax.frontend.itheima.net:3006/api/jsonp?name=zs&age=20',
// 代表我们要发起JSONP请求
dataType: 'jsonp',
//发送到服务器端的参数名称,默认值为 callback
jsonp:'callback',
//自定义的回调函数名称,默认值为jQueryxxx格式
jsonpCallback:'abc',
success: function(res) {
console.log(res);
}
})
默认情况下,使用jQuery发起JSONP请求,会自动携带一个callback=jQueryxxx的参数,jQuery是随机生成的一个回调函数名称
实现过程:jQuery采用的是动态创建和移除<script>标签的方式,发起JSONP请求
在发起JSONP请求的时候,动态向<header>中append一个<script>标签
在JSONP请求成功以后,动态从<header>中移除刚才append进去的<script>标签
防抖
防抖策略(debounce)
是当事件被触发后,延迟n秒后再执行回调,如果在这n秒内事件又被触发则重新计时(相当于LOL回城被打断再回城)
应用场景:
输入框防抖,通过防抖策略只有用户输入完成后才执行查询请求,可以有效减少请求次数,节约请求资源
实现输入框的防抖:
// 1. 定义延时器的Id(防抖动的 timer)
var timer = null
// 2. 定义防抖的函数
function debounceSearch(kw) {
timer = setTimeout(function () {
getSuggestList(kw)
}, 500)
}
$('#ipt').on('keyup', function () {
// 3. 触发keyup事件时,清空 timer
clearTimeout(timer)
//...省略其他代码
debounceSearch(keywords)
})
缓存搜索的建议列表
1、定义一个全局缓存对象
// 定义全局缓存对象
var cacheObj = {}
2、将搜索结果保存到缓存对象中
// 1. 获取到用户输入的内容,当做键
var k = $('#ipt').val().trim()
// 2. 需要将数据作为值,进行缓存
cacheObj[k] = res
3、优先从缓存中获取搜索建议
// 在获取搜索列表前先判断缓存中是否有数据
if (cacheObj[keywords]) {
return renderSuggestList(cacheObj[keywords])
}
节流
节流策略:
可以减少一段时间内事件的触发频率(跟技能冷却一样,冷却时怎么点击都没用)
应用场景:
1、鼠标连续触发某事件,单位时间内只触发一次
2、懒加载时要监听计算滚动条的位置,但不必每次滑动都触发,可以降低计算的频率
节流阀:设置两种状态控制操作是否执行,每次执行操作前都要判断
防抖和节流的区别
防抖:只有最后一次触发生效
节流:减少事件触发的频率,有选择性的执行一部分事件