同源策略跨域防抖节流节流阀

同源

同源概念：若两个页面的协议，域名和端口（默认是80端口）都相同，则两个页面具有相同的源。

 同源策略：是浏览器提供的一个安全功能

 通俗的理解：浏览器规定，A 网站的 JavaScript，不允许和非同源的网站 C 之间，进行资源的交互，例如：

① 无法读取非同源网页的 Cookie、LocalStorage 和 IndexedDB

② 无法接触非同源网页的 DOM

③ 无法向非同源地址发送 Ajax 请求

跨域

跨域概念：两个 URL 的协议、域名、端口任何一项或者多项不一样，则是跨域，与同源相反

出现跨域的根本原因：浏览器的同源策略不允许非同源的 URL 之间进行资源的交互

 浏览器对跨域请求的拦截

 注意：浏览器允许发起跨域请求，但是，跨域请求回来的数据，会被浏览器拦截，无法被页面获取到

如何实现跨域数据请求

现如今，实现跨域数据请求，最主要的两种解决方案，分别是 JSONP（前端方案） 和 CORS（后端方案）。

JSONP：出现的早，兼容性好（兼容低版本IE）。是前端程序员为了解决跨域问题，被迫想出来的一种临时解决方案。缺点是只支持 GET 请求，不支持 POST 请求。

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

 JSONP

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

JSONP的实现原理:通过 <script> 标签的 src 属性，请求跨域的数据接口，并通过函数调用的形式，接收跨域接口响应回来的数据

示列：发起Ajax跨域请求

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 
 4 <head>
 5   <meta charset="UTF-8">
 6   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7   <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8   <title>Document</title>
 9   <script src="./lib/jquery.js"></script>
10 </head>
11 
12 <body>
13   <script>
14     $.ajax({
15       method: 'GET',
16       url: 'http://www.liulongbin.top:3006/api/jsonp',
17       data: {
18         name: 'zs',
19         age: 20
20       },
21       success: function (res) {
22         console.log(res)
23       }
24     })  
25   </script>
26 </body>
27 
28 </html>

 jQuery中的JSONP

jQuery 提供的 $.ajax() 函数，除了可以发起真正的 Ajax 数据请求之外，还能够发起 JSONP 数据请求，例如：

1 $.ajax({
2      url: 'http://ajax.frontend.itheima.net:3006/api/jsonp?name=zs&age=20',
3      // 如果要使用 $.ajax() 发起 JSONP 请求，必须指定 datatype 为 jsonp
4      dataType: 'jsonp',
5      success: function(res) {
6      console.log(res)
7      }
8 })

默认情况下，使用 jQuery 发起 JSONP 请求，会自动携带一个 callback=jQueryxxx 的参数，jQueryxxx 是随机生成的一个回调函数名称

自定义参数及回调函数名称

在使用 jQuery 发起 JSONP 请求时，如果想要自定义 JSONP 的参数以及回调函数名称，可以通过如下两个参数来指定：

 1 $.ajax({
 2      url: 'http://ajax.frontend.itheima.net:3006/api/jsonp?name=zs&age=20',
 3      dataType: 'jsonp',
 4      // 发送到服务端的参数名称，默认值为 callback
 5      jsonp: 'callback',
 6      // 自定义的回调函数名称，默认值为 jQueryxxx 格式
 7      jsonpCallback: 'abc',
 8      success: function(res) {
 9      console.log(res)
10      }
11 })

jQuery中JSONP的实现过程

jQuery 中的 JSONP，也是通过 <script> 标签的 src 属性实现跨域数据访问的，只不过，jQuery 采用的是动态创建和移除标签的方式，来发起 JSONP 数据请求

  • 在发起 JSONP 请求的时候，动态向 <header> 中 append 一个 <script> 标签；

  • 在 JSONP 请求成功以后，动态从 <header> 中移除刚才 append 进去的 <script> 标签；

 示列如下：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 
 4 <head>
 5   <meta charset="UTF-8">
 6   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7   <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8   <title>Document</title>
 9   <script src="./lib/jquery.js"></script>
10 </head>
11 
12 <body>
13   <button id="btnJSONP">发起JSONP数据请求</button>
14   <script>
15     $(function () {
16       $('#btnJSONP').on('click', function () {
17         $.ajax({
18           url: 'http://liulongbin.top:3006/api/jsonp?address=北京&location=顺义',
19           // 发送到服务端的参数名称，默认值为 callback
20           dataType: 'jsonp',
21           // 自定义的回调函数名称，默认值为 jQueryxxx 格式
22           jsonpCallback: 'abc',
23           success: function (res) {
24             console.log(res)
25           }
26         })
27       })
28     })
29   </script>
30 </body>
31 
32 </html>

防抖&节流

 防抖: 如果事件被频繁触发，防抖能保证只有最有一次触发生效！前面 N 多次的触发都会被忽略！

 节流: 如果事件被频繁触发，节流能够减少事件触发的频率，因此，节流是有选择性地执行一部分事件！

节流阀

概念：每次执行操作前，必须先判断节流阀是否为空

节流阀为空，表示可以执行下次操作；不为空，表示不能执行下次操作。

当前操作执行完，必须将节流阀重置为空，表示可以执行下次操作了。

生活中常见示列：

高铁卫生间是否被占用，由红绿灯控制，红灯表示被占用，绿灯表示可使用。

 假设每个人上卫生间都需要花费5分钟，则五分钟之内，被占用的卫生间无法被其他人使用。

 上一个人使用完毕后，需要将红灯重置为绿灯，表示下一个人可以使用卫生间。

 下一个人在上卫生间之前，需要先判断控制灯是否为绿色，来知晓能否上卫生间。

示列：鼠标跟随小天使移动（小天使图片放在代码下方，有需要可自行下载）

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 
 4 <head>
 5   <meta charset="UTF-8">
 6   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7   <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8   <title>Document</title>
 9   <script src="./lib/jquery.js"></script>
10   <style>
11     html,
12     body {
13       margin: 0;
14       padding: 0;
15       overflow: hidden;
16     }
17 
18     #angel {
19       position: absolute;
20     }
21   </style>
22 </head>
23 
24 <body>
25   <!-- 引入小天使的图片-->
26   <img src="./angel.gif" alt="" id="angel" />
27 
28   <script>
29     $(function () {
30       // 1. 获取到图片
31       var angel = $('#angel')
32       // 步骤1. 定义节流阀
33       var timer = null
34       // 2. 绑定 mousemove 事件
35       $(document).on('mousemove', function (e) {
36         // 步骤3：判断节流阀是否为空，如果不为空，则证明距离上次执行间隔不足16毫秒
37         if (timer) { return }
38         // 3. 设置图片的位置
39         // 步骤2：开启延时器
40         timer = setTimeout(function () {
41           $(angel).css('top', e.pageY + 'px').css('left', e.pageX + 'px')
42           console.log('ok')
43           // 当设置了鼠标跟随效果后，清空timer节流阀，方便下次开启延时器
44           timer = null
45         }, 16)
46 
47       })
48     })
49   </script>
50 </body>
51 
52 </html>

 

 

 

 

 

 

 

 

 

 

posted @ 2021-10-21 14:02  原来是奔跑的蜗牛  阅读(63)  评论(0)    收藏  举报