JSONP原理

最新推荐文章于 2025-11-24 11:03:43 发布
原创 最新推荐文章于 2025-11-24 11:03:43 发布 · 148 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#json #javascript #ViewUI

本文介绍了一种利用JSONP实现跨域请求的方法。通过创建script标签并设置回调函数来接收服务器返回的数据，实现了从不同域获取JSON格式数据的功能。文章提供了具体的JavaScript代码示例。

<button id="btn">click</button>

<script type="text/javascript">

    function $(str){

        return document.getElementById(str)

    }

    function CreateScript(src) {

        var Scrip=document.createElement('script');

        Scrip.src=src;

        document.body.appendChild(Scrip);

    }

    function jsonpcallback(json) {

            console.log(json);//Object { email="中国", email2="中国222"}

    }

    $('btn').onclick=function(){

      CreateScript("http://localhost:51335/somejson?callback=jsonpcallback")    

    }

</script>

JSONP原理及简单实现
10-22
JSONP原理的核心在于动态创建标签，并将要请求的跨域URL作为该标签的src属性值。这个URL会包含一个callback参数，这个参数指定了一个将在当前页面执行的函数名。当请求成功返回时，数据会被包裹在这个函数调用的结构...
JSONP 原理
01-08
### JSONP的工作原理 1. **动态创建`<script>`标签**: JSONP的核心在于利用`<script>`标签的`src`属性可以加载跨域脚本的特性。当我们在HTML文档中添加一个`<script>`标签并设置其`src`属性指向提供JSONP服务的...
jsonp原理
laowangism的博客
07-09 325
JSONP原理一、背景二、原理分析1.引出jsonp的背景2.解决方案一：3.解决方法二：将服务端返回的结果（json）包装成js正确的语法4.解决方法三：客户端定义js函数，服务端返回结果语句为函数的调用语句5.解决方法四：通过url参数传递函数名6.解决方法五：每次点击事件或者出发事件动态生成script标签7.终极大招 -- JQuery使用jsonp跨域 一、背景 jsonp作为解决浏览器同源策略的方式之一并被广泛使用，这里简单讲解一下jsonp的原理及流程，有助于理解jsonp机制。 PS：本
jsonp原理详解
Jason的学习笔记
07-06 326
感谢原文作者：HansExploration 原文链接：https://blog.youkuaiyun.com/hansexploration/article/details/80314948 什么是JSONP？ Jsonp(JSON with Padding) 是 json 的一种"使用模式"，可以让网页从别的域名（网站）那获取资料，即跨域读取数据。 为什么需要JSONP? 由于浏览器同源策略安全限制,数据是不可以直接跨域(包括不同的根域名、二级域名、或不同的端口)请求的,除非目标域名授权你可以访问。 同源策略 .
ajax的jsonp原理,JSONP原理及实现
weixin_35763055的博客
08-05 769
基本原理基本原理： 主要就是利用了 script 标签的src没有跨域限制来完成的。执行过程执行过程：前端定义一个解析函数(如: jsonpCallback = function (res) {})通过params的形式包装script标签的请求参数，并且声明执行函数(如cb=jsonpCallback)后端获取到前端声明的执行函数(jsonpCallback)，并以带上参数且调用执行函数的方式传...
jsonp原理和详解
"其实我是一演员"的专栏
03-25 2157
在介绍JSONP之前，先简单的介绍一些JSON。JSON是JavaScript Object Notation的缩写，是一种轻量的、可读的基于文本的数据交换开放标准。源于JavsScript编程语言中对简单数据结构和关联数组的展示功能。它是仅含有数据对和简单括号结构的纯文本，因此可通过许多途径进行JSON消息的传递。 1. JSONP定义JSONP是英文JSONwith Paddi...
JSONP原理解析
hb13141029的博客
09-20 211
JSONP就是利用了script标签的src属性发起的跨域请求，由于script标签的作用是用来执行src指定的js代码。那么我们可以跟后端协商一个函数名，后端将要返回的数据作为函数的参数，一起返回给前端，前端事先定义好该函数，这样就完成了跨域请求。首先我们需要明白，在页面上直接发起一个跨域的ajax请求是不可以的，但是，在页面上引入不同域上的js脚本却是可以的，就像你可以在自己的页面上使用。脚本请求地址的方式一样，只是ajax的jsonp对其做了封装，所以可想而知，jsonp是不支持POST方式的。
讲解JSONP原理
navylhjjlh的博客
07-08 573
讲解JSONP原理
JSONP原理及实现
橘猫吃不胖的博客
11-27 1121
JSONP原理及实现 1 概述 2 优点 3 缺点 4 实现
跨域解决方法——jsonp原理
tiankai戈
01-02 585
跨域解决方法——jsonp原理 一个域名地址的组成： 当协议、子域名、主域名、端口号任意一个不相同时，都算作不同域，不同域之间相互请求资源，就算做“跨域”。由于浏览器同源策略的限制，非同源下的请求，都会产生跨域问题。 使用jquery的jsonp可以发起跨域请求，下面来探究下他的原理及使用。 首先看下如何使用script src=""来完成一个跨域请求： 普通的ajax请求是会发生跨域问题的，但是img的src，a的href，script的src却可以发起任意网址的请求并接收到响应，于是我们首先利用s
Jsonp原理
work hard
07-25 440
转自：http://justcoding.iteye.com/blog/1366102/ 知道跨域问题可以使用jsonp解决，原理理解的不是很清楚 JSONP(JSON with Padding)是一个非官方的协议，它允许在服务器端集成Script tags返回至客户端，通过javascript callback的形式实现跨域访问（这仅仅是JSONP简单的实现形式）。 Jsonp原理：
通过实例解析json与jsonp原理及使用方法
01-18
1.json与jsonp的引入 在ajax中 JSON用来解决数据交换问题,而JSONP来实现跨域。 备注：跨域也可以通过服务器端代理来解决; 理解：JSON是一种数据交换格式，而JSONP是一种依靠开发人员的聪明才智创造出的一种非官方...
jsonp原理及使用
10-26
**JSONP的工作原理：** 1. **请求发起**：当需要跨域获取数据时，客户端（通常是网页中的JavaScript）会创建一个新的`<script>`标签，并设置其`src`属性指向提供JSONP服务的服务器URL。URL中通常会包含一个名为`...
跨域解决方案Jsonp原理解析
10-15
# 跨域解决方案：Jsonp原理解析 在Web开发中，浏览器的安全策略——同源策略（Same-Origin Policy）限制了JavaScript从不同源获取数据的能力。这意味着，如果一个网页的脚本试图访问另一个不同源的资源，浏览器会...
【Golang】——Gin 框架中的表单处理与数据绑定
2509_94007132的博客
11-24 515
Gin 允许注册自定义验证器。import ("regexp"// 注册自定义验证器// 路由err!= nil {return})本篇博客详细介绍了 Gin 框架中表单处理与数据绑定的功能，从基础的表单提交到复杂的数据验证和文件上传，再到完整项目示例，涵盖了实际开发中的常见场景。在下一篇博客中，我们将学习如何处理 API 请求与 JSON 数据绑定，进一步拓展你的 Web 开发能力。
Vscode+gdb可视化调试服务器上的二进制程序
upset_poor的博客
11-21 269
以MediaServer为例，本地架构为amd64(x86-64)，NAS架构为arm64由于本地有源代码却运行不了程序，而NAS服务器上可以运行却没有源代码，调试需要通过gdb命令行的方式，很不友好，所以研究了一下 选择用gdbserver的方式进行本地调试。
redis缓存对象踩坑：序列化
最新发布
weixin_73060959的博客
11-24 375
Jackson序列化机制：当使用Jackson将Java对象序列化为JSON字符串存储到Redis时，默认会包含@class字段来记录对象的实际类型，以便反序列化时能够正确还原对象类型。Redis缓存中存储的FlowPackageCacheEntity对象包含了@class属性，这是Jackson序列化Java对象时的类型信息。Redisson配置：Redisson在存储对象时使用了Jackson的序列化机制，会自动添加类型信息以确保反序列化的准确性。
基于华为开发者空间实现花卉识别
优快云高校俱乐部官方博客
11-21 1813
基于华为开发者空间实现花卉识别
.JSONP原理和jsonp怎么用
09-19
<think> 我们正在讨论JSONP的原理和使用方法。根据用户提供的引用，我们需要整合信息并清晰地解释JSONP。 首先，JSONP（JSON with Padding）是一种解决跨域问题的技术，它利用了<script>标签可以跨域加载资源的特性。 原理： 1. 由于浏览器的同源策略，通常无法跨域请求数据。但是<script>标签的src属性可以跨域加载资源。 2. JSONP通过在客户端定义一个全局回调函数，然后将函数名作为参数传递给服务器。 3. 服务器收到请求后，将数据包装在这个回调函数的调用中，返回一段JavaScript代码，例如：`callbackFunction({"data": "value"});` 4. 客户端加载这个脚本后，就会执行该函数，从而获取到数据。 使用方法： 1. 客户端（浏览器）需要先定义一个全局函数作为回调函数。 2. 动态创建一个<script>标签，将其src属性设置为请求的URL，并在URL中指定回调函数的名称（例如：`?callback=myCallback`）。 3. 服务器端接收到请求，根据回调函数名生成相应的JavaScript代码并返回。 4. 当脚本加载完成后，回调函数被调用，并传入服务器返回的数据。 示例代码（简化版）： 引用[3]中提供了一个简化版的JSONP实现： ```javascript function simpleJsonp(url, callback) { // 生成唯一的函数名，避免冲突 const functionName = 'jsonp_' + Date.now() + Math.round(Math.random() * 1000); // 注册全局回调 window[functionName] = function(response) { callback(response); // 清理工作：移除script标签，删除全局函数 document.body.removeChild(script); delete window[functionName]; }; // 创建script标签 const script = document.createElement('script'); // 设置src，将回调函数名作为参数传递给服务器 script.src = url + (url.includes('?') ? '&' : '?') + 'callback=' + functionName; // 错误处理 script.onerror = function() { callback(new Error('JSONP请求失败')); document.body.removeChild(script); delete window[functionName]; }; // 将script标签添加到文档中，开始请求 document.body.appendChild(script); } ``` 另外，引用[2]中展示了使用jQuery进行JSONP请求的示例： ```html <script type="text/javascript"> $(document).ready(function(){ $.ajax({ type: "get", async: false, url: "http://www.practice-zhao.com/student.php?id=1", dataType: "jsonp", jsonp: "callback", // 指定回调函数名的参数名，默认为"callback" jsonpCallback: "jsonhandle", // 指定回调函数名，如果不指定，jQuery会自动生成 success: function(data) { alert("age:" + data.age + "name:" + data.name); } }); }); </script> ``` 优缺点（引用[3]）： 优点： - 兼容性好：支持老版本浏览器 - 简单易用：实现相对简单 - 绕过同源策略：解决跨域问题 缺点： - 仅支持GET请求 - 安全性问题：可能遭受XSS攻击 - 错误处理困难 - 全局污染：需要在全局定义回调函数 总结： JSONP是一种利用<script>标签实现跨域数据请求的技术。它通过动态创建script标签，将服务器返回的数据作为回调函数的参数来执行。尽管现在有更现代的跨域解决方案（如CORS），但JSONP在特定场景下仍然有其价值。 根据用户要求，我们还需要生成相关问题： §§相关问题§§ 1. JSONP为什么只能使用GET请求？ 2. 如何防止JSONP请求中的安全风险？ 3. JSONP和CORS有什么区别？ 4. 除了JSONP，还有哪些跨域请求的方法？ 5. 服务器端如何支持JSONP？ </think> ### JSONP原理及使用方法 #### JSONP原理 JSONP（JSON with Padding）是一种利用`<script>`标签实现跨域数据请求的技术，核心原理如下： 1. **跨域限制绕过**：浏览器同源策略限制脚本跨域访问，但允许加载外部脚本资源。JSONP通过动态创建`<script>`标签的`src`属性发起请求（例如：`<script src="https://api.com/data?callback=handleResponse">`），绕过同源策略限制[^1][^3][^5]。 2. **回调机制**：客户端预先定义全局回调函数（如`handleResponse`），服务器将数据包裹在该函数调用中返回。例如服务器返回：`handleResponse({"name":"Alice","age":28})`，浏览器将其作为脚本执行，触发回调函数处理数据[^1][^4][^5]。 3. **数据格式**：服务器需配合将JSON数据包装成函数调用格式（Padding），而非纯JSON[^3][^4]。 #### JSONP实践方法 ##### 原生JavaScript实现 ```javascript function jsonpRequest(url, callback) { // 生成唯一回调函数名避免冲突 const callbackName = 'jsonp_' + Date.now(); // 定义全局回调函数 window[callbackName] = data => { callback(data); delete window[callbackName]; // 清理全局函数 document.body.removeChild(script); }; // 创建script标签 const script = document.createElement('script'); script.src = `${url}?callback=${callbackName}`; // 错误处理 script.onerror = () => { callback(new Error('JSONP请求失败')); cleanUp(); }; document.body.appendChild(script); } // 使用示例 jsonpRequest('https://api.com/data', data => { console.log('收到数据:', data); }); ``` ##### jQuery 实现 ```html <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script> $.ajax({ url: "https://api.com/data", dataType: "jsonp", // 指定JSONP类型 jsonp: "callback", // 回调参数名（默认callback） jsonpCallback: "handleData",// 自定义回调函数名 success: data => { console.log("姓名:", data.name, "年龄:", data.age); }, error: err => { console.error("请求失败", err); } }); </script> ``` #### 服务器端配合示例（PHP） ```php <?php $data = ['name' => 'Bob', 'age' => 32]; $callback = $_GET['callback']; // 获取客户端回调函数名 header('Content-Type: application/javascript'); echo $callback . '(' . json_encode($data) . ')'; // 返回函数调用 ?> ``` #### ⚠️ 注意事项 1. **仅支持GET请求**：JSONP本质是脚本加载，不支持POST/PUT等方法[^3][^4]。 2. **安全性风险**：需防范XSS攻击，确保信任服务器来源[^3]。 3. **错误处理**：通过`script.onerror`捕获网络错误，但HTTP状态码错误无法直接获取[^3]。 #### 🔄 适用场景 - 兼容老旧浏览器（如IE8）的跨域请求 - 获取公开API数据（如天气、股票等） - 快速原型开发[^1][^3] > JSONP作为传统跨域方案，在现代开发中逐渐被CORS替代，但在特定场景仍有应用价值[^3]。 ---
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值