JSONP跨域

1 概述

定义

json存在的意义:

不同类型的语言,都能识别json

JSONP(JSON with Padding)是JSON的一种“使用模式”,可用于解决主流浏览器的跨域数据访问的问题。由于同源策略,一般来说位于 server1.example.com 的网页无法与不是 server1.example.com的服务器沟通,而 HTML 的

image-20240731100716457

  • 跨域:浏览器A服务器B获取的静态资源,包括Html、Css、Js,然后在Js中通过Ajax访问C服务器的静态资源或请求。即:浏览器A从B服务器拿的资源,资源中想访问服务器C的资源。
  • 同源策略:同一个请求协议(如:Http或Https)、同一个Ip、同一个端口,3个全部相同,即为同源。

2 demo

后端

<?php$arr=["name"=>"woniu","age"=>20];//把数组转成json字符串,$json = json_encode($arr);//输出echo $json;
?>

前端

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="./jquery-3.4.1.min.js"></script>
</head>
<body><h1>前端</h1><script>$.getJSON("后端的地址",function(data){alert(JSON.stringify(data));})</script>
</body>
</html>

用户访问

192.168.190.134/woniu/demo31.html

查看控制台:

image-20240731102921872

解决方案

  • JSONP
  • CORS

3 JSONP

image-20240731105929545

image-20240731112347075

后端

<?php$arr=["name"=>"woniu","age"=>20];//把数组转成json字符串,$json = json_encode($arr);$callback = $_GET["callback"]; // 函数对象, 字符串//输出///echo $json;echo "$callback('$json')";
?>

前端

# 方法一:
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="./jquery-3.7.1.min.js"></script>
</head>
<body><h1>前端</h1><script>// function xxx(data){//     // 后端返回的data json//     console.log("999");// }</script><script>$.getJSON("http://192.168.190.133/wh069/demo31.php?callback=?",function(data){alert(JSON.stringify(data));// alert(JSON.parse(data));  // 反序列化 // json:序列化和反序列化})</script>
</body>
</html># 方法二:
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="./jquery-3.7.1.min.js"></script>
</head>
<body><h1>前端</h1><script>function xxx(data){// 后端返回的data jsonalert(JSON.stringify(data));}</script><script src="http://192.168.190.133/wh069/demo31.php?callback=xxx"></script>
</body>
</html>

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

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

深度学习(1)--机器学习、人工智能、深度学习的关系

1956 年提出 AI 概念&#xff0c;短短3年后&#xff08;1959&#xff09; Arthur Samuel 就提出了机器学习的概念&#xff1a; Field of study that gives computers the ability to learn without being explicitly programmed. 机器学习研究和构建的是一种特殊算法&#xff0…

谷粒商城实战笔记-122~124-全文检索-ElasticSearch-分词

文章目录 一&#xff0c;122-全文检索-ElasticSearch-分词-分词&安装ik分词二&#xff0c;124-全文检索-ElasticSearch-分词-自定义扩展词库1&#xff0c;创建nginx容器1.1 创建nginx文件夹1.2 创建nginx容器获取nginx配置1.3 复制nginx容器配置文件1.4 删除临时的nginx容器…

力扣-200.岛屿数量

刷力扣热题–第二十四天:200.岛屿数量 新手第二十四天 奋战敲代码&#xff0c;持之以恒&#xff0c;见证成长 1.题目描述 2.题目解答 这道题刚开始想的确实想的绞尽脑汁的&#xff0c;看了相关解答才明白的&#xff0c;三种方法&#xff0c;这里想先用两种方法进行实现&#…

【课程总结】Day17(上):NLP自然语言处理及RNN网络

前言 在机器学习章节【课程总结】Day6&#xff08;上&#xff09;&#xff1a;机器学习项目实战–外卖点评情感分析预测中&#xff0c;我们曾借助sklearn进行了外卖点评的情感分析预测&#xff1b;接下来&#xff0c;我们将深入了解自然语言处理的基本概念、RNN模型以及借助RN…

法制史学习笔记(个人向) Part.7

法制史学习笔记(个人向) Part.7 11. 清朝法律制度 11.1 立法概述 11.1.1 立法指导思想 简单来说是&#xff1a;详译明律&#xff0c;参以国制&#xff1b; 努尔哈赤时期&#xff0c;后金政权处于由习惯法到成文法的过渡过程中&#xff1b;皇太极统治时期&#xff0c;奉行“参…

细说文件操作

你好&#xff01;感谢支持孔乙己的新作&#xff0c;本文就结构体与大家分析我的思路。 希望能大佬们多多纠正及支持 &#xff01;&#xff01;&#xff01; 个人主页&#xff1a;爱摸鱼的孔乙己-CSDN博客 目录 1.什么是文件 1.1.程序设计文件 1.1.1.程序文件 1.1.2.数据文件…

【网络】TCP协议——TCP连接相关、TCP连接状态相关、TCP数据传输与控制相关、TCP数据处理和异常、基于TCP应用层协议

文章目录 Linux网络1. TCP协议1.1 TCP连接相关1.1.1 TCP协议段格式1.1.2 确定应答(ACK)机制1.1.3 超时重传机制 1.2 TCP连接状态相关1.2.1 TIME_WAIT状态1.2.2 CLOSE_WAIT 状态 1.3 TCP数据传输与控制相关1.3.1 滑动窗口1.3.2 流量控制1.3.3 拥塞控制1.3.4 延迟应答1.3.5 捎带应…

【C语言】结构体内存布局解析——字节对齐

&#x1f984;个人主页:小米里的大麦-CSDN博客 &#x1f38f;所属专栏:https://blog.csdn.net/huangcancan666/category_12718530.html &#x1f381;代码托管:黄灿灿 (huang-cancan-xbc) - Gitee.com ⚙️操作环境:Visual Studio 2022 目录 一、引言 二、什么是字节对齐&…

使用Python绘制雷达图的简单示例

雷达图&#xff08;Radar Chart&#xff09;也被称为蜘蛛网图、星形图或极坐标图&#xff0c;是一种用于显示多变量数据的图形方法。它以一个中心点为起点&#xff0c;从中心点向外延伸出多条射线&#xff0c;每条射线代表一个特定的变量或指标。每条射线上的点或线段表示该变量…

【基础篇】MySQL数据库详解:基础知识详解

一、SQL分类 1.DDL2.DML3.DQL4.DCL二、函数 1.字符串函数2.数值函数3.日期函数4.流程函数三、约束 1.概述2.约束演示3.外键约束四、多表查询 1.多表关系2.多表查询表述3.内连接4.外连接5.自连接6.子查询五、事务 1.事务简介2.事务操作3.事务四大特性4.并发事务问题5.事务隔离级…

Git的一些简单使用

下列内容适用于git初学者&#xff0c;从创建本地git仓库到提交的一个基本过程1. 1.创建git仓库 在想创建git仓库的路径下打开git bash&#xff0c;输入以下命令行创建仓库&#xff08;一般来说&#xff0c;我觉得直接在code workspace得地方创建git仓库就可以了&#xff0c;这…

自从用了这些监控工具,我连续几天没睡好觉!

大家好&#xff0c;我是程序员鱼皮&#xff0c;今天分享一些很实用的系统监控告警工具。 为什么要用监控告警&#xff1f; 说到监控告警&#xff0c;没有企业开发经验的同学非常容易忽视它&#xff0c;甚至会有同学觉得没有必要&#xff0c;大不了出了 Bug 再修就是了。 这种…

MySQL —— 库,数据类型 与 表

库与基础操作 1.1 查看数据库 使用 show databases; 可以查看当前 MySQL 目前有多少个数据库 5 rows 表示有 5 行&#xff0c;这里是表示的是有效的数据&#xff0c;不包括 第一行的指引 set 表示结果集合 0.01 sec 表示这个 sql 语句一共运行了0.01 秒&#xff0c;一般情况…

滚珠花键:新能源汽车传动系统的核心动力传递者

在日常生活中&#xff0c;汽车已经成为了必不可少的交通工具&#xff0c;尤其是新能源汽车。而滚珠花键作为传动系统中的重要组成部分&#xff0c;在传动系统方面的作用不容忽视。 随着科技的不断发展&#xff0c;汽车行业也在不断进步&#xff0c;滚珠花键作为高精度的机械传动…

C#中的wpf基础

在WPF中&#xff0c;Grid 是一种非常强大的布局控件&#xff0c;用于创建网格布局。它允许你将界面划分为行和列&#xff0c;并将控件放置在这些行和列中。 以下是一些关键点和示例&#xff0c;帮助你理解 WPF 中的 Grid&#xff1a; 基本属性 RowDefinitions&#xff1a;定义…

中国人工智能最好50所大学排名-2024年最强学校名单

人工智能最强的学校包含&#xff1a;清华大学、上海交通大学、南京大学、西安电子科技大学、电子科技大学、中国科学技术大学、哈尔滨工业大学、华中科技大学、东南大学、浙江大学等学校。这些都是人工智能专业排名全国前十的名牌大学。 圆梦小灯塔将在下文继续为2024年高考生…

详解基于百炼平台及函数计算快速上线网页AI助手

引言 在当今这个信息爆炸的时代&#xff0c;用户对于在线服务的需求越来越趋向于即时性和个性化。无论是寻找产品信息、解决问题还是寻求建议&#xff0c;人们都期望能够获得即时反馈。这对企业来说既是挑战也是机遇——如何在海量信息中脱颖而出&#xff0c;提供高效且贴心的…

MySQL系列之--关系型数据库以及SQL语句分类之DDL数据库和表的操作

文章目录 前言关系型数据库&#xff08;RDBMS&#xff09;关系型数据库的特点 MySQL数据模型SQL介绍基本语法规则SQL语句的分类DDL的介绍DDL的数据库操作DDL的表操作 前言 上一节MySQL系列之–详细安装教程和启动方法中介绍了MySQL如何安装&#xff0c;以及如何启动和客户端连接…

现代前端架构介绍(第一部分):App是如何由不同的构建块构成的

远离JavaScript疲劳和框架大战&#xff0c;了解真正重要的东西 几周前&#xff0c;我的同事们对我们的前端架构、代码结构和面临的挑战很感兴趣。在做了几次关于如何构建可扩展且健壮的前端的演讲后&#xff0c;我觉得把它们都总结一下并与社区分享我们的策略是一个不错的主意。…

内网穿透--meterpreter端口转发实验

实验背景 通过公司带有防火墙功能的路由器接入互联网&#xff0c;然后由于私网IP的缘故&#xff0c;公网无法直接访问内部主机&#xff0c;则需要通过已连接会话&#xff0c;代理穿透访问内网主机服务。 实验设备 1.路由器一台 2.内网 Win 7一台 3.公网 Kali 一台 4.网络 …