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

JavaScript异步编程——04-同源和跨域

news 2025/7/6 13:36:44

同源和跨域

同源

同源策略是浏览器的一种安全策略，所谓同源是指，域名，协议，端口完全相同。

跨域问题的解决方案

从我自己的网站访问别人网站的内容，就叫跨域。

出于安全性考虑，浏览器不允许ajax跨域获取数据。

  • iframe：处于安全性考虑，浏览器的开发厂商已经禁止了这种方式。

  • JSONP：script 标签的 src 属性传递数据。

JSONP

JSONP(JSON with Padding)：带补丁的 json，本质是利用了 <script src=""></script>标签具有可跨域的特性，由服务端返回一个预先定义好的JS函数的调用，并且将服务器数据以该函数参数的形式传递过来。此方法需要前后端配合完成。

我们知道， html标签的 src 属性是支持跨域的：

     <img src="http://img.smyhvae.com/2016040101.jpg" alt="">

jsonp 就是利用这个特性实现的跨域，但用的是 script 标签。如下：

 <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title></head><body>​<!-- jsonp 就是 利用 src，实现的跨域 用的是 script标签 --><script type="text/javascript"  src='http://192.168.141.137/2018-02-28/myData.php'></script></body></html>​

上方那一行的代码，意思是：刷新A服务器上的index页面后，会去请求 B 服务器上的 myData.php 这个页面。而且请求的方式是 get 请求。

但是 B 服务器上的页面不是你想请求就可以请求的，大家一起配合才可以。

具体实现步骤：

需要首先声明的是，jsonp 只能通过 GET 方式进行请求。

（1）A客户端的代码：

 <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title></head><body>​</body></html><script type="text/javascript">​// 定义 eatFood()方法function fn(data) {console.log('我被调用了哦');console.log(data);}</script>​<!-- 使用 script标签 发送了 get请求 去到了一个 php页面 --><script type="text/javascript" src='http://192.168.141.137/01.php?callback1=fn'></script>

我们来分析上方代码中的最后一行的那个url：A 客户端请求的是 B服务器上的 01.php页面。url里有个callback1=fn，意思是：callback1是A和B 之间的约定，约定后，将执行方法 fn。

其实，fn方法已经在最后一行代码中执行了。只不过，fn方法里的data数据，是从 B 服务器中获取的。

（2）B服务器端的代码：

 <?php$mycallBack = $_GET['callback1'];​$arr = array("zhangsan","lisi","zhaoliu");​echo $mycallBack."(".json_encode($arr).")";    //字符串拼接?>

代码解释：

第一行的callback1 是A和B之间的约定，二者必须一致。

echo语句中输出的内容，即要返回给A客户端的内容，此内容会保存在 A 客户端的fn方法的data里。 data[0]指的是 zhangsan。

json_encode指的是，将php对象转化为 json。

刷新A页面，输出结果为：

     mycallBack(["zhangsan","lisi","zhaoliu"])

jQuery 中的 JSONP

我们知道，jQuery 中发送 Ajax 请求，格式是：

         $("#btn").click(function(){$.ajax({url:"./data.php?callback1=fn",dataType:"jsonp",type:"get",//jsonp:"callback1",   //传递给B服务器的回调函数的名字（默认为 callback）//jsonCallBack:"fn"    //自定义的函数名称。默认为 jQuery 自动生成的随机函数名success:function(data){alert(data);//$("#showInfo").html(data);},error:function(e){console.log(e);}});});

那如果数据是 JSONP，上方代码则改为：

         $("#btn").click(function(){$.ajax({url:"./data.php?fn",dataType:"text",type:"get",success:function(data){alert(data);//$("#showInfo").html(data);},error:function(e){console.log(e);}});});

参考链接

参考链接：https://www.cnblogs.com/2050/p/3191744.html

希望各位可以点个赞点个关注，这对up真的很重要，谢谢大家啦！

相关文章：

JavaScript异步编程——04-同源和跨域

同源和跨域 同源 同源策略是浏览器的一种安全策略&#xff0c;所谓同源是指&#xff0c;域名&#xff0c;协议&#xff0c;端口完全相同。 跨域问题的解决方案 从我自己的网站访问别人网站的内容&#xff0c;就叫跨域。 出于安全性考虑&#xff0c;浏览器不允许ajax跨域获取…...

编程日记 2024/5/9 12:12:54

出差——蓝桥杯十三届2022国赛大学B组真题

问题分析 该题属于枚举类型&#xff0c;遍历所有情况选出符合条件的即可。因为只需要派两个人&#xff0c;因此采用两层循环遍历每一种情况。 AC_Code #include <bits/stdc.h> using namespace std; string str;//选择的两人 bool ok(){if(str.find("A")!-1…...

编程日记 2024/5/9 12:11:53

UE5（射线检测）学习笔记

这一篇会讲解射线检测点击事件、离开悬停、进入悬停事件的检测&#xff0c;以及关闭射线检测的事件&#xff0c;和射线检测蓝图的基础讲解。 创建一个简单的第三人称模板 创建一个射线检测的文件夹RadiationInspection&#xff0c;并且右键蓝图-场景组件-命名为BPC_Radiation…...

编程日记 2024/5/9 12:10:51

语音识别的基本概念

语音识别的基本概念​​​​​​​ ​​​​​​​ 言语是一种复杂的现象。人们很少了解它是如何产生和感知的。天真的想法常常是语音是由单词构成的&#xff0c;而每个单词又由音素组成。不幸的是&#xff0c;现实却大不相同。语音是一个动态过程&#xff0c;没有明确区分的…...

编程日记 2024/5/9 12:09:50

OpenCV Radon变换探测直线（拉东变换）

文章目录 一、简介二、实现代码三、实现效果参考资料一、简介 Radon变换可以将原始图像中直线特征的处理问题转化为变换域图像中对应点特征的处理问题，其中对应特征点的横坐标表示原始图像的旋转角度，一般来讲原始图像中的噪声不会分布在直线的特征上。因此，Radon变换在探测…...

编程日记 2024/5/9 12:06:46

六、Redis五种常用数据结构-zset

zset是Redis的有序集合数据类型&#xff0c;但是其和set一样是不能重复的。但是相比于set其又是有序的。set的每个数据都有一个double类型的分数&#xff0c;zset正是根据这个分数来进行数据间的排序从小到大。有序集合中的元素是唯一的&#xff0c;但是分数(score)是可以重复的…...

编程日记 2024/5/9 12:00:40

FPGA第一篇，FPGA现场可编程门阵列，从0开始掌握可编程硬件开发（FPGA入门指南）

简介&#xff1a;FPGA全称Field-Programmable Gate Array&#xff0c;是一种可编程逻辑器件&#xff0c;它通过可编程的逻辑单元和可编程的连接网络实现了灵活的硬件实现。与固定功能的集成电路&#xff08;ASIC&#xff09;相比&#xff0c;FPGA具有更高的灵活性和可重新配置性…...

编程日记 2024/5/9 11:58:36

C#实现简单音乐文件解析播放——Windows程序设计作业2

1. 作业内容 编写一个C#程序&#xff0c;要求实现常见音乐文件的播放功能&#xff0c;具体要求如下&#xff1a;     1). 播放MP3文件&#xff1a; 程序应能够读取MP3文件&#xff0c;并播放其中的音频。     2). 播放OGG文件&#xff1a; 应能够播放ogg文件。     …...

编程日记 2024/5/9 11:56:34

Python数据爬取超简单入门

## 什么是网络爬虫&#xff1f; 网络爬虫是一种自动浏览器程序&#xff0c;能够自动地从互联网获取数据。爬虫的主要任务是访问网页&#xff0c;分析网页内容&#xff0c;然后提取所需的信息。爬虫广泛应用于数据收集、数据分析、网页内容监控等领域。 ## 爬虫的基本步骤 1.…...

编程日记 2024/5/9 11:50:28

Dreamweaver 2021 for Mac 激活版：网页设计工具

在追求卓越的网页设计道路上&#xff0c;Dreamweaver 2021 for Mac无疑是您的梦幻之选。这款专为Mac用户打造的网页设计工具&#xff0c;集强大的功能与出色的用户体验于一身。 Dreamweaver 2021支持多种网页标准和技术&#xff0c;让您能够轻松创建符合现代网页设计的作品。其…...

编程日记 2024/5/9 11:47:23

【Git】Git学习-15：分支简介和基本操作

学习视频链接&#xff1a;【GeekHour】一小时Git教程_哔哩哔哩_bilibili​编辑https://www.bilibili.com/video/BV1HM411377j/?vd_source95dda35ac10d1ae6785cc7006f365780https://www.bilibili.com/video/BV1HM411377j/?vd_source95dda35ac10d1ae6785cc7006f365780 git bran…...

编程日记 2024/5/9 11:45:21

浏览器提示网站“不安全”原因及解决方法

是否经常会遇到访问的网站被浏览器提示访问不安全&#xff1f;那么&#xff0c;浏览器提示网站不安全通常有哪些原因又该如何处理这种不安全提醒&#xff0c;以下总结了几个原因及相应的处理办法&#xff1a; 一、网站管理者原因排查及处理办法&#xff1a; 1、网站没有部署S…...

编程日记 2024/5/9 11:42:16

Jmeter详细学习思路和教程

目录 1、JMeter环境准备 1.1、介绍 1.2、与LoadRunner比较 1.3、前提条件 1.4、安装配置 2、JMeter脚本 2.1、测试计划 2.2、线程组 2.3、Sampler 2.4、HTTP请求 2.5、查看结果树 2.6、HTTP Cookie管理器 2.7、HTTP信息头管理器 2.8、响应断言 2.9、参数化 3、JM…...

编程日记 2024/5/9 11:41:14

钉钉开放平台创建企业内部H5微应用或者小程序

前言&#xff1a; 在当今企业数字化转型的浪潮中&#xff0c;创建企业内部H5微应用或小程序已成为提升工作效率和促进内部沟通的重要举措。发话不多说本文将介绍如何利用钉钉平台快速创建这些应用&#xff0c;让企业内部的工作更加便捷高效。 步骤 1.在浏览器打开链接…...

编程日记 2024/5/9 11:38:11

Linux中每当执行‘mount’命令(或其他命令)时，自动激活执行脚本：输入密码，才可以执行mount

要实现这个功能&#xff0c;可以通过创建一个自定义的mount命令的包装器&#xff08;wrapper&#xff09;来完成。这个包装器脚本会首先提示用户输入密码&#xff0c;如果密码正确&#xff0c;则执行实际的mount命令。以下是创建这样一个包装器的步骤&#xff1a; 创建一个名为…...

编程日记 2024/5/9 11:37:09

【网络协议】----IPv6协议报文、地址分类

【网络协议】----IPv6协议简介 【网络协议】----IPv6协议简介IPv6特点IPv4 和 IPv6报文结构IPv6报文格式-拓展报头 IPv6地址分类IPv6地址表示IPv6单播地址可聚合全球单播地址链路本地地址唯一本地地址特殊地址补充 接口标识&#xff08;主机位&#xff09;生成方法通过EUI-64规…...

编程日记 2024/5/9 11:36:07

Llama改进之——SwiGLU激活函数

引言 今天介绍LLAMA模型引入的关于激活函数的改进——SwiGLU1&#xff0c;该激活函数取得了不错的效果&#xff0c;得到了广泛地应用。 SwiGLU是GLU的一种变体&#xff0c;其中包含了GLU和Swish激活函数。 GLU GLU(Gated Linear Units,门控线性单元)2引入了两个不同的线性层…...

编程日记 2024/5/9 11:34:05

在数据分析中所需要运用到的概率论知识

数据分析 前言一、总体二、样本三、统计抽样抽取的基本准则 四、随机抽样抽签法随机数法 五、分层抽样六、整群抽样七、系统抽样八、统计参数常用的分布函数参数 九、样本统计量十、样本均值和样本方差十一、描述样本集中位置的统计量样本均值样本中位数样本众数 十二、描述样本…...

编程日记 2024/5/9 11:31:00

韩顺平0基础学Java——第6天

p87-p109 运算符&#xff08;第四章&#xff09; 四种进制 二进制用0b或0B开头 十进制略 八进制用0开头 十六进制0x或0X开头&#xff0c;其中的A—F不区分大小写 10转2&#xff1a;将这个数不断除以2&#xff0c;直到商为0&#xff0c;然后把每步得到的余数倒过来&#…...

编程日记 2024/5/9 11:29:59

react18子组件设置接收默认值和值类型验证

父组件传值 import ChildCom from ./components/ChildCom export default function Person {return(<div><ChildCom name"alan-ben" age{18} score{[98, 97, 100]} /></div>) } 子组件接收并验证类型 import React from react import PropTypes…...

编程日记 2024/5/9 11:27:56

PHP和Node.js哪个更爽?

先说结论&#xff0c;rust完胜。 php&#xff1a;laravel&#xff0c;swoole&#xff0c;webman&#xff0c;最开始在苏宁的时候写了几年php&#xff0c;当时觉得php真的是世界上最好的语言&#xff0c;因为当初活在舒适圈里&#xff0c;不愿意跳出来&#xff0c;就好比当初活在…...

编程新知 2025/7/5 16:06:49

python/java环境配置

环境变量放一起 python&#xff1a; 1.首先下载Python Python下载地址&#xff1a;Download Python | Python.org downloads ---windows -- 64 2.安装Python 下面两个&#xff0c;然后自定义&#xff0c;全选 可以把前4个选上 3.环境配置 1&#xff09;搜高级系统设置 2…...

编程新知 2025/7/6 7:09:46

LeetCode - 394. 字符串解码

题目 394. 字符串解码 - 力扣&#xff08;LeetCode&#xff09; 思路 使用两个栈&#xff1a;一个存储重复次数&#xff0c;一个存储字符串 遍历输入字符串&#xff1a; 数字处理&#xff1a;遇到数字时&#xff0c;累积计算重复次数左括号处理&#xff1a;保存当前状态&a…...

编程新知 2025/7/4 9:40:28

什么是库存周转？如何用进销存系统提高库存周转率？

你可能听说过这样一句话&#xff1a; “利润不是赚出来的&#xff0c;是管出来的。” 尤其是在制造业、批发零售、电商这类“货堆成山”的行业&#xff0c;很多企业看着销售不错&#xff0c;账上却没钱、利润也不见了&#xff0c;一翻库存才发现&#xff1a; 一堆卖不动的旧货…...

编程新知 2025/7/5 2:52:28

ArcGIS Pro制作水平横向图例+多级标注

今天介绍下载ArcGIS Pro中如何设置水平横向图例。 之前我们介绍了ArcGIS的横向图例制作&#xff1a;ArcGIS横向、多列图例、顺序重排、符号居中、批量更改图例符号等等&#xff08;ArcGIS出图图例8大技巧&#xff09;&#xff0c;那这次我们看看ArcGIS Pro如何更加快捷的操作。…...

编程新知 2025/7/5 18:11:47

蓝桥杯3498 01串的熵

问题描述 对于一个长度为 23333333的 01 串, 如果其信息熵为 11625907.5798&#xff0c; 且 0 出现次数比 1 少, 那么这个 01 串中 0 出现了多少次? #include<iostream> #include<cmath> using namespace std;int n 23333333;int main() {//枚举 0 出现的次数//因…...

编程新知 2025/7/5 3:31:34

基于 TAPD 进行项目管理

起因 自己写了个小工具&#xff0c;仓库用的Github。之前在用markdown进行需求管理&#xff0c;现在随着功能的增加&#xff0c;感觉有点难以管理了&#xff0c;所以用TAPD这个工具进行需求、Bug管理。 操作流程 注册 TAPD&#xff0c;需要提供一个企业名新建一个项目&#…...

编程新知 2025/6/26 11:27:05

嵌入式学习笔记DAY33（网络编程——TCP）

一、网络架构 C/S &#xff08;client/server 客户端/服务器&#xff09;&#xff1a;由客户端和服务器端两个部分组成。客户端通常是用户使用的应用程序&#xff0c;负责提供用户界面和交互逻辑 &#xff0c;接收用户输入&#xff0c;向服务器发送请求&#xff0c;并展示服务…...

编程新知 2025/7/6 5:26:39

【C++进阶篇】智能指针

C内存管理终极指南&#xff1a;智能指针从入门到源码剖析 一. 智能指针1.1 auto_ptr1.2 unique_ptr1.3 shared_ptr1.4 make_shared 二. 原理三. shared_ptr循环引用问题三. 线程安全问题四. 内存泄漏4.1 什么是内存泄漏4.2 危害4.3 避免内存泄漏 五. 最后 一. 智能指针 智能指…...

编程新知 2025/7/4 22:44:44

根目录0xa0属性对应的Ntfs!_SCB中的FileObject是什么时候被建立的----NTFS源代码分析--重要

根目录0xa0属性对应的Ntfs!_SCB中的FileObject是什么时候被建立的 第一部分&#xff1a; 0: kd> g Breakpoint 9 hit Ntfs!ReadIndexBuffer: f7173886 55 push ebp 0: kd> kc # 00 Ntfs!ReadIndexBuffer 01 Ntfs!FindFirstIndexEntry 02 Ntfs!NtfsUpda…...

编程新知 2025/6/21 2:38:11