JavaScript 同源策略 跨域 JSONP CORS 防抖和节流
同源策略与跨域
- 同源策略
- 定义
- 比较
- 通俗理解
- 跨域
- 定义
- 浏览器对跨域请求的拦截
- 实现跨域的两种方法
- 自定义JSONP
- jQuery的JSONP
- 防抖与节流
- 防抖
- 节流
- 总结
同源策略
定义
同源策略（英文全称 Same origin policy）是浏览器提供的一个安全功能
两个页面的协议、域名、端口都相同时，则具有相同的源
比较
下表给出了相对于 http://www.test.com/index.html 页面的同源检测
通俗理解
- 浏览器规定A网站的javascript不能与非同源的C网站进行资源交互
- 无法读取非同源网页的cookie、LocalStorage、IndexedDB
- 无法接触非同源网页的JSON
- 无法向非同源地址发送ajax请求
跨域
定义
当两个页面协议、域名‘、端口有一个或多个不一致时，则为跨域
浏览器对跨域请求的拦截
实现跨域的两种方法
- JSONP
出现的早，兼容性好（兼容低版本IE）。是前端程序员为了解决跨域问题，被迫想出来的一种临时解决方案。缺点是只支持 GET 请求，不支持 POST 请求
- CORS
出现的较晚，它是 W3C 标准，属于跨域 Ajax 请求的根本解决方案。支持 GET 和 POST 请求。缺点是不兼容某些低版本的浏览器。
自定义JSONP
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>jsonp</title>
</head>
<body><script>function success(data){console.log(data);}</script><script src="http://www.liulongbin.top:3006/api/jsonp?callback=success&name=ls&age=30"></script>
</body>
</html>
jQuery的JSONP
<script>$.ajax({method:"get",url:"http://www.liulongbin.top:3006/api/jsonp?&name=1&age=2",//jsonp必须定义dataTypedataType:"jsonp",//使用 jQuery 发起 JSONP 请求，会自动携带一个 callback=jQueryxxx 的参数，jQueryxxx 是随机生成的一个回调函数名称// 自定义的回调函数名称，默认值为 jQueryxxx 格式jsonpCallback: 'abc',success:function(data){console.log(data);}});
</script>
防抖与节流
防抖
防抖策略（debounce）是当事件被触发后，延迟 n 秒后再执行回调，如果在这 n 秒内事件又被触发，则重新计时。
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><meta http-equiv="X-UA-Compatible" content="ie=edge" /><title>Document</title><!-- 导入页面的基本样式 --><link rel="stylesheet" href="./css/search.css" /><!-- 导入 jQuery --><script src="./lib/jquery.js"></script><!-- 引入template模板引擎 --><script src="./lib/template-web.js"></script></head><body><div class="container"><!-- Logo --><img src="./images/taobao_logo.png" alt="" class="logo" /><div class="box"><!-- tab 栏 --><div class="tabs"><div class="tab-active">宝贝</div><div>店铺</div></div><!-- 搜索区域（搜索框和搜索按钮） --><div class="search-box"><input id="ipt" type="text" class="ipt" placeholder="请输入要搜索的内容" /><button class="btnSearch">搜索</button></div><!-- 搜索建议列表 --><div class="suggest-list"></div></div></div><!-- 页面模板 --><script type="text/html" id="suggestList">{{each result}}<div class="suggest-item">{{$value[0]}}</div>{{/each}}</script><script>$(function(){//定时器idvar timer = null;//建议列表缓存对象var cacheObj = {}//防抖函数function debounce(kw){timer = setTimeout(function(){getSuggestList(kw)},500);}//输入触发事件$("#ipt").on('keyup',function(){clearTimeout(timer);var keywords = $(this).val().trim();if(keywords.length<=0){return $('.suggest-list').empty().hide();}//当缓存对象存在这个keywords 则直接从缓存对象中提取数据if(cacheObj[keywords]){return renderSuggestList(cacheObj[keywords]);}//调用防抖函数debounce(keywords);});//获取建议搜索列表数据函数function getSuggestList(kw){$.ajax({url:'https://suggest.taobao.com/sug?q='+kw,dataType:'jsonp',success:function(res){// console.log(res);renderSuggestList(res);}})}//渲染页面function renderSuggestList(res){//判断是否有获取到数据 没有则隐藏建议列表if(res.result.length<=0){return $('.suggest-list').empty().hide();}var htmlStr = template('suggestList',res);$('.suggest-list').html(htmlStr).show();var k =$('#ipt').val().trim();cacheObj[k]=res;}})</script></body>
</html>节流
节流策略（throttle），顾名思义，可以减少一段时间内事件的触发频率。
主要应用场景
1.鼠标连续不断地触发某事件（如点击），只在单位时间内只触发一次；
2.懒加载时要监听计算滚动条的位置，但不必每次滑动都触发，可以降低计算的频率，而不必去浪费 CPU 资源；
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>节流</title><script src="./淘宝搜索案例/lib/jquery.js"></script><style>html,body{margin: 0;padding: 0;}#angel{position: absolute;transform: translate(-30%,-50%);}</style>
</head>
<body><img src="angel.gif" alt="" id="angel"><script>$(function(){//节流阀var timer = null;$(document).on('mousemove',function(e){// 当节流阀不为null时，不再重复执行定时函数if(timer){return}timer = setTimeout(function(){console.log('ok');$('#angel').css('top',e.pageY+'px').css('left',e.pageX+'px');timer = null;},16)})})</script>
</body>
</html>
总结
- 防抖：如果事件被频繁触发，防抖能保证只有最有一次触发生效！前面 N 多次的触发都会被忽略！
- 节流：如果事件被频繁触发，节流能够减少事件触发的频率，因此，节流是有选择性地执行一部分事件！
JavaScript 同源策略 跨域 JSONP CORS 防抖和节流相关推荐
- 跨域-(jsonp cors)
同源策略它是由NetScape提出的一个著名的安全策略. 浏览器执行js,会检查它属于哪个页面,如果不是同源页面,不会被执行. 由于浏览器的同源策略,只要发送请求url与页面地址有不同的即为跨域.只要 ...
- python全栈开发103_python全栈开发day103-python垃圾回收机制、mro和c3算法解析、跨域jsonp\CORS、Content-Type组件...
Python垃圾回收 -- 引用计数 -- Python为每个对象维护一个引用计数 -- 当引用计数为0的 代表这个对象为垃圾 -- 标记清除 -- 解决孤立的循环引用 -- 标记根节点和可达对象 - ...
- AJAX | 跨域与JSONP + 同源策略和跨域 + JSONP + 防抖和节流 + 案例 – 淘宝搜索
目录 同源策略和跨域 同源策略 跨域 JSONP JSONP的实现原理 自己实现一个简单的JSONP JSONP的缺点 jQuery中的JSONP 自定义参数及回调函数名称 jQuery中JSONP的 ...
- Ajax（jQuery封装），表单form提交（Ajax），art-template模板引擎，原生Ajax，XML和JSON，axios，跨域和JSONP，防抖和节流，HTTP协议
目录 服务器基本概念 1.URL 2.URL地址的组成部分 3. 图解客户端与服务器的通信过程 4.网页中如何请求数据 5.资源的请求方式 Ajax jQuery中的Ajax 1. $.get()函数 ...
- 【JavaScript】同源、跨域
文章目录 同源策略 跨域 CORS JSONP JSONP概述 JSONP的简单实现 同源策略 同源政策是由Netscape提出的一个著名的安全策略. 所有支持JavaScript的浏览器都会使用这个 ...
- 从零开始学 Java - Spring MVC 实现跨域资源 CORS 请求
论职业的重要性 问:为什么所有家长都希望自己的孩子成为公务员? 答:体面.有权.有钱又悠闲. 问:为什么所有家长都希望自己的孩子成为律师或医生? 答:体面.有钱.有技能. 问:为什么所有家长都不怎么知 ...
- AJAX——同源与跨域2
参考链接:https://www.cnblogs.com/sdcs/p/8484905.html 1. 什么是跨域? 跨域是指一个域下的文档或脚本试图去请求另一个域下的资源,这里跨域是广义的. 广义的 ...
- Spring全家桶-Spring Security之跨域与CORS与防护
Spring全家桶-Spring Security之跨域与CORS Spring Security是一个能够为基于Spring的企业应用系统提供声明式的安全访问控制解决方案的安全框架.它提供了一组可以 ...
- 跨域资源共享CORS详解
最近深入了解了CORS的相关东西,觉得阮一峰老师的文章写得最详细易懂了,所有转载作为学习笔记. 原文地址:跨域资源共享 CORS 详解 CORS是W3C的一个标准,全称是跨域资源共享(Cross-or ...
最新文章
- 小程序云开发更新数组的指定对象的值
- Python单例模式的四种创建方式实例解析
- Saving James Bond - Easy Version 原创 2017年11月23日 13:07:33
- mysql一条sql更新多条数据_执行一条sql语句update多条记录实现思路
- 同事乱用 Redis 卡爆，我真是醉了
- 笔记本电脑怎么录制屏幕
- mysql 多选数据类型_【多选题】Mysql定点数数据类型包括( )。【本题2项正确】...
- MATLAB图像复原系统
- JS实现FlyBird
- windows是第几代计算机,第几代cpu不支持win7?全面分析第几代cpu不支持win7
- 图像标记img的alt属性
- 网页无法复制文字，一个插件解决问题！！！！
- Ribbon原理及使用详解
- python numpy中的矩阵、向量的加减乘除
- 利用数学软件Maxima求解电路的传递函数
- HEG安装教程以及闪退问题解决
- FPGA中en-rdy机制和req-ack机制的区别
- golang开发工程师-第一步：golang入门基础教学
- 使用Godaddy续费我的域名时遇到支付问题
- Android 顶部菜单栏 定义背景图片