前端Ajax-跨域与JSONP| “朝闻道”知识分享大赛

[2201_75824342]

这是我参加朝闻道知识分享大赛的第94篇文章。

---

1、同源策略

同源：如果两个页面的协议，域名和端口都相同，则两个页面具有相同的源

同源策略：是浏览器提供的一个安全功能。限制了从同一个源加载的文档或脚本如何与来自另一个源的资源进行交互。这是一个用于隔离潜在恶意文件的重要安全机制。

浏览器规定，A 网站的 JavaScript，不允许和非同源的网站 C 之间，进行资源的交互，例如：
无法读取非同源网页的 Cookie、LocalStorage 和 IndexedDB
无法接触非同源网页的 DOM
无法向非同源地址发送 Ajax 请求

2、 跨域

跨域：同源指的是两个 URL 的协议、域名、端口一致，反之，则是跨域。
出现跨域的根本原因：浏览器的同源策略不允许非同源的 URL 之间进行资源的交互。

浏览器对跨域请求的拦截

 

3、 jsonp

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

实现原理：
由于浏览器同源策略的限制，网页中无法通过 Ajax 请求非同源的接口数据。但是 <script> 标签不受浏览器同
源策略的影响，可以通过 src 属性，请求非同源的 js 脚本。
因此，JSONP 的实现原理，就是通过 <script> 标签的 src 属性，请求跨域的数据接口，并通过函数调用的形式，
接收跨域接口响应回来的数据。

缺点：

由于 JSONP 是通过 <script> 标签的 src 属性，来实现跨域数据获取的，所以，JSONP 只支持 GET 数据请求，不支持 POST 请求。
​

4、jQuery中的JSONP

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

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

5、 jQuery中JSONP的实现过程

jQuery 中的 JSONP，也是通过 <script> 标签的 src 属性实现跨域数据访问的，只不过，jQuery 采用的是动态创建和移除 <script> 标签的方式，来发起 JSONP 数据请求。
​
在发起 JSONP 请求的时候，动态向 <header> 中 append 一个 <script> 标签；
在 JSONP 请求成功以后，动态从 <header> 中移除刚才 append 进去的 <script> 标签；

6、 防抖和节流

节流策略：可以减少一段时间内事件的触发频率。

节流的应用场景

• 鼠标连续不断地触发某事件（如点击），只在单位时间内只触发一次；
• 懒加载时要监听计算滚动条的位置，但不必每次滑动都触发，可以降低计算的频率，而不必去浪费 CPU 资源；

节流阀：
节流阀为空，表示可以执行下次操作；不为空，表示不能执行下次操作。
当前操作执行完，必须将节流阀重置为空，表示可以执行下次操作了。
每次执行操作前，必须先判断节流阀是否为空。
​
使用节流优化鼠标跟随效果

$(function() {
   var angel = $('#angel')
   var timer = null // 1.预定义一个 timer 节流阀
   $(document).on('mousemove', function(e) {
   if (timer) { return } // 3.判断节流阀是否为空，如果不为空，则证明距离上次执行间隔不足16毫秒
   timer = setTimeout(function() {
       $(angel).css('left', e.pageX + 'px').css('top', e.pageY + 'px')
       timer = null // 2.当设置了鼠标跟随效果后，清空 timer 节流阀，方便下次开启延时器
       }, 16)
   })
})

防抖和节流的区别

• 防抖：如果事件被频繁触发，防抖能保证只有最有一次触发生效！前面 N 多次的触发都会被忽略！
• 节流：如果事件被频繁触发，节流能够减少事件触发的频率，因此，节流是有选择性地执行一部分事件！