跨域与JSONP
目录
能够知道什么是同源策略和跨域
能够知道什么是JSONP
能够说出JSONP的实现原理
能够知道防抖和节流的概念
1.1同源策略
1.什么是同源
如果两个页面的协议,域名和端口都相同,则两个具有相同的源
例如,下标给出了相对于http://www.test.com/index.html页面的同源检测:
2.什么是同源策略
同源策略(英文全称Same origin policy)是浏览器提供的一个安全功能。
MDN官方给定的概念:同源策略限制了从同一个源加载的文档或脚本如何与来自另一个源的资源进行交互这是一个用于隔离潜在恶意文件的重要文件的重要安全机制。
通俗的理解:浏览器规定,A网站的JavaScript,不允许和非同源的网站C之间,进行资源交互 ,例如:
1.无法读取非同源网页的Cookie、LocalStorage和lndexedDB
2.无法解除非同源网页的DOM
3.无法向非同源地址发送Ajax请求
1.2跨域
1.什么是跨域
同源指的是两个URL的协议、域名、端口一致,反之,则是跨域。
出现跨域的根本原因:浏览器的同源策略不允许非同源的URL之间进行资源的交互。
网页: http://www.test.com/index.html
接口: http://www.api.com/userlist
2.浏览器对跨域请求的拦截
注意:浏览器允许发起跨域请求,但是,跨域请求回来的数据,会被浏览器拦截,无法被页面获取到!
3.如何实现跨域请求
现如今,实现跨域数据请求,最主要的两种解决方案,分别是JSONP 和CORS。
JSONP:出现的早,兼容性好(兼容低版本IE)。是前端程序员为了解决跨域问题,被迫想出来的一种临时解决方案。缺点是只支持GET请求,不支持POST请求。
CORS:出现的较晚,它是W3C标准,属于跨域 Ajax请求的根本解决方案。支持GET和POST请求。缺点是不兼容某些低版本的浏览器。
2.1什么是JSONP
JSONP(JSON with Padding)是JSON的一种“使用模式”,可用于解决主流浏览器的跨域数据访问的问题
2.2JSONP的实现原理
由于浏览器同源策略的限制,网页中无法通过Ajax请求非同源的接口数据。但是<script>标签不受浏览器同源策略的影响,可以通过src属性,请求非同源的js 脚本。
因此,JSONP 的实现原理,就是通过<script>标签的src属性,请求跨域的数据接口,并通过函数调用的形式,接收跨域接口响应回来的数据。
发起跨域请求出现的问题:
<script> $.ajax({ method: "GET", url: "http://ajax.frontend.itheima.net:3006", data: { name: "ls", age: 15, }, success: function (res) { console.log(res); }, }); </script>
2.3自己实现一个简单的JSONP
JSONP不属于Ajax
<!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>Document</title> </head> <body></body> <script> function abc(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> </html>
2.4JSONP的缺点
由于JSONP是通过<script>标签src属性,来实现跨域数据获取的,所以,JSONP只支持GET数据请求,不支持POST请求
注意:JSONP和Ajax之间没有任何关系,不能把JSONP请求数据的方式叫做Ajax,因为JSONP没有用到XMLHttpRequest这个对象
2.5jQuery中的JSONP
jQuery提供的$.ajax()函数,除了可以发起真正的Ajax数据请求之外,还能狗发起JSONP数据请求,例如:
<script> $(function () { // 发起JSONP的请求 $.ajax({ url: "http://ajax.frontend.itheima.net:3006/apu/jsonp?name=zs&age=20", // 代表我们要发起JSONP的数据请求 dataType: "jsonp", success: function (res) { console.log(res); }, }); }); </script>
2.6自定义参数及回调函数名称
在使用jQuery发起JSONP请求时,如果想要自定义JSONP的参数以及回调函数名称,可以通过如下两个参数来指定:
<script> $(function () { // 发起JSONP的请求 $.ajax({ url: "http://ajax.frontend.itheima.net:3006/apu/jsonp?name=zs&age=20", // 代表我们要发起JSONP的数据请求 dataType: "jsonp", jsonp: "cb", jsonpCallback: "abc", success: function (res) { console.log(res); }, }); }); </script>
2.7jQuery中JSONP的实现过程
jQuery中的JSONP,也是通过<script>标签的src属性实现跨域数据访问的,只不过,jQuery采用的是动态创建移除<script>标签的方式,来发起JSONP数据请求。
在发起JSONP请求的时候,动态向<header>中append一个<script>标签;
在JSONP请求成功后,动态从<header>中移除刚才append中移除刚才append进去的<script>标签
<!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>Document</title> </head> <body> <button id="btnJSONP">发起JSONP请求</button> </body> <script src="/lib/jquery.min.js"></script> <script> $(function () { $("#btnJSONP").on("click", function () { $.ajax({ url: "http://ajax.frontend.itheima.net:3006/api/jsonp?address=北京&location=顺义", dataType: "jsonp", jsonpCallback: "abc", success: function (res) { console.log(res); }, }); }); }); </script> </html>
3.防抖和节流
防抖
1.什么是防抖
防抖策略(debounce) 是当事件被触发后,延迟n秒后再执行回调,如果在这n秒内事件又被触发,则重新计时。
只执行最后一次动作
2.防抖的应用场景
用户在输入框中连续输入一串字符时,可以通过防抖策略,只在输入完后,才执行查询的请求,这样才更有效减少请求次数,节约请求资源;
注意: 如果没有设置防抖,那么每输入一个字符就会请求一次很浪费请求资源
3.实现输入框的防抖
节流
1.什么节流
节流策略(throttle),顾名思义,可以减少一段时间内事件的触发频率。
防止按下多次射击无限制攻速
2.节流的应用场景
1.鼠标连续不断地触发某事件(如点击),只在单位时间内只触发一次;
2.懒加载时要监听计算滚动条的位置,但不必每次滑动都触发,可以降低计算频率,而不必去浪费CPU资源
3.节流阀的概念
高铁卫生间是否被占用,由红绿灯控制,红灯表示被占用,绿灯表示可使用。
假设每个人上卫生间都需要花费5分钟,则五分钟之内,被占用的卫生间无法被其他人使用。上一个人使用完毕后,需要将红灯重置为绿灯,表示下一个人可以使用卫生间。
下一个人在上卫生间之前,需要先判断控制灯是否为绿色,来知晓能否上卫生间。
节流阀为空,表示可以执行下次操作;不为空,表示不能执行下次操作。
当前操作执行完,必须将节流阀重置为空,表示可以执行下次操作了。
每次执行操作前,必须先判断节流阀是否为空。
使用节流优化鼠标跟随效果:
4.防抖和节流的区别
防抖:如果事件频繁触发,防抖能保证只有最后一次触发生效!前面N多次的触发都会被忽略!
节流:如果事件被频繁触发,节流能够减少事件触发频率,因此,节流是有选择地执行一部分事件