- 综合排序
- 最热优先
- 最新优先
- 来自专栏小孟开发笔记
JSONP原理以及示例（jsonp示例）
2）JSONP的缺点： 首先，它没有关于JSONP调用的错误处理，一旦回调函数调用失败，浏览器会以静默失败的方式处理。 其次，它只支持GET请求，这是由于该技术本身的特性所决定的。 因此，对于一些需要对安全性有要求的跨域请求，JSONP的使用需要谨慎一点了。 JSONP不支持用async:false的方法设置同步。 指定服务器返回的数据类型为jsonp格式。 jquery配置jsonp后会随机生成回调函数，当返回jsonp的数据后，执行该回调函数，只不过默认jquery会将这个执行动作映射到success中。 jsonp的实现方式其实就是<script>脚本请求地址的方式一样，只是ajax的jsonp对其做了封装，所以可想而知，jsonp是不支持POST方式的。
1K10编辑于 2024-02-20 - 来自专栏ops技术分享
JSONP 教程
本章节我们将向大家介绍 JSONP 的知识。 Jsonp(JSON with Padding) 是 json 的一种"使用模式"，可以让网页从别的域名（网站）那获取资料，即跨域读取数据。 为什么我们从不同的域（网站）访问数据需要一个特殊的技术( JSONP )呢？这是因为同源策略。 JSONP 应用 1. 服务端 JSONP 格式数据 如客户想访问 : https://www.runoob.com/try/ajax/jsonp.php? 服务端文件 jsonp.php 代码为： <? jsoncallback=callbackFunction"></script> </body> </html> jQuery 使用 JSONP 以上代码可以使用 jQuery 代码实例： JSONP
1.4K10发布于 2021-07-14 - 来自专栏Java成长之路
jsonp详解
修改jsonp.html页面的代码： <! /jsonp/flightResult.aspx? 运行一下页面，成功弹出提示窗口，jsonp的执行全过程顺利完成！那么调用的过程还能更简单点吗？接着往下看。 3.5 通过jquery实现jsonp调用 修改jsonp.html页面的代码： <! code=CA1998", dataType: "jsonp", jsonp: "callback",//传递给请求处理程序或页面的，用以获得jsonp 总结 最后，我们可以总结一下jsonp吧！
2.1K40发布于 2018-09-29 - 来自专栏OSChina
Jsonp
解决js的跨域问题可以使用jsonp。 Jsonp不是新技术，跨域的解决方案。使用js的特性绕过跨域请求。Js可以跨域加载js文件。 js代码 $.ajax({ url : "http://localhost:8088/user/token/" + _ticket, dataType : "jsonp", type public class TokenController { @Autowired private TokenService tokenService; /** * 把结果封装成一个jsonp 数据 * @param token * @param callback jsonp函数名 * @return * @throws Exception * "application/json callback) throws Exception{ AJAXResult result= tokenService.getUserByToken(token); //在相应之前，判断是否为jsonp
1K30发布于 2019-08-01 - 来自专栏前端开发
jsonp介绍与jsonp封装
首先说个很多刚接触的人都想问的问题： jsonp到底是什么？ 7、为了便于客户端使用数据，逐渐形成了一种非正式传输协议，人们把它称作JSONP，该协议的一个要点就是允许用户传递一个callback参数给服务端，然后服务端返回数据时会将这个callback参数作为函数名来包裹住 ---- Jsonp原理： 首先在客户端注册一个callback, 然后把callback的名字传给服务器。 此时，服务器先生成 json 数据。 然后以 javascript 语法的方式，生成一个function , function 名字就是传递上来的参数 jsonp. （动态执行回调函数） ---- 封装jsonp： function jsonp( url, fn ){ //构造一个函数到window上 var fnName="__jsonpFn
2.6K50发布于 2018-06-08 - 来自专栏lonelydawn的前端猿区
jsonp
jsonp是通过动态加载JS脚本的方式来获取服务端资源的，只适用于get请求。 请求参数可以放在脚本的URL上，除此之外，URL上还应有一个callback参数，参数值为一个函数名称。
74610发布于 2021-09-26 - 来自专栏python3
python jsonp
name__ == "__main__": app.run(host='ip地址', port=8000) 前台访问代码： $.ajax({ url: url3, dataType: 'jsonp
96020发布于 2020-01-08 - 来自专栏finleyMa
jsonp总结
/jsonp.php? jsonp作为ajax的一种形式进行了封装； 2、但ajax和jsonp其实本质上是不同的东西。 3、所以说，其实ajax与jsonp的区别不在于是否跨域，ajax通过服务端代理一样可以实现跨域，jsonp本身也不排斥同域的数据的获取。 总而言之，jsonp不是ajax的一个特例，哪怕jquery等巨头把jsonp封装进了ajax，也不能改变这一点！ JSONP的总结： 只能用GET请求 核心是动态添加script标签来调用服务器提供的js脚本 JSONP不是ajax的特例，只不过经常被封装进了ajax
1.3K20发布于 2018-09-10 - 来自专栏超然的博客
JSONP && CORS
所谓域，是通过“url首部”来识别，而非判断域与ip的对应关系 （“URL的首部”指window.location.protocol +window.location.host） 二、跨域方案 1. jsonp 设定一个script标签 <script src="http://<em>jsonp</em>.js?callback=xxx"></script> 2. 服务器 $callback = ! )'; 详见博客 JSON 和 JSONP两兄弟 2. cors JSONP CORS 目的 跨域 跨域 支持 get （受IE下url长度不能超过2083个字节的限制和出于安全考虑，一般不用来提交数据 服务端代理 在数据提供方没有提供对JSONP协议或者window.name协议的支持，也没有对其它域开放访问权限时，我们可以通过server proxy的方式来抓取数据。 动态创建script JSONP也就是利用这个原理。
1.6K20发布于 2018-08-03 - 来自专栏『学习与分享之旅』
JSONP封装
本文内容过于简陋，只是单纯的记录一下 JSONP 的封装代码：myJsonp.jsfunction obj2str(obj) { // 生成随机因子 obj.t = (Math.random cb=BNTang&teacher=BNTang&age=34&_=1559735634387 // http://127.0.0.1/jQuery/Ajax/22-jsonp.php? &teacher=BNTang&age=34&t=08520581619221432 // 1.生成URL地址 let url = options.url; if (options.jsonp + options.jsonp + "="; } else { url += "? DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>JSONP封装</title></head><body><
36200编辑于 2023-09-28 - 来自专栏六个周
jsonp温故
更新时间：2022-05-04 今天重新学习之前写了半截的项目，其中提到了jsonp，当时也是查了很多资料，做了很多笔记，但是最近在写一个项目的时候，竟然遗忘了很多，所以特此做个总结，在下次再遇到jsonp jsonp原理介绍 jsonp就是为了解决前端的跨域问题而进行的一项设计，jsonp之所以能实现跨域，是因为它发送的不是ajax请求，它动态创建了script标签，script标签是不受同源策略限制的 查找资料： 目前为止(2012年)最被推崇或者说首选的方案还是用JSON来传数据，靠JSONP来跨域。 -- 处理jsonp响应的全局回调函数的前缀 --> ·name(String) name of the global callback funcitions that handle jsonp responses -- 返回一个函数，当出现错误时，将取消正在进行的jsonp请求（`fn`不会被调用） -->
79040编辑于 2022-10-28 - 来自专栏『学习与分享之旅』
JSONP练习
本文内容过于简陋，只是单纯的记录一下 JSONP 的练习代码：index.html<! DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>JSONP练习</title> <script src BNTang", "age": 34 }, // 告诉jQuery需要请求跨域的数据 dataType: "jsonp ", // 告诉jQuery服务器在获取回调函数名称的时候需要用什么key来获取 jsonp: "cb", success: function
30400编辑于 2023-09-28 - 来自专栏技术博客
Json和Jsonp
前言 JSON和JSONP虽然只有一个字母的差别，但其实他们根本不是一回事儿：JSON是一种数据交换格式，而JSONP是一种依靠开发人员的聪明才智创造出的一种非官方跨域数据交互协议。 什么是Jsonp 1、一个众所周知的问题，Ajax直接请求普通文件存在跨域无权限访问的问题，甭管你是静态页面、动态网页、web服务、WCF，只要是跨域请求，一律不准； 2、不过我们又发现，Web Jsonp的客户端具体实现： 1.先来个最简单的一个。首先我在IIS中建立了两个网站，当然端口一个是888另外一个是8888，我们就把888作为本地服务器，8888作为远程服务器的。 毕竟是jsonp的服务者都要面对很多服务对象，而这些服务对象各自的本地函数都不相同啊？我们接着往下看。 /Home/aehyok", dataType: "jsonp", jsonp: "callback", //传递给请求处理程序或页面的，用以获得jsonp
1.8K20发布于 2018-09-11 - 来自专栏佳爷的后花媛
json & jsonp
image 对于JSON和JSONP，应该都不陌生，咳咳，不过最初对JSONP有点误解，以为是JSON的另外一个别名，其实二者风马牛不相及。 下面是如何完成jsonp调用的全过程。 等框架都把jsonp作为ajax的一种形式进行了封装； 2、但ajax和jsonp其实本质上是不同的东西。 3、其实ajax与jsonp的区别不在于是否跨域，ajax通过服务端代理一样可以实现跨域，jsonp本身也不排斥同域的数据的获取。 总而言之，jsonp不是ajax的一个特例，哪怕jquery等巨头把jsonp封装进了ajax，也不能改变着一点！ “傻喵，听懂了么？”
1.6K30发布于 2018-09-12 - 来自专栏前端卡卡西
Jsonp原理
Jsonp(JSON with Padding) JSONP:一种非官方跨域数据交互协议 众所周知，由于浏览器的同源策略，要从不同的域（网站）访问数据会产生跨域问题，img的src(获取图片)，link 的herf（获取css），script的scr(获取JavaScript)，这三个不属于同源策略，都可以跨域获取数据，因此，jsonp应运而生！ JSONP实现跨域的原理简单的说，就是动态创建script标签，然后利用script的src 不受同源策略约束来跨域获取数据。 直接上代码，前端： <body> <button id="normal">原生jsonp</button> <script> function show(x) { console.log('下面是jsonp返回的数据') console.log(x) } var btn = document.getElementById
1.1K20编辑于 2022-02-25 - 来自专栏全栈程序员必看
jsonp跨域原理简单总结_jsonp的工作原理
JSONP跨域GET请求是一个常用的解决方案，下面我们来看一下JSONP跨域是如何实现的，并且探讨下JSONP跨域的原理。 JSONP原理 JSONP的最基本的原理是：动态添加一个<script>标签，而script标签的src属性是没有跨域的限制的。 如果设为dataType: ‘jsonp’，这个$.ajax方法就和ajax XmlHttpRequest没什么关系了，取而代之的则是JSONP协议。 这种跨域的通讯方式称为JSONP。 jsonCallback函数jsonp1236827957501(….) (如:jsonp1236827957501)传给服务器。
2.8K40编辑于 2022-11-17 - 来自专栏全栈修仙之路
Angular JSONP 详解
一、什么是 JSONP JSONP（JSON with Padding）是数据格式JSON的一种 “使用模式”，可以让网页从别的网域要数据。另一个解决这个问题的新方法是跨来源资源共享。 三、Angular JSONP 示例 在 Angular 项目中，要使用 JSONP 实现跨域资源访问，我们需要导入 HttpClientModule 和 HttpClientJsonpModule 模块 四、Angular JSONP 原理简析 在了解 JSONP 的工作原理之后，再看 Angular 的源码就清晰简单很多。 下面我们将以 this.http.jsonp() 方法的调用流程为主线，简单分析一下 Angular JSONP 的实现。 == 'JSONP') { throw new Error(JSONP_ERR_WRONG_METHOD); } else if (req.responseType !
3.1K41发布于 2019-11-05 - 来自专栏张善友的专栏
JSON 和 JSONP
JSONP（JSON with Padding）：打包在函数调用中的 JSON 数据。JSONP的原理很简单，但需要服务器端给予相应配合。 大致来说，JSONP的实现思路就是在客户端编程时作好使用JSON数据的准备，然后再通过圆括号将这些数据括起来以创建一条有效的JavaScript语句（可能是一次有效的函数调用）.介绍参见:http:// www.cnblogs.com/AllengWang/archive/2008/02/03/1062843.html 参考资料: 使用 JSONP 实现跨域通信，第 1 部分: 结合 JSONP 和 jQuery 快速构建强大的 mashup 使用 JSONP 实现跨域通信，第 2 部分: 使用 JSONP、jQuery 和 Yahoo! JSON (WCF-Implementation) Rob Windsor on WCF with REST, JSON and RSS JSON Viewer RenComponent.JSONP
1.2K70发布于 2018-01-22 - 来自专栏程序技术知识
go : gin jsonp
使用JSONP从不同域中的服务器请求数据。如果存在查询参数回调，则将回调添加到响应体。 代码： func main() { r := gin.Default() r.GET("/JSONP? } //callback is x // Will output : x({\"foo\":\"bar\"}) c.JSONP 8080 r.Run(":8080") 测试 目录结构： . ├── go.mod ├── go.sum └── mian.go 结果： $ curl http://127.0.0.1:8080/JSONP {"foo":"bar"} $ curl http://127.0.0.1:8080/JSONP?
70410编辑于 2022-07-23 - 来自专栏Java开发
Java 实现 JSONP
以下是一个使用 Java 实现 JSONP 功能的示例，包含服务端和客户端代码：服务端实现（Servlet）服务端需要从请求中获取回调函数名，并将 JSON 数据包装在回调函数中返回。 java.io.IOException;import java.io.PrintWriter;import java.util.HashMap;import java.util.Map;@WebServlet("/jsonp DOCTYPE html><html><head> <meta charset="UTF-8"> <title>JSONP Example</title></head><body> < 注意事项安全风险：JSONP 存在 XSS 风险，需对回调函数名进行严格过滤（例如只允许字母、数字、下划线）。 替代方案：现代项目推荐使用 CORS（跨域资源共享）替代 JSONP，安全性更高。
22700编辑于 2025-07-08
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号