目录
同源策略和跨域
同源策略
- 如果两个页面的协议，域名和端口都相同，则两个页面具有相同的源。
例如，下表给出了相对于 http://www.test.com/index.html 页面的同源检测：
- 端口号没有写的话 默认 80
| 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 |
是 |
同源（协议、域名、端口相同） |
- 同源策略（英文全称 Same origin policy）是浏览器提供的一个安全功能。
MDN 官方给定的概念：同源策略限制了从同一个源加载的文档或脚本如何与来自另一个源的资源进行交互。这是一个用于隔离潜在恶意文件的重要安全机制。
通俗的理解：浏览器规定，A 网站的 JavaScript，不允许和非同源的网站 C 之间，进行资源的交互，例如：
- 无法读取非同源网页的 Cookie、LocalStorage 和 IndexedDB
- 无法接触非同源网页的 DOM
- 无法向非同源地址发送 Ajax 请求
跨域
- 同源指的是两个 URL 的协议、域名、端口一致，反之，则是跨域。
- 出现跨域的根本原因：浏览器的同源策略不允许非同源的 URL 之间进行资源的交互。
以下两个域名不一样，无法进行资源的交互
- 网页：http://www.test.com/index.html
- 接口：http://www.api.com/userlist
浏览器对跨域请求的拦截
- 注意：浏览器允许发起跨域请求，但是，跨域请求回来的数据，会被浏览器拦截，无法被页面获取到！
如何实现跨域数据请求
- 现如今，实现跨域数据请求，最主要的两种解决方案，分别是 JSONP 和 CORS。
- JSONP：出现的早，兼容性好（兼容低版本IE）。是前端程序员为了解决跨域问题，被迫想出来的一种临时解决方案。缺点是只支持 GET 请求，不支持 POST 请求。
- CORS：出现的较晚，它是 W3C 标准，属于跨域 Ajax 请求的根本解决方案。支持 GET 和 POST 请求。缺点是不兼容某些低版本的浏览器。
JSONP
- JSONP (JSON with Padding) 是 JSON 的一种“使用模式”，可用于解决主流浏览器的跨域数据访问的问题。
JSONP的实现原理
- 由于浏览器同源策略的限制，网页中无法通过 Ajax 请求非同源的接口数据。
- 但是 <script> 标签不受浏览器同源策略的影响，可以通过 src 属性，请求非同源的 js 脚本。
- 因此，JSONP 的实现原理，就是通过 <script> 标签的 src 属性，请求跨域的数据接口，并通过函数调用的形式，接收跨域接口响应回来的数据。
自己实现一个简单的JSONP
定义一个 success 回调函数：
<script>
function success(data) {
console.log('拿到了data数据');
console.log(data);
}
</script>
通过 <script> 标签，请求接口数据，然后把 要请求的函数名 以 查询字符串的形式写到后面：
<script src="./js/getdata.js?callback=success"></script>
<body>
<script>
function success(data) {
console.log('JSONP响应回来的数据是：');
console.log(data);
}
</script>
<script src="http:/www.liulongbin.top:3006/api/jsonp?callback=success&name=zs&age=20"></script>
</body>
JSONP的缺点
- 由于 JSONP 是通过 <script> 标签的 src 属性，来实现跨域数据获取的，所以，JSONP 只支持 GET 数据请求，不支持 POST 请求。
- 注意：JSONP 和 Ajax 之间没有任何关系，不能把 JSONP 请求数据的方式叫做 Ajax，因为 JSONP 没有用到 XMLHttpRequest 这个对象。
jQuery中的JSONP
- jQuery 提供的 $.ajax() 函数，除了可以发起真正的 Ajax 数据请求之外，还能够发起 JSONP 数据请求
- 默认情况下，使用 jQuery 发起 JSONP 请求，会自动携带一个 callback=jQueryxxx 的参数，jQueryxxx 是随机生成的一个回调函数名称。
<script>
$(function () {
// 发起JSONP请求
$.ajax({
url: 'http:/www.liulongbin.top:3006/api/jsonp?name=zs&age=20',
// 代表我们要发起jsonp的数据请求
// 如果要使用 $.ajax() 发起 JSONP 请求，必须指定 datatype 为 jsonp
dataType: 'jsonp',
success: function (res) {
console.log(res);
}
})
})
</script>
自定义参数及回调函数名称
- 在使用 jQuery 发起 JSONP 请求时，如果想要自定义 JSONP 的参数以及回调函数名称，可以通过如下两个参数来指定
// 发送到服务端的参数名称，默认值为 callback
jsonp: 'callback', 一般不改这个，就默认叫callback
// 自定义的回调函数名称，默认值为 jQueryxxx 格式
jsonpCallback: 'abc',
$(function () {
// 发起JSONP请求
$.ajax({
url: 'http:/www.liulongbin.top:3006/api/jsonp?name=zs&age=20',
// 代表我们要发起jsonp的数据请求
dataType: 'jsonp',
jsonp: 'abc',
jsonpCallback: 'HAHAHA',
success: function (res) {
console.log(res);
}
})
})
jQuery中JSONP的实现过程
- jQuery 中的 JSONP，也是通过 <script> 标签的 src 属性实现跨域数据访问的，只不过，jQuery 采用的是动态创建和移除 <script> 标签的方式，来发起 JSONP 数据请求。
- 在发起 JSONP 请求的时候，动态向 <header> 中 append 一个 <script> 标签；
- 在 JSONP 请求成功以后，动态从 <header> 中移除刚才 append 进去的 <script> 标签；
<button id="btnJSONP">发起JSONP数据请求</button>
<script>
$(function () {
$('#btnJSONP').on('click', function () {
$.ajax({
url: 'http:/www.liulongbin.top:3006/api/jsonp?name=zs&age=20',
dataType: 'jsonp',
jsonpCallback: 'abc',
success: function (res) {
console.log(res);
}
})
})
})
</script>
案例 – 淘宝搜索
获取用户输入的搜索关键词
为了获取到用户每次按下键盘输入的内容，需要监听输入框的 keyup 事件(每次弹起的时候触发)
// 为输入框绑定 keyup()事件 每次键盘弹起的时候触发事件
$("#ipt").on("keyup", function () {
// 获取输入框的val值 然后去除两边的空格
var keywords = $(this).val().trim();
if (keywords.length <= 0) {
return;
}
// TODO:获取搜索建议列表
console.log(keywords);
});
封装getSuggestList函数
将获取搜索建议列表的代码，封装到 getSuggestList 函数中
// 获取搜索建议列表 的函数
function getSuggestList(kw) { // kw是用户搜索的关键字
$.ajax({
url: 'https://suggest.taobao.com/sug?q=' + kw, // q 就是淘宝中用户搜索的关键字
// 指定要发起的是 JSONP 请求
dataType: 'jsonp',
// 成功的回调函数
success: function (res) {
console.log(res);
}
})
}
渲染建议列表的UI结构
1. 导入模板引擎
2. 定义模板结构
<!-- 模板结构 -->
<script type="text/html" id="tpl-suggestList">
{
{each result}}
<!-- 搜索建议项目 -->
<div class="suggest-item">{
{$value[0]}}</div>
{
{/each}}
</script>
3. 定义渲染模板结构的函数
// 渲染UI结构
function renderSuggestList(res) {
// 如果没有需要渲染的数据，则直接 return
if (res.result.length <= 0) {
// 清空并隐藏掉
return $('#suggest-list').empty().hide();
}
// 调用模板引擎 template('引用的模板id', 要渲染的数据)
var htmlStr = template('tpl-suggestList', res);
// 渲染html结构
$('#suggest-list').html(htmlStr).show();
}
搜索关键词为空时隐藏搜索建议列表
if (keywords.length <= 0) {
// 清空并隐藏列表
return $('#suggest-list').empty().hide();
}
全部代码：
<!-- 模板结构 -->
<script type="text/html" id="tpl-suggestList">
{
{each result}}
<!-- 搜索建议项目 -->
<div class="suggest-item">{
{$value[0]}}</div>
{
{/each}}
</script>
<script>
$(function () {
// 定义延时器的id
var timer = null;
// 定义缓存对象
var cacheObj = {};
cacheObj = {};
// 定义防抖的函数
function debounceSearch(kw) {
// 定时器 0.5s后开始执行函数
timer = setTimeout(function () {
getSuggestList(kw);
}, 500)
}
// 为输入框绑定 keyup()事件 每次键盘弹起的时候触发事件
$("#ipt").on("keyup", function () {
// 清空定时器
clearTimeout(timer);
// 获取输入框的val值 然后去除两边的空格
var keywords = $(this).val().trim();
if (keywords.length <= 0) {
// 清空并隐藏列表
return $('#suggest-list').empty().hide();
}
// 先判断缓存中是否有数据
if (cacheObj[keywords]) {
// 有数据 直接去渲染数据
return renderSuggestList(cacheObj[keywords]);
}
// TODO:获取搜索建议列表
// getSuggestList(keywords);
// 在防抖函数里面 获取搜索建议列表
debounceSearch(keywords);
});
// 获取搜索建议列表 的函数
function getSuggestList(kw) { // kw是用户搜索的关键字
$.ajax({
url: 'https://suggest.taobao.com/sug?q=' + kw, // q 就是淘宝中用户搜索的关键字
// 指定要发起的是 JSONP 请求
dataType: 'jsonp',
// 成功的回调函数
success: function (res) {
renderSuggestList(res);
}
})
}
// 渲染UI结构
function renderSuggestList(res) {
// 如果没有需要渲染的数据，则直接 return
if (res.result.length <= 0) {
// 清空并隐藏掉
return $('#suggest-list').empty().hide();
}
// 调用模板引擎 template('引用的模板id', 要渲染的数据)
var htmlStr = template('tpl-suggestList', res);
// 渲染html结构
$('#suggest-list').html(htmlStr).show();
// 1.获取到用户输入的内容，当作键
var k = $('#ipt').val().trim();
// 2.需要将数据作为值，进行缓存
cacheObj[k] = res;// cacheObj对象里属性名为k的值
}
});
</script>
防抖
输入框的防抖
- 防抖策略（debounce）是当事件被触发后，延迟 n 秒后再执行回调，如果在这 n 秒内事件又被触发，则重新计时。事件被频繁触发的时候，事件只能被执行一次，提高浏览器的性能
比如王者荣耀回城，当你开始回城的时候，会等大约六秒之后再回城，如果在这几秒内事件又被触发，就会停止回城，重新给回城计时
- 用户在输入框中连续输入一串字符时，可以通过防抖策略，只在输入完后，才执行查询的请求，这样可以有效减少请求次数，节约请求资源；
当用户再次触发输入框事件的时候，清除掉timer（定时器）
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)
})
缓存搜索的建议列表
这里第一个是apple，第二个是apple watch，第三个是apple，又重复的发起请求了，我们可以根据之前的缓存把原来一样的取出来，就不用发起重复请求了，这样提高搜索效率
1. 定义全局缓存对象
// 缓存对象
var cacheObj = {}
2. 将搜索结果保存到缓存对象中
// 渲染建议列表
function renderSuggestList(res) {
// ...省略其他代码
// 1.获取到用户输入的内容，当作键
var k = $('#ipt').val().trim();
// 2.需要将数据作为值，进行缓存
cacheObj[k] = res;// cacheObj对象里属性名为k的值
}
3. 优先从缓存中获取搜索建议
// 监听文本框的 keyup 事件
$('#ipt').on('keyup', function() {
// ...省略其他代码
// 优先从缓存中获取搜索建议
if (cacheObj[keywords]) {
return renderSuggestList(cacheObj[keywords])
}
// 获取搜索建议列表
debounceSearch(keywords)
})
节流
节流策略（throttle），顾名思义，可以减少一段时间内事件的触发频率。
- 防止事件在一段时间内被无限制的触发，给他一个间隔时间，在这个间隔时间内再次触发不会有效果。
- 比如射击游戏，当你快速射击的时候，要让子弹的射出有一定间隔，所以使用了节流策略
节流的应用场景
- 鼠标连续不断地触发某事件（如点击），只在单位时间内只触发一次；
- 懒加载时要监听计算滚动条的位置，但不必每次滑动都触发，可以降低计算的频率，而不必去浪费 CPU 资源；
节流案例 – 鼠标跟随效果
不使用节流时实现鼠标跟随效果
<body>
<img src="./angel.gif" alt="" id="angel">
<script>
$(function () {
var angel = $('#angel');
$(document).on('mousemove', function (e) {
// 设置图片的位置
angel.css('left', e.pageX + 'px').css('top', e.pageY + 'px');
})
})
</script>
</body>
节流阀的概念
- 节流阀为空，表示可以执行下次操作；
- 不为空，表示不能执行下次操作。
- 当前操作执行完，必须将节流阀重置为空，表示可以执行下次操作了。
- 每次执行操作前，必须先判断节流阀是否为空。
使用节流优化鼠标跟随效果
<script>
$(function () {
var angel = $('#angel');
// 1. 定义节流阀，如果为null，就执行操作
var timer = null;
$(document).on('mousemove', function (e) {
// 3. 判断节流阀是否为空，如果不为空，就不用执行操作，则证明距离上次执行间隔不足16毫秒，return出去
if (timer) {
return
}
// 2. 开启延时器
timer = setTimeout(function () {
// 设置图片的位置
angel.css('left', e.pageX + 'px').css('top', e.pageY + 'px');
console.log('ok');
timer = null; // 当设置了鼠标跟随效果后，清空 timer 节流阀，方便下次开启延时器
}, 16)
})
})
</script>
防抖和节流的区别
- 防抖：如果事件被频繁触发，防抖能保证只有最有一次触发生效！前面 N 多次的触发都会被忽略！
- 节流：如果事件被频繁触发，节流能够减少事件触发的频率，因此，节流是有选择性地执行一部分事件！