前言 | ❤️ 不管前方的路多么崎岖不平,只要走的方向正确,都比站在原地更接近幸福 ❤️ |
---|
如果两个页面的协议,域名和端口都相同,则两个页面具有相同的源。
例如,下表给出了相对于 http://www.test.com/index.html 页面的同源检测:
URL | 是否同源 | 原因 |
---|---|---|
http://www.test.com/other.html | 是 | 同源(协议、域名、端口相同) |
https://www.test.com/about.html | 否 | 协议不同(http 与 https) |
http://blog.test.com/movie.html | 否 | 域名不同(www.test.com 与 blog.test.com) |
http://www.test.com:7001/home.html | 否 | 端口不同(默认的 80 端口与 7001 端口) |
http://www.test.com:80/main.html | 是 | 同源(协议、域名、端口相同) |
1️⃣ 同源策略(英文全称 Same origin policy)是浏览器提供的一个安全功能;
2️⃣ MDN 官方给定的概念:同源策略限制了从同一个源加载的文档或脚本如何与来自另一个源的资源进行交互。这是一个用于隔离潜在恶意文件的重要安全机制;
3️⃣ 通俗的理解:浏览器规定,A 网站的 JavaScript,不允许和非同源的网站 C 之间,进行资源的交互,例如:
同源指的是两个 URL 的协议、域名、端口一致,反之,则是跨域。
出现跨域的根本原因:浏览器的同源策略不允许非同源的 URL 之间进行资源的交互;
温馨提醒:浏览器允许发起跨域请求,但是,跨域请求回来的数据,会被浏览器拦截,无法被页面获取到!
1️⃣ 现如今,实现跨域数据请求,最主要的两种解决方案,分别是 JSONP
和 CORS
;
2️⃣ JSONP
:出现的早,兼容性好(兼容低版本IE)。是前端程序员为了解决跨域问题,被迫想出来的一种临时解决方案。缺点是只支持 GET 请求,不支持 POST 请求;
3️⃣ CORS
:出现的较晚,它是 W3C 标准,属于跨域 Ajax 请求的根本解决方案。支持 GET 和 POST 请求。缺点是不兼容某些低版本的浏览器;
JSONP
(JSON with Padding) 是 JSON 的一种“使用模式”,可用于解决主流浏览器的跨域数据访问的问题
1️⃣ 由于浏览器同源策略的限制,网页中无法通过 Ajax 请求非同源的接口数据。但是 标签不受浏览器同源策略的影响,可以通过 src 属性,请求非同源的 js 脚本。
2️⃣ 因此,JSONP 的实现原理,就是通过 标签的 src 属性,请求跨域的数据接口,并通过函数调用的形式,接收跨域接口响应回来的数据。
由于 JSONP 是通过 标签的 src 属性,来实现跨域数据获取的,所以,JSONP 只支持 GET 数据请求,不支持 POST 请求。
温馨提醒:JSONP 和 Ajax 之间没有任何关系,不能把 JSONP 请求数据的方式叫做 Ajax,因为 JSONP 没有用到 XMLHttpRequest 这个对象。
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)
}
})
温馨提醒:默认情况下,使用 jQuery 发起 JSONP 请求,会自动携带一个 callback=jQueryxxx
的参数,jQueryxxx 是随机生成的一个回调函数名称。
在使用 jQuery 发起 JSONP 请求时,如果想要自定义 JSONP 的参数以及回调函数名称,可以通过如下两个参数来指定:
$.ajax({
url: 'http://ajax.frontend.itheima.net:3006/api/jsonp?name=zs&age=20',
dataType: 'jsonp',
// 发送到服务端的参数名称,默认值为 callback
jsonp: 'callback',
// 自定义的回调函数名称,默认值为 jQueryxxx 格式
jsonpCallback: 'abc',
success: function(res) {
console.log(res)
}
})
jQuery 中的 JSONP,也是通过 标签的 src 属性实现跨域数据访问的,只不过,jQuery 采用的是动态创建和移除
标签的方式,来发起 JSONP 数据请求。
> 中 append 一个
标签;
中移除刚才 append 进去的
标签;防抖策略(debounce)是当事件被触发后,延迟 n 秒后再执行回调,如果在这 n 秒内事件又被触发,则重新计时;
用户在输入框中连续输入一串字符时,可以通过防抖策略,只在输入完后,才执行查询的请求,这样可以有效减少请求次数,节约请求资源;
实现输入框的防抖:
var timer = null; // 1. 防抖动的 timer
function debounceSearch(keywords) { // 2. 定义防抖的函数
timer = setTimeout(function() {
// 发起 JSONP 请求
getSuggestList(keywords)
}, 500)
}
$('#ipt').on('keyup', function() { // 3. 在触发 keyup 事件时,立即清空 timer
clearTimeout(timer)
// ...省略其他代码
debounceSearch(keywords)
})
节流就是指连续触发事件但是在 n 秒中只执行一次函数。节流会稀释函数的执行频率;
1️⃣ 节流阀为空,表示可以执行下次操作;不为空,表示不能执行下次操作;
2️⃣ 当前操作执行完,必须将节流阀重置为空,表示可以执行下次操作了;
3️⃣ 每次执行操作前,必须先判断节流阀是否为空;
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>Documenttitle>
<script src="./lib/jquery.js">script>
<style>
/* CSS 样式 */
html,
body {
margin: 0;
padding: 0;
overflow: hidden;
}
#angel {
position: absolute;
}
style>
head>
<body>
<img src="./angel.gif" alt="" id="angel" />
<script>
$(function () {
// 1. 获取到图片
var angel = $('#angel')
// 步骤1. 定义节流阀
var timer = null;
// 2. 绑定 mousemove 事件
$(document).on('mousemove', function (e) {
// 步骤3:判断节流阀是否为空, 如果不为空, 则证明距离上次执行间隔不足16毫秒
if (timer) { return }
// 3. 设置图片的位置
// 步骤2:开启延时器
timer = setTimeout(function () {
$(angel).css('top', e.pageY + 'px').css('left', e.pageX + 'px')
console.log('ok')
// 当设置了鼠标跟随效果后,清空 timer 节流阀,方便下次开启延时器
timer = null
}, 16)
})
})
script>
body>
html>
由于内容较多,所以我决定分开写啦,我会坚持一直更新呢!喜欢的朋友们记得点点赞哦!