AJAX | 跨域与JSONP + 同源策略和跨域 + JSONP + 防抖和节流 + 案例 – 淘宝搜索
目录
同源策略和跨域
同源策略
跨域
JSONP
JSONP的实现原理
自己实现一个简单的JSONP
JSONP的缺点
jQuery中的JSONP
自定义参数及回调函数名称
jQuery中JSONP的实现过程
案例 – 淘宝搜索
获取用户输入的搜索关键词
封装getSuggestList函数
渲染建议列表的UI结构
搜索关键词为空时隐藏搜索建议列表
全部代码：
防抖
输入框的防抖
缓存搜索的建议列表
节流
节流的应用场景
节流案例 – 鼠标跟随效果
防抖和节流的区别
同源策略和跨域
同源策略
- 如果两个页面的协议，域名和端口都相同，则两个页面具有相同的源。
例如，下表给出了相对于 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 为 jsonpdataType: '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) {// 如果没有需要渲染的数据，则直接 returnif (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 () {// 定义延时器的idvar 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) {// 如果没有需要渲染的数据，则直接 returnif (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. 防抖动的 timerfunction debounceSearch(keywords) { // 2. 定义防抖的函数timer = setTimeout(function() {// 发起 JSONP 请求getSuggestList(keywords)}, 500)}$('#ipt').on('keyup', function() { // 3. 在触发 keyup 事件时，立即清空 timerclearTimeout(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 多次的触发都会被忽略！
- 节流：如果事件被频繁触发，节流能够减少事件触发的频率，因此，节流是有选择性地执行一部分事件！
AJAX | 跨域与JSONP + 同源策略和跨域 + JSONP + 防抖和节流 + 案例 – 淘宝搜索相关推荐
- 新蜂商城（newbee-mall-api）部分接口实验，跨域处理（同源策略，跨域访问，CORS）,系统安全问题（Session，Cookie，Token，OAuth）（软件工程综合实践课程第十三周）
文章目录 一.要求 二.知识总结 跨域处理 1.同源策略 1.1 浏览器的同源策略 1.2 跨域请求实验 2 跨域访问 2.1 添加响应头来处理跨域 2.1.1 CORS 跨域资源共享 2.1.2 设 ...
- ajax背景、ajax对象、ajax状态、ajax与http、ajax请求数据接口、同步与异步、ajax请求XML数据、封装ajax函数、artTemplate简介、同源策略和跨域请求、JSONP
AJAX简介: ajax背景: 1.AJAX(Asynchronous JavaScript And Xml)异步的 JavaScript 和 XML:ajax是浏览器提供的一套API,最早出现在谷歌 ...
- cors跨域资源共享】同源策略和jsonp
在执行下面那段代码的时候,我遇到了一个跨域资源共享的问题 <!doctype html> <html> <head> <meta charset=" ...
- Django - - 进阶 - - 同源策略和跨域解决方案
目录 同源策略 一个源的定义 同源策略是什么 举个例子 jQuery中getJSON方法 JSONP应用 1, 同源策略 1.1 一个源的定义 如果两个页面的协议,端口(如果有指定)和域名都相同,则两 ...
- websocket中发生数据丢失_tcp协议;websocket协议;同源策略和跨域
tcp协议 为什么连接的时候是三次握手,关闭的时候却是四次握手? 答:因为当Server端收到Client端的SYN连接请求报文后,可以直接发送SYN+ACK报文.其中ACK报文是用来应答的,SYN报 ...
- 服务器安全：浏览器同源策略与跨域请求、XSS攻击原理及防御策略、如何防御CSRF攻击
主要包括 浏览器同源策略与跨域请求 XSS攻击原理及防御策略 如何使用SpringSecurity防御CSRF攻击 CC/DDOS攻击与流量攻击 什么是SSL TLS HTTPS? 一.浏览器的同源策 ...
- 同源策略和跨域解决方案
同源策略 一个源的定义 如果两个页面的协议,端口(如果有指定)和域名都相同,则两个页面具有相同的源. 举个例子: 下表给出了相对http://a.xyz.com/dir/page.html同源检测的示 ...
- 同源策略、跨域以及跨域的三种解决方案详解
浏览器并非限制了http发起的请求,跨域请求可以正常发起,但是返回结果会被浏览器拦截. CORS的核心就在于 让服务器来确定是否允许跨域访问. 1.服务器代理: 2.cors跨域资源共享: 3.JSO ...
- 同源策略和跨域请求解决方案
一.一个源的定义 如果两个页面的协议,端口(如果有指定)和域名都相同,则两个页面具有相同的源. 举个例子: 下表给出了相对http://a.xyz.com/dir/page.html同源检测的示例: ...
最新文章
- Chino的成绩（chino的公开赛T3）
- java.lang.Math
- 服务器文件夹同步到手机,本机文件夹同步到云服务器
- filterwriter_Java FilterWriter flush（）方法与示例
- React中的纯组件
- Python函数详解：函数定义、调用，lambda函数，高阶函数map,filter,reduce，函数式编程，模块化设计、代码复用、函数递归、enumerate()
- 物联网架构成长之路(23)-Docker练习之Elasticsearch服务搭建
- Flask实现REST API之接收POST和GET请求
- PhpSpreadsheet设置单元格常用操作汇总
- 项目管理系统与项目管理信息系统与配置管理系统与变更控制系统的区别
- Debian 10 安装fonts-noto-cjk
- 西电人总结各it公司待遇
- 黑客使用含病毒的邮件 半年内盗取近20亿卢布
- oracle修改查询结果,Oracle使用查询结果更新表的方法
- android自动切换输入法,一种动态切换Android系统输入法的弹出模式的方法
- Python生成中文词云图（二）：不可指定词云特定的形状和颜色。
- ICCV 2021 Oral | 金字塔视觉Transformer(PVT)：用于密集预测的多功能backbone
- 连接Janusgraph时报Unable to determine Elasticsearch server version. Default to FIVE.异常
- HEVC解码器的TDecCu部分
- 一维信号小波阈值去噪