当前位置: 首页 > news >正文

Ajax学习笔记第5天

无论做什么,都请记得那是为自己而做,那就毫无怨言!

1. 跨域
1.什么是跨域

跨域是指浏览器不能执行其他网站的脚本。它是浏览器同源策略造成的,是浏览器对JS实施的安全限制。


2.常见的跨域场景

036.png


3.什么事同源策略

(所谓同源是指:“域名”、“协议”、“端口”均为相同)

注意:跨域限制是浏览器的机制,如果直接在服务端请求,是不会触发跨域限制的。


2. JSONP
  • Jsonp(JSON with Padding) 是 json 的一种"使用模式",可以让网页从别的域名(网站)那获取资料,即跨域读取数据。
  • 为什么我们从不同的域(网站)访问数据需要一个特殊的技术( JSONP )呢?这是因为同源策略。同源策略,它是由 Netscape 提出的一个著名的安全策略,现在所有支持 JavaScript 的浏览器都会使用这个策略。
  • 如客户想访问 : https://www.runoob.com/try/ajax/jsonp.php?jsoncallback=callbackFunction
  • 假设客户期望返回数据:[“customername1”,“customername2”]。
  • 真正返回到客户端的数据显示为: callbackFunction([“customername1”,“customername2”])----JSONP 格式数据
  • demo.html
<script src="demo.js"></script>
<script>
sayHello();
</script>
  • demo.js
function sayHello(){alert("我是ikunGG,练习时长两年半");
}

032.gif

调用和设置方法换了一个位置

  • demo.html
<script>
function sayHello (str)
{alert(str);
}
</script>
<script src="demo.js"></script>
  • demo.js
sayHello('我是ikunGG,练习时长两年半');

032.gif

JSONP:JSONP其实就是模仿这个方法将调用传入的数据,前端设置方法接收
  • test.html
<script>
function sayHello(str) {console.log(str);
}
</script>
<script src="test.js"></script>
  • test.js:此时我们的test.js如果传入的是参数
sayHello({"info": [{"id":10001,"name": "小明","age": 18,"sex": "男"},{"id":10002,"name": "小兰","age": 15,"sex": "男"},{"id":10003,"name": "小红","age": 14,"sex": "男"}]
})

033.png

我们会知道如果使用JSONP跨域,一定和后端是约定俗称的数据格式,JSONP数据很不安全,除非你比较信任数据来源,如果涉及到涉密信息,一定不能使用JOSNP,比如数据中有用户的手机号,身份证号码等等;

比如京东某个手机的 评论的数据就是JSONP格式

034.png

fetchJSON_comment98({"productAttr":null,"productCommentSummary"……,"firstCategory":9987,"secondCategory":653,"thirdCategory":655,"aesPin":null,"days":4,"afterDays":0}]});

fetchJSON_comment98({数据})

  • 【1】使用原生js是可以模拟发送JSONP请求的
<input type="button" value="点击发送请求" id="btn">
<script>
var btn = document.getElementById("btn");
function fetchJSON_comment98(JSONData) {console.log(JSONData)
}
btn.onclick = function() {// 创建一个script标签var oScript = document.createElement("script");// 追加节点document.body.appendChild(oScript);// 设置src属性oScript.src= 'https://club.jd.com/comment/productPageComments.action?callback=fetchJSON_comment98&productId=100009345181&score=0&sortType=5&page=1&pageSize=10&isShadowSku=0&rid=0&fold=1'// 发送请求后立即删除这个scriptdocument.body.removeChild(oScript)
}
</script>
  • 然后本地需要设置一个固定的方法名称:fetchJSON_comment98()
function fetchJSON_comment98(JSONData) {console.log(JSONData)
}
  • 我们就可以拿到京东某个商品的评论的数据:【在本地的浏览器拿到服务器A存放京东商品评论的数据】

035.gif

  • 【2】jQuery的JSONP
<input type="button" value="点击发送请求" id="btn">
<script src="js/jquery.min.js"></script>
<script >
$("#btn").click(function(){$.ajax("https://club.jd.com/comment/productPageComments.action?callback=fetchJSON_comment98&productId=100009345181&score=0&sortType=5&page=1&pageSize=10&isShadowSku=0&rid=0&fold=1",{"dataType": "jsonp", //请求类型"jsonpCallback": 'fetchJSON_comment98', //设置回调函数名称"success": function(JSONdata) {console.log(JSONdata)}})
})
</script>
  • jQuery帮我们封装好了JSONP请求: jQuery封装的JSONP请求机理和我们自己写的请求机理是相同的。

    • 创建一个script标签,src是含有JSONP格式的跨域请求地址

    • 定义了一个函数,函数名是JOSNP格式返回数据的固定名称,方法封装到了success中

    • 删除script标签

  • 我们就可以拿到京东某个商品的评论的数据:【在本地的浏览器拿到服务器A存放京东商品评论的数据】

035.gif

相关文章:

Ajax学习笔记第5天

无论做什么&#xff0c;都请记得那是为自己而做&#xff0c;那就毫无怨言&#xff01; 【1. 跨域】 1.什么是跨域 跨域是指浏览器不能执行其他网站的脚本。它是浏览器同源策略造成的&#xff0c;是浏览器对JS实施的安全限制。 2.常见的跨域场景 3.什么事同源策略 &#xff…...

20.1 OpenSSL 字符BASE64压缩算法

OpenSSL 是一种开源的加密库&#xff0c;提供了一组用于加密和解密数据、验证数字证书以及实现各种安全协议的函数和工具。它可以用于创建和管理公钥和私钥、数字证书和其他安全凭据&#xff0c;还支持SSL/TLS、SSH、S/MIME、PKCS等常见的加密协议和标准。 OpenSSL 的功能非常…...

Panda3d 教程

Panda3d 教程 偶然之余看到了 Panda3d 这个3D引擎&#xff0c;觉得代码开源然后又比较轻量级&#xff0c;感觉还是比较好上手的&#xff0c;因此就想去学习一下&#xff0c;然后把学习过程记录下来。 网上也都找了不少关于Panda3d 方面的教程&#xff0c;但是感觉都不是很好&a…...

除自身以外数组的乘积

给你一个整数数组 nums&#xff0c;返回 数组 answer &#xff0c;其中 answer[i] 等于 nums 中除 nums[i] 之外其余各元素的乘积 。 题目数据 保证 数组 nums之中任意元素的全部前缀元素和后缀的乘积都在 32 位 整数范围内。 请 不要使用除法&#xff0c;且在 O(n) 时间复杂…...

干洗店小程序上门洗鞋店管理软件功能介绍;

干洗店小程序上门洗鞋店管理软件功能介绍&#xff1b; 营销工具-洗鞋店管理软件多渠道玩法&#xff0c;拓客留客 支付-会员管理系统多种支付方式&#xff0c;灵活经营 ​ ​提供洗鞋店管理软件服务&#xff0c;实现会员精细化运营 会员档案-洗鞋店管理软件记录会员的全方位信…...

【C语言初学者周冲刺计划】1.1用筛选法求100之内的素数

目录 1解题思路&#xff1a; 2代码如下&#xff1a; 3运行代码如图所示&#xff1a; 4总结&#xff1a; (前言周冲刺计划:周一一个习题实操&#xff0c;依次类推加一&#xff0c;望各位读者可以独自实践敲代码) 1解题思路&#xff1a; 首先了解筛选法定义&#xff1a;先把…...

1.Vue—简介、实例与容器、MVVM模型

文章目录 一、Vue简介1.1 特点1.2 搭建Vue开发环境1.2.1 开发版1.2.2 生产版 1.3 下载Vue开发工具1.3.1 GitHub方式1.3.2 国内方式 1.4 消除环境提示 二、 入门程序2.1 HelloWord2.2 分析Hello案例2.3.1 多容器对一实例2.3.2 多实例对应一容器2.3.3 总结 三、MVVM模型 一、Vue简…...

【Java笔试强训】Day7(WY22 Fibonacci数列、CM46 合法括号序列判断)

Fibonacci数列 链接&#xff1a;Fibonacci数列 题目&#xff1a; Fibonacci数列是这样定义的&#xff1a; F[0] 0 F[1] 1 for each i ≥ 2: F[i] F[i-1] F[i-2] 因此&#xff0c;Fibonacci数列就形如&#xff1a;0, 1, 1, 2, 3, 5, 8, 13, …&#xff0c;在Fibonacci数列…...

Linux进程的概念

一&#xff1a;冯诺依曼体系结构 什么叫做体系结构&#xff1f;&#xff1f;&#xff1f; 计算机组成 / 芯片架构 输入单元&#xff1a;键盘、话筒、摄像头、usb、鼠标、磁盘&#xff08;ROM&#xff09;/ssd、网卡、显卡 存储器&#xff1a;内存&#xff08;RAM&#xff09…...

XML教学视频(黑马程序员精讲 XML 知识!)笔记

第一章XML概述 1.1认识XML XML数据格式&#xff1a; 不是html但又和html有点相似 XML数据格式最主要的功能就是数据传输&#xff08;一个服务器到另一个服务器&#xff0c;一个网站到另一个网站&#xff09;配置文件、储存数据当做小型数据可使用、规范数据格式让数据具有结…...

自定义组件实现v-model

要使自定义的Vue组件支持v-model&#xff0c;需要实现一个名为value的prop和一个名为input的事件。在组件内部&#xff0c;将value prop 绑定到组件的内部状态&#xff0c;然后在对内部状态进行修改时触发input事件。 自定义UI组件 <template><input :value"va…...

【自动驾驶】Free space与Ray casting

文章目录 1 Free space是什么2 Ray casting是什么3 它俩啥关系4 TODO 1 Free space是什么 在自动驾驶领域&#xff0c;free space即可行驶区域&#xff0c;在结构化道路的十字路口/非结构化道路都有很大作用。 2 Ray casting是什么 ray casting是计算机视觉领域&#xff0c;…...

RHCE---正则表达式

文章目录 目录 文章目录 前言 一. 文本搜索工具 二.正则表达式 元字符 ^行首与$行尾 点(.) 与星号(*) 扩展正则 总结 前言 正则表达式是文本三剑客中及其重要的一环&#xff0c;称之为灵魂也不为过&#xff0c;到底什么是正则表达式呢&#xff0c;让我们一起来了解以下…...

3D RPG Course | Core 学习日记一:初识URP

前言 最近开始学习Unity中文课堂M_Studio&#xff08;麦大&#xff09;的3D RPG Course&#xff0c;学习一下3D RPG游戏核心功能的实现&#xff0c;第一课我们学习到的是地图场景的编辑&#xff0c;其中涉及到了URP渲染。 我们首先进入Unity资源商店把地图素材和人物素材导入好…...

Spring Cloud 之RabbitMQ的学习【详细】

服务通信 分布式系统通信两种方式&#xff1a; 直接远程调用&#xff08;同步&#xff09;借助第三方间接通信&#xff08;异步&#xff09; 同步通讯的问题 Feign就属于同步通讯。存在的如下问题 耦合度高&#xff0c;每次添加新的模块就要修改原有模块的代码性能下降&am…...

第五章 I/O管理 六、I/O核心子系统

目录 一、核心子系统 1、I/O调度 2、设备保护 二、假脱机技术 1、脱机&#xff1a; 2、假脱机&#xff08;SPOOLing技术&#xff09;&#xff1a; 3、应用&#xff1a; 1.独占式设备&#xff1a; 2.共享设备&#xff1a; 4、共享打印机原理分析 三、总结 一、核心子系…...

winfrom窗体比例缩放

用于控件大小随窗体大小等比例缩放的C#代码。该代码可以在窗体重载中使用&#xff0c;以确保窗体中的控件在窗体大小改变时能够按比例缩放。 SetTag方法&#xff1a;该方法用于设置控件的Tag属性&#xff0c;以存储控件的宽度、高度、左边距、顶边距和字体大小等信息。SetCont…...

宇信科技:强势行业加速融入AIGC,同时做深做细

【科技明说 &#xff5c; 重磅专题】 大家可能没有想到&#xff0c;一向对外低调行事的宇信科技&#xff0c;在AIGC方面2023年就已经训练出了适配金融场景的垂直模型&#xff0c;并应用到了各产品线上&#xff0c;同时结合通用大模型预研了宇信金融系统编程大模型。宇信金融系…...

Google Play上的Android广告软件应用程序积累了200万次安装

大家好&#xff0c;今天我们要聊一聊Google Play上的一个热门话题——Android广告软件应用程序。最近&#xff0c;一些恶意应用程序在Google Play上累积了200万次的安装量&#xff0c;给用户推送了讨厌的广告&#xff0c;同时又隐藏了它们在受感染设备上的存在。 根据Doctor W…...

算法通关村第四关-黄金挑战栈的经典问题

括号匹配问题 描述 : 给定一个只包括 (&#xff0c;)&#xff0c;{&#xff0c;}&#xff0c;[&#xff0c;] 的字符串 s &#xff0c;判断字符串是否有效。 有效字符串需满足&#xff1a; 左括号必须用相同类型的右括号闭合。左括号必须以正确的顺序闭合。每个右括号都有…...

UDP(Echoserver)

网络命令 Ping 命令 检测网络是否连通 使用方法: ping -c 次数 网址ping -c 3 www.baidu.comnetstat 命令 netstat 是一个用来查看网络状态的重要工具. 语法&#xff1a;netstat [选项] 功能&#xff1a;查看网络状态 常用选项&#xff1a; n 拒绝显示别名&#…...

关于iview组件中使用 table , 绑定序号分页后序号从1开始的解决方案

问题描述&#xff1a;iview使用table 中type: "index",分页之后 &#xff0c;索引还是从1开始&#xff0c;试过绑定后台返回数据的id, 这种方法可行&#xff0c;就是后台返回数据的每个页面id都不完全是按照从1开始的升序&#xff0c;因此百度了下&#xff0c;找到了…...

【项目实战】通过多模态+LangGraph实现PPT生成助手

PPT自动生成系统 基于LangGraph的PPT自动生成系统&#xff0c;可以将Markdown文档自动转换为PPT演示文稿。 功能特点 Markdown解析&#xff1a;自动解析Markdown文档结构PPT模板分析&#xff1a;分析PPT模板的布局和风格智能布局决策&#xff1a;匹配内容与合适的PPT布局自动…...

视频字幕质量评估的大规模细粒度基准

大家读完觉得有帮助记得关注和点赞&#xff01;&#xff01;&#xff01; 摘要 视频字幕在文本到视频生成任务中起着至关重要的作用&#xff0c;因为它们的质量直接影响所生成视频的语义连贯性和视觉保真度。尽管大型视觉-语言模型&#xff08;VLMs&#xff09;在字幕生成方面…...

C# 类和继承(抽象类)

抽象类 抽象类是指设计为被继承的类。抽象类只能被用作其他类的基类。 不能创建抽象类的实例。抽象类使用abstract修饰符声明。 抽象类可以包含抽象成员或普通的非抽象成员。抽象类的成员可以是抽象成员和普通带 实现的成员的任意组合。抽象类自己可以派生自另一个抽象类。例…...

【HTML-16】深入理解HTML中的块元素与行内元素

HTML元素根据其显示特性可以分为两大类&#xff1a;块元素(Block-level Elements)和行内元素(Inline Elements)。理解这两者的区别对于构建良好的网页布局至关重要。本文将全面解析这两种元素的特性、区别以及实际应用场景。 1. 块元素(Block-level Elements) 1.1 基本特性 …...

k8s业务程序联调工具-KtConnect

概述 原理 工具作用是建立了一个从本地到集群的单向VPN&#xff0c;根据VPN原理&#xff0c;打通两个内网必然需要借助一个公共中继节点&#xff0c;ktconnect工具巧妙的利用k8s原生的portforward能力&#xff0c;简化了建立连接的过程&#xff0c;apiserver间接起到了中继节…...

【JavaWeb】Docker项目部署

引言 之前学习了Linux操作系统的常见命令&#xff0c;在Linux上安装软件&#xff0c;以及如何在Linux上部署一个单体项目&#xff0c;大多数同学都会有相同的感受&#xff0c;那就是麻烦。 核心体现在三点&#xff1a; 命令太多了&#xff0c;记不住 软件安装包名字复杂&…...

什么是Ansible Jinja2

理解 Ansible Jinja2 模板 Ansible 是一款功能强大的开源自动化工具&#xff0c;可让您无缝地管理和配置系统。Ansible 的一大亮点是它使用 Jinja2 模板&#xff0c;允许您根据变量数据动态生成文件、配置设置和脚本。本文将向您介绍 Ansible 中的 Jinja2 模板&#xff0c;并通…...

DeepSeek 技术赋能无人农场协同作业:用 AI 重构农田管理 “神经网”

目录 一、引言二、DeepSeek 技术大揭秘2.1 核心架构解析2.2 关键技术剖析 三、智能农业无人农场协同作业现状3.1 发展现状概述3.2 协同作业模式介绍 四、DeepSeek 的 “农场奇妙游”4.1 数据处理与分析4.2 作物生长监测与预测4.3 病虫害防治4.4 农机协同作业调度 五、实际案例大…...