前后端交互四、跨域与JSONP

news2024/11/7 3:43:21

零、文章目录

前后端交互四、跨域与JSONP

1、同源策略和跨域

(1)同源

  • 如果两个页面URL的协议,域名和端口都相同,则两个页面具有相同的源。

  • 例如,下表给出了相对于 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同源(协议、域名、端口相同)

(2)同源策略

  • 同源策略(英文全称 Same origin policy)是浏览器提供的一个安全功能。

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

  • 通俗的理解:浏览器规定,A 网站的 JavaScript,不允许和非同源的网站 C 之间,进行资源的交互,例如:

    • 无法读取非同源网页的 Cookie、LocalStorage 和 IndexedDB

    • 无法接触非同源网页的 DOM

    • 无法向非同源地址发送 Ajax 请求

(3)跨域

  • 同源指的是两个 URL 的协议、域名、端口一致,反之,则是跨域
  • 出现跨域的根本原因:浏览器的同源策略不允许非同源的 URL 之间进行资源的交互。
  • 浏览器对跨域请求的拦截:浏览器允许发起跨域请求,但是,跨域请求回来的数据,会被浏览器拦截,无法被页面获取到!

image-20230607165216618

  • 实现跨域数据请求:两种解决方案,分别是 JSONPCORS
    • JSONP:出现的早,兼容低版本IE。是前端程序员为了解决跨域问题,被迫想出来的一种临时解决方案。缺点是只支持 GET 请求,不支持 POST 请求。
    • CORS:出现的较晚,它是 W3C 标准,属于跨域 Ajax 请求的根本解决方案。支持 GET 和 POST 请求。缺点是不兼容某些低版本的浏览器

2、JSONP

(1)JSONP是什么

  • JSONP (JSON with Padding) 是 JSON 的一种“使用模式”,可用于解决主流浏览器的跨域数据访问的问题。

(2)JSONP的实现原理

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

(3)自己实现一个简单的JSONP

  • 定义一个 success 回调函数:
<script>
   function success(data) {
     console.log('获取到了data数据:')
     console.log(data)
   }
 </script>
  • 通过 <script> 标签,请求接口数据:
<script src="http://xxx.yyy.zzz/api/jsonp?callback=success&name=zs&age=20"></script>

(4)JSONP的缺点

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

  • 注意:JSONP 和 Ajax 之间没有任何关系,不能把 JSONP 请求数据的方式叫做 Ajax,因为 JSONP 没有用到 XMLHttpRequest 这个对象。

(5)jQuery中的JSONP

  • jQuery 提供的 $.ajax() 函数,除了可以发起真正的 Ajax 数据请求之外,还能够发起 JSONP 数据请求
  • 默认情况下,使用 jQuery 发起 JSONP 请求,会自动携带一个 callback=jQueryxxx 的参数,jQueryxxx 是随机生成的一个回调函数名称。
$.ajax({
    url: 'http://xxx.yyy.zzz/api/jsonp?name=zs&age=20',
    // 如果要使用 $.ajax() 发起 JSONP 请求,必须指定 datatype 为 jsonp
    dataType: 'jsonp',
    success: function(res) {
       console.log(res)
    }
 })

(6)自定义参数及回调函数名称

  • 在使用 jQuery 发起 JSONP 请求时,如果想要自定义 JSONP 的参数以及回调函数名称,可以通过如下两个参数来指定:
$.ajax({
    url: 'http://xxx.yyy.zzz/api/jsonp?name=zs&age=20',
    dataType: 'jsonp',
    // 发送到服务端的参数名称,默认值为 callback
    jsonp: 'callback',
    // 自定义的回调函数名称,默认值为 jQueryxxx 格式
    jsonpCallback: 'abc',
    success: function(res) {
       console.log(res)
    }
 })

(7)jQuery中JSONP的实现过程

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

3、案例-淘宝搜索

(1)要实现的UI效果

image-20230608091458653

(2)获取用户输入的搜索关键词

  • 为了获取到用户每次按下键盘输入的内容,需要监听输入框的 keyup 事件,示例代码如下:
// 监听文本框的 keyup 事件
 $('#ipt').on('keyup', function() {
   // 获取用户输入的内容
   var keywords = $(this).val().trim()
   // 判断用户输入的内容是否为空
   if (keywords.length <= 0) {
     return
   }
    // TODO:获取搜索建议列表
 })

(3)封装getSuggestList函数

  • 将获取搜索建议列表的代码,封装到 getSuggestList 函数中,示例代码如下:
function getSuggestList(kw) {
   $.ajax({
      // 指定请求的 URL 地址,其中,q 是用户输入的关键字
      url: 'https://suggest.taobao.com/sug?q=' + kw,
      // 指定要发起的是 JSONP 请求
      dataType: 'jsonp',
      // 成功的回调函数
      success: function(res) { console.log(res) }
   })
 }

(4)渲染建议列表的UI结构

  • 定义搜索建议列表
<div class="box">
    <!-- tab 栏区域 -->
    <div class="tabs"></div>
    <!-- 搜索区域 -->
    <div class="search-box"></div>
    <!-- 搜索建议列表 -->
    <div id="suggest-list"></div>
</div>
  • 定义模板结构
<!-- 模板结构 -->
 <script type="text/html" id="tpl-suggestList">
    {{each result}}
       <div class="suggest-item">{{$value[0]}}</div>
    {{/each}}
 </script>
  • 定义渲染模板结构的函数
// 渲染建议列表
 function renderSuggestList(res) {
    // 如果没有需要渲染的数据,则直接 return
    if (res.result.length <= 0) {
       return $('#suggest-list').empty().hide()
    }
    // 渲染模板结构
    var htmlStr = template('tpl-suggestList', res)
    $('#suggest-list').html(htmlStr).show()
 }
  • 搜索关键词为空时隐藏搜索建议列表
$('#ipt').on('keyup', function() {
    // 获取用户输入的内容
    var keywords = $(this).val().trim()
    // 判断用户输入的内容是否为空
    if (keywords.length <= 0) {
       // 如果关键词为空,则清空后隐藏搜索建议列表
       return $('#suggest-list').empty().hide()
    }
    getSuggestList(keywords)
})

(5)输入框的防抖

  • 防抖策略(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)
 })

(6)缓存搜索的建议列表

  • 定义全局缓存对象
// 缓存对象
  var cacheObj = {}
  • 将搜索结果保存到缓存对象中
// 渲染建议列表
 function renderSuggestList(res) {
    // ...省略其他代码
    // 将搜索的结果,添加到缓存对象中
    var k = $('#ipt').val().trim()
    cacheObj[k] = res
 }
  • 优先从缓存中获取搜索建议
// 监听文本框的 keyup 事件
 $('#ipt').on('keyup', function() {
    // ...省略其他代码

    // 优先从缓存中获取搜索建议
    if (cacheObj[keywords]) {
       return renderSuggestList(cacheObj[keywords])
    }
    // 获取搜索建议列表
    debounceSearch(keywords)
  })

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/624936.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

【iOS_Swift_Alamofire实现网络请求】

文章目录 前言导入库原生网络请求单例封装一个原生网络请求Alamofire用法Alamofire的返回响应将返回的data转为字典/字符串 总结 前言 学习swift继续延续之前的思路&#xff0c;对照着OC学&#xff0c;从UI起手&#xff0c;学习到对应的自适应布局。 今天再次学习了swift的原生…

MySQL分库分表全攻略:从小白到大神的进阶指南!

大家好&#xff0c;我是小米&#xff0c;一个热爱技术的程序员。今天&#xff0c;我来和大家聊一下关于MySQL中的分库分表技术&#xff0c;相信对于开发者和DBA来说是一个非常重要的话题。 什么是分库分表 首先&#xff0c;我们先来了解一下什么是分库分表。分库分表是指将原本…

Apifox(1)比postman更优秀的接口自动化测试平台

Apifox介绍 Apifox 是 API 文档、API 调试、API Mock、API 自动化测试一体化协作平台&#xff0c;定位 Postman Swagger Mock JMeter。通过一套系统、一份数据&#xff0c;解决多个系统之间的数据同步问题。只要定义好 API 文档&#xff0c;API 调试、API 数据 Mock、API 自…

scratch躲避陨石 中国电子学会图形化编程 少儿编程 scratch编程等级考试三级真题和答案解析2023年5月

目录 scratch躲避陨石 一、题目要求 1、准备工作 2、功能实现 二、案例分析

性能测试计划,怎么写显得你能更专业?

性能测试计划 性能测试是一种非常重要的测试类型&#xff0c;用于确定系统或应用程序在特定负载下的性能指标。以下是一个性能测试计划的建议步骤&#xff1a; 目标 首先&#xff0c;定义性能测试的目标和范围。这包括测试的系统或应用程序以及所需测试的性能指标&#xff0…

基于蒙特卡洛模拟法的电动汽车充电负荷研究(Matlab代码实现)

&#x1f4a5;&#x1f4a5;&#x1f49e;&#x1f49e;欢迎来到本博客❤️❤️&#x1f4a5;&#x1f4a5; &#x1f3c6;博主优势&#xff1a;&#x1f31e;&#x1f31e;&#x1f31e;博客内容尽量做到思维缜密&#xff0c;逻辑清晰&#xff0c;为了方便读者。 ⛳️座右铭&a…

开源项目的流程

开源的好处 增加知名度和使用量&#xff1a;开源项目可以让更多人知道和使用&#xff0c;进而增加项目的知名度和使用量。提高代码质量&#xff1a;开源项目需要接受有可能来自全球的开发者审核和参与&#xff0c;这样可以使得项目代码得到更多高质量的反复审查和改进。快速修…

计算机视觉 | 目标检测与MMDetection

目 录 目标检测的基本范式 滑窗使用卷积实现密集预测锚框多尺度检测与FPN 单阶段&无锚框检测器选讲 RPNYOLO、SSDFocal loss 与 RetinaNetFCOSYOLO系列选讲 一、目标检测的基本范式 1、什么是目标检测 给定一张图片 ——》用矩形框框出所感兴趣的物体同时预测物体类…

前后端交互一、服务器概念与初识Ajax

零、文章目录 前后端交互一、服务器概念与初识Ajax 1、上网的过程 网络相关知识请参考网络详解HTTP相关知识请参考HTTP详解 &#xff08;1&#xff09;客户端与服务器 **上网的目的&#xff1a;**通过互联网获取和消费资源 **服务器&#xff1a;**上网过程中&#xff0c;负…

基于STM32的智能粮仓系统设计

一、项目背景 随着粮食质量要求的提高和储存方式的改变&#xff0c;对于粮仓环境的监测和控制也愈发重要。在过去的传统管理中&#xff0c;通风、防潮等操作需要定期人工进行&#xff0c;精度和效率都较低。而利用嵌入式技术和智能控制算法进行监测和控制&#xff0c;不仅能够…

【Git】git push origin master时发生的各类错误汇总

文章目录 一、常见的git命令二、错误一三、错误二四、错误三五、问题解决 一、常见的git命令 使用 git 命令时&#xff0c;您可以执行一系列操作来管理代码仓库。下面是一些常用的 git 命令及其功能&#xff1a; git init: 在当前目录初始化一个新的 git 仓库。git clone <…

2023年5月青少年机器人技术等级考试理论综合试卷(二级)

青少年机器人技术等级考试理论综合试卷&#xff08;二级&#xff09;2023.6 分数&#xff1a; 100 题数&#xff1a; 45 一、 单选题(共 30 题&#xff0c; 共 60 分) 1.下图中的凸轮机构使用了摆动型从动件的是&#xff1f; &#xff08; &#xff09; A.a B.b C.c D.d 试题类…

我是怎么劝退打算入行软件测试的同学的?

过去千篇一律的机构、文章都在劝大家入行软件测试——门槛低、工资高、加班少&#xff01;而这两年&#xff0c;受国内外形势、经济影响&#xff0c;整个IT行业都在走下坡路&#xff0c;被专家们称作行业回归理性发展。最近机构劝入行测试的帖子少了&#xff0c;而“我是在xxx如…

【Python 继承和多态】零基础也能轻松掌握的学习路线与参考资料

Python 继承和多态是面向对象编程中非常关键的概念。继承是一种创建新类的方法&#xff0c;通过继承一个已有的类来创建新类。而多态则是指不同的对象以不同的方式对同一消息作出响应的能力。在这篇文章中&#xff0c;我们将为您介绍 Python 继承和多态的学习路线&#xff0c;并…

d2l学习_第三章线性回归/欠拟合过拟合/权重衰减

x.1 Linear Regression Theory x.1.1 Model 线性回归的模型如下&#xff1a; 我们给定d个特征值 x 1 , x 2 , . . . , x d x_1, x_2, ..., x_d x1​,x2​,...,xd​&#xff0c;最终产生输出yhat&#xff0c;我们产生的yhat要尽量拟合原来的值y&#xff0c;在这一拟合过程中我…

【MySQL】数据库的增删改查、备份、还原等基本操作

【MySQL】数据库的基本操作 一、创建数据库---create1.1 字符集与校验规则1.1.1 查看系统默认字符集以及校验规则1.1.2 默认方式建立数据库1.1.3 指定编码集建立数据库 1.2 建库的本质 二、查看数据库及其相关属性---show2.1 显示所有数据库2.2 显示数据库的创建语句3.2 显示目…

Yarn【多队列实例、任务优先级设置】

前言 我们知道&#xff0c;Hadoop常见的三种调度器&#xff1a;FIFO调度器&#xff08;几乎不用&#xff0c;因为它是先来先服务&#xff09;、容量调度器&#xff08;Apache Hadoop 默认的调度器&#xff09;、公平调度器&#xff08;CDH默认调度器&#xff09;。 其中&…

PyTorch实战7:咖啡豆识别--手动搭建VGG16

&#x1f368; 本文为&#x1f517;365天深度学习训练营 中的学习记录博客&#x1f366; 参考文章&#xff1a;365天深度学习训练营-第P7周&#xff1a;咖啡豆识别&#x1f356; 原作者&#xff1a;K同学啊|接辅导、项目定制 目录 一、 前期准备1. 设置GPU2. 导入数据3. 划分数…

Zookeeper节点操作

ZooKeeper的节点操作 ZooKeeper的节点类型 ZooKeeper其实也是一个分布式集群&#xff0c;其中维护了一个目录树结构&#xff0c;在这个目录树中&#xff0c;组成的部分是一个个的节点。ZooKeeper的节点可以大致分为两种类型: 短暂类型 和 持久类型 短暂类型ephemeral: 客户端…

Creating Add-in Hooks (C#)

本文介绍如何使一个文件在添加、检入、检出到库时&#xff0c;让add-in 程序在SOLIDWORKS PDM Professional 中通知到你。 注意&#xff1a; 因为 SOLIDWORKS PDM Professional 无法强制重新加载Add-in程序 &#xff0c;必须重新启动所有客户端计算机&#xff0c;以确保使用最…