Js 实现jsonp原理

JSONP（JSON with Padding）是一种跨域数据交互的解决方案，其原理是利用了HTML中的<script>标签没有跨域限制的特性。以下是关于JSONP的详细解释：

基础概念

同源策略：浏览器出于安全考虑，限制了不同源（协议、域名、端口）之间的资源交互。
JSONP：通过动态创建<script>标签，将请求的URL指向一个跨域的JavaScript文件，这个文件返回的不是纯数据，而是一个函数调用，函数参数中包含所需的数据。

优势

简单易用，兼容性好，适用于老的浏览器。
不受同源策略限制。

类型

普通JSONP：通过指定回调函数名来获取数据。
CORS（跨域资源共享）：现代浏览器支持的更安全的跨域方式，但老版本浏览器不支持。

应用场景

获取跨域的JSON数据。
在一些老项目中，由于技术栈限制，可能需要使用JSONP。

实现原理

客户端定义一个全局函数（回调函数）。
客户端将该全局函数的名称作为参数发送给服务器。
服务器接收到请求后，将数据包装在这个全局函数中，并返回一个JavaScript脚本。
客户端执行返回的脚本，回调函数被调用，数据作为参数传递给回调函数。

示例代码

客户端代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JSONP Example</title>
</head>
<body>
    <script>
        function handleResponse(data) {
            console.log('Received data:', data);
        }

        function jsonpRequest(url) {
            const script = document.createElement('script');
            script.src = `${url}?callback=handleResponse`;
            document.body.appendChild(script);
        }

        // 使用示例
        jsonpRequest('http://example.com/api/data');
    </script>
</body>
</html>

服务器端代码（Node.js示例）

const http = require('http');

http.createServer((req, res) => {
    const callback = req.url.split('=')[1];
    const data = { message: 'Hello, JSONP!' };
    res.writeHead(200, { 'Content-Type': 'application/javascript' });
    res.end(`${callback}(${JSON.stringify(data)})`);
}).listen(3000, () => {
    console.log('Server running at http://localhost:3000/');
});

遇到的问题及解决方法

回调函数未定义：确保客户端定义的回调函数在请求发送前已经存在。
安全性问题：JSONP存在一定的安全风险，因为它允许执行跨域的JavaScript代码。可以通过验证请求来源或使用CORS来提高安全性。
错误处理：JSONP没有内置的错误处理机制，可以通过设置超时和检查返回的数据格式来处理错误。

总结

JSONP是一种利用<script>标签特性实现跨域数据交互的方法，适用于老版本浏览器和一些简单的跨域需求。但在现代Web开发中，推荐使用CORS来实现更安全和灵活的跨域数据交互。

页面内容是否对你有帮助？

有帮助

没帮助

jquery ajax失败的请求未触发完整或错误处理程序

、

我像这样调用ajax： $.ajax({ jsonp: 'js

浏览 0提问于2011-01-28得票数 0

回答已采纳

1回答

来自本地文件的Ajax请求

、、、、

我正在尝试使用JQuery.Soap插件在内部进行跨域请求。 url: 'some url', appendMethodToURL: false, enableLoggin: true, success: function (response) { }, error: funct

浏览 0提问于2014-11-09得票数 0

1回答

EXTJS获得正确的调用

、、、、

我的Ext代理如下所示： type: 'jsonp', url : 'https://smartadresse.dk/service/locations/3/detect

浏览 2提问于2013-06-20得票数 0

1回答

如何在剑道股票图表工具提示中仅获取日期和时间

url: "http://demos.kendoui.com/service/StockData", dataType: "jsonp$(document).ready(

浏览 3提问于2013-09-04得票数 2

3回答

我必须做什么来规避JSON的JavaScript同源策略...这是否也适用于XML数据？

、、

我知道我需要将JSON更改为JSONP，因为我的服务器在不同的域上，但我只在客户端这样做吗？那么XML数据又如何呢？它也能以某种方式跨域加载吗？最后，有没有好的网站对此进行深入解释，并举例说明？

浏览 1提问于2010-12-22得票数 1

3回答

跨域请求，但POST为空

、、、、

我需要实现跨域的POST请求。使用这段代码，在相同的域中一切都工作得很好。但是当我把后台移到另一个域的时候--一切都停止了！因此，可能会有打字错误。只能存在与跨域请求相关的错误。我尝试使用ajax和JSONP发送POST请求：{ type: "POST", dataType: 'jsonp'

浏览 0提问于2013-01-27得票数 1

回答已采纳

3回答

为什么JsonP不能工作？

、、、

可能重复：我收到了这个请求，我得到的是js错误。即使是角jsonp方法也不起作用： jsonp依赖于某些服务器实现吗？

浏览 6提问于2012-10-10得票数 2

回答已采纳

2回答

可以用通俗的话来解释JSONP是什么吗？

我知道JSONP是JSON填充。我明白JSON是什么，以及如何使用它jQuery.getJSON()。但是，我不明白callback什么时候引入JSONP 的概念。

浏览 868提问于2017-12-25

1回答

在$.ajax中指定Zepto回调名称

、、、

在jQuery中， url: 'http://reddit.com/r/aww.json', jsonp: 'jsonpjsonp=jsonp1354967449950。http://www.reddit.com/r/aww.json?call

浏览 1提问于2012-12-08得票数 5

回答已采纳

2回答

我知道如何使用jQuery --如何使用Mootools对JSONP提出请求

、

我已经习惯了使用jQuery，它的工作原理很好： method: "GET", dataType: "jsonp", success: function (msg) {},}); **注意:当我省略jsonp：'jsonp</em

浏览 3提问于2013-03-17得票数 0

回答已采纳

2回答

png" alt="Oz the Great and Powerful (2013) on IMDb" /></span> <script>(function(d,s,id){var js,stags=d.getElementsByTagName(s)[0];if(d.getElementById(id)){return;}js=d.createElement(s);js.id=id;js.src=&q

浏览 0提问于2013-03-18得票数 1

1回答

API建议:在指定jsonp时抑制http错误代码

、、

结论: Kevin的快速响应使API的JSONP功能能够假定它是对超棒的正确描述。http://soapi.info/Code/JS/Stable/ErrorTest.htm无法可靠地接收http状态为200的JSONP结果，从而使API的J

浏览 0提问于2010-06-09得票数 6

回答已采纳

1回答

Jquery简单AJAX get在IE中不起作用(8)

、

我有最简单的AJAX get调用(在FF中工作)，但不能在IE(8)中工作，我不知道为什么，也找不到一种方法来调试："http://server-url:3333/path_to_file?PROJECT_ID=2&BROWSER_ID=1"此调用是从同一网络上的服务器完成的，但不是在" server -url“机器上，这是跨域问题吗？

浏览 1提问于2011-07-27得票数 0

1回答

使用areIntlLocalesSupported和Browerify/webpack添加局部变量的正确方法是什么？

、、

No `Intl`, so use and load the polyfill.require('intl/locale-data/jsonp/bg-BG.js'); //"zh-Hans-CN": Chinese

浏览 5提问于2015-12-15得票数 2

回答已采纳

1回答

Prototype + Flickr Ajax请求不适用于Firefox

、、、

大家好，我遇到了一个奇怪的问题，我一直在使用Flickr API，在Flickr中，通过url格式与服务器建立连接，在我的例子中是这样的 new Ajax.Request('http://api.flickr.com/services/rest/?method=flickr.photosets.getList&api_key=10cb3dccaa050efebdc01540c1d4d227&user_id=513905

浏览 3提问于2010-06-25得票数 0

1回答

Django将JSON数据传递给静态getJSON/Javascript

、、、、

$('<option></option>').val(item).html(item.platformtype) });我看过许多其他线程，但它们都是针对那些在模板中使用嵌入式JSplatformList"></select> <div id = "root"></div> <script src = &quo

浏览 2提问于2016-07-27得票数 2

回答已采纳

1回答

未能使用jquery获得jsonp响应

type: "GET", crossDomain: true, dataType: "jsonp我的服务器输出是json，我必须使用jsonp作为跨域请求，如何获得对输出的访问？请帮帮我。谢谢

浏览 1提问于2013-07-15得票数 0

1回答

在Wordpress widgets管理面板中加载自定义JavaScript文件

、、

widget配置选项需要jQuery代码来通过JSONP从第三方服务器获取它们，并附加事件，以便如果一个下拉列表发生变化，例如类别，它将动态更改另一个下拉列表的内容，比方说子类别。要实现此效果，我需要在小部件管理面板中加载一些自定义JavaScript文件(在用户将小部件拖放到管理面板中的相关侧栏后显示的选项)。 } wp_register_scrip

浏览 3提问于2010-11-30得票数 2

回答已采纳

2回答

AngularJS -具有缓存响应的多个应用编程接口调用

、

我希望我的控制器能够通过服务从API中获取一个指示器列表：dataService.getIndicators( ["a", "b", "c"] )var baseURL = "www.myapi.com/jsonp/indicator/"; this.getIndicators = function(indicator

浏览 1提问于2014-07-22得票数 0

1回答

使用jsonp和服务的跨域AJAX

、、、

我的第一个问题是，有没有可能使用jsonp？如果是这样的话，我希望得到一些关于如何解决/修复问题的指导。谢谢!

浏览 0提问于2010-02-09得票数 5

回答已采纳

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

Js 实现jsonp原理

基础概念

优势

类型

应用场景

实现原理

示例代码

客户端代码

服务器端代码（Node.js示例）

遇到的问题及解决方法

总结

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐