同源
同源概念：若两个页面的协议，域名和端口（默认是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>
