开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

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来实现更安全和灵活的跨域数据交互。

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

有帮助

没帮助

相关·内容

Jsonp原理

Jsonp(JSON with Padding) JSONP:一种非官方跨域数据交互协议众所周知，由于浏览器的同源策略，要从不同的域（网站）访问数据会产生跨域问题，img的src(获取图片)，link...的herf（获取css），script的scr(获取JavaScript)，这三个不属于同源策略，都可以跨域获取数据，因此，jsonp应运而生！...JSONP实现跨域的原理简单的说，就是动态创建script标签，然后利用script的src 不受同源策略约束来跨域获取数据。...直接上代码，前端：原生jsonp function show(x) {...console.log('下面是jsonp返回的数据') console.log(x) } var btn = document.getElementById

8832 0

JSONP原理以及示例（jsonp示例）

JSONP原理首先我们需要明白，在页面上直接发起一个跨域的ajax请求是不可以的，但是，在页面上引入不同域上的js脚本却是可以的，就像你可以在自己的页面上使用标签来随意显示某个域上的图片一样...1）原理： JSONP就是利用了标签的src属性发起的跨域请求，由于script标签的作用是用来执行src指定的js代码。...（1）前端代码：跨域测试 js/jquery-1.7.2.js"> $(document...=UTF-8" language="java" %> 跨域测试 js/jquery-1.7.2.js...jsonp的实现方式其实就是脚本请求地址的方式一样，只是ajax的jsonp对其做了封装，所以可想而知，jsonp是不支持POST方式的。

3311 0

jsonp的实现原理_jsonp为什么要提供回调函数

前几天看了动脑老师老宋讲的jsonp原理，觉得很受用，现做下笔记。...jsonp原理：先来看下一个例子：用node在本地搭两个服务，一个处理调用html页面（server1端口：8081），一个用来访问服务下的静态资源（server2端口：8082）。...接下来我在server2下放了个callback.js文件，然后写了alert（‘hello jsonp！！！’）...我们来修改下server2下的callback.js文件，如下 callback({ name:'jsonp', server:'server2', content:'hello jsonp!!!...800px; margin: 100px auto;} jsonp跨域原理。。。

5442 0

jsonp跨域原理简单总结_jsonp的工作原理

JSONP跨域GET请求是一个常用的解决方案，下面我们来看一下JSONP跨域是如何实现的，并且探讨下JSONP跨域的原理。...就会通过回调方法动态加载调用这个js tag:jsonp1236827957501(json数组); 这样就达到了跨域数据交换的目的。...JSONP原理 JSONP的最基本的原理是：动态添加一个标签，而script标签的src属性是没有跨域的限制的。...JSONP是一个非官方的协议，它允许在服务器端集成Script tags返回至客户端，通过javascript callback的形式实现跨域访问。 JSONP即JSON with Padding。...可以说jsonp的方式原理上和js”>是一致的。

2K4 0

JSONP原理及使用

JSON格式数据的编码和解析基本在所有主流语言中都被实现，所以现在大部分前后端分离的架构都以JSON格式进行数据的传输。那么JSONP是什么呢？...JSONP就是用来解决跨域请求问题的，那么具体是怎么实现的呢？...JSONP原理 ajax请求受同源策略影响，不允许进行跨域请求，而script标签src属性中的链接却可以访问跨域的js脚本，利用这个特性，服务端不再返回JSON格式的数据，而是返回一段调用某个函数的js...代码，在src中进行了调用，这样实现了跨域。...JSONP具体实现 1.首先看下ajax中如果进行跨域请求会如何。前端代码在域www.practice.com下面，使用ajax发送了一个跨域的get请求 <!

7664 0

jsonp的原理·jsonp是不是ajax中实现跨域访问的技术

ajax请求受同源策略影响，不允许进行跨域请求，而script标签src属性中的链接却可以访问跨域的js脚本，利用这个特性，服务端不再返回JSON格式的数据，　　而是返回一段调用某个函数的js代码...，在src中进行了调用，这样实现了跨域。　　...jsonp不是AJAX中实现跨域访问的技术　　jsonp没有使用XMLHttpRequest对象　　jsonp只是一种跨域的协议　　jsonp只支持Get方式

3522 0

Jsonp原理和实例

Jsonp(Json with padding)是一种简单的处理跨域的解决方案，原理就是利用script可以直接请求第三方进行跨域请求的特点，动态的创建元素，script元素的src属性设置跨域请求资源...jsop的特点就是使用简单，但是jsonp的弊端就是绕过了浏览器的同源策略，必须确保第三方资源能够安全准确的运行我们的回调函数，第一个问题是第三方资源的不安全会导致我们的程序出现安全漏洞，二是jsonp...我们看一段简单的实例了解实际的jsonp如何使用：在localhost域的index.html页面，请求其他域otherUrl的资源index.js function jsonp(res) {...({ url: 'otherUrl', data: { msg: 'val'}, callback: callbackFun }); 在其他域otherUrl的app.js文件中...jsonp是动态的去创建script元素，所以jsonp仅仅支持get请求。

1K4 0

JSONP 的工作原理

第三方产生的响应为json数据的包装（故称之为jsonp，即json padding），形如： callback({"name":"hax","gender":"Male"}) 这样浏览器会调用

3641 0

如何理解jsonp的原理

php echo "var data = 123"; //js jsonp.com'> console.log...php echo "var data = 123"; //js var script = document.createElement('script'); script.src='http://www.jsonp.com...代码，并且在请求服务端后我们可以拿到那段js代码，那我们使服务端返回一个JS函数调用，前端定义这个函数即可这也就是我们下面要说的jsonp //服务端 jsonp的原理实现了，我们来结合上述代码看下他的概念。...jsonp的执行原理了，如果还是很懵请细品。

4452 0

跨域jsonp的原理

标签可以链接到不同源的js脚本，来到达跨域目的。...重点：浏览器会根据他们的类型采用不同的处理方式，js文件则会执行。...文件，而上面的数据如果被解析为js文件，就会被执行；这就是 jsonp 的基本原理，利用script标签的特性，将数据使用json格式用一个函数包裹起来，然后在进行访问的页面中定义一个相同函数名的函数...以上便是利用jquery的风格封装得到jsonp函数，在和第三方接口调用或者和后端工程师交互式，一定要实现沟通好，向后端传递参数名时，用的什么参数，jquery默认用的是callback，举个例子：...百度的jsonp用的是 ?

1.3K4 0

JSONP原理及promise封装

解决跨域也就成了前端必须掌握的技能，其中JSONP就是一种解决该问题的好方法。一、JSONP跨域原理由于script标签不受浏览器同源策略的影响，允许跨域引用资源。...因此可以通过动态创建script标签，然后利用src属性进行跨域，这就是JSONP跨域的基本原理。...（具体实现可以查阅index.js），先来看看API： jsonp(url, opts, fn) url (String) url to fetch opts (Object), optional param...所以在src/common/js中新建jsonp.js： // 引入上一步从github安装的jsonp， // 即“原始jsonp”（与下面自己封装的“jsonp”区分开） import originJSONP.../common/js/jsonp' // 配置别名common后 import jsonp from 'common/js/jsonp' 尝试使用上面封装的jsonp获取腾讯网页版QQ音乐的推荐歌单数据

5274 0

jsonp跨域原理解析

说到这里jsonp的实现原理就浮出水面了。 jsonp就是使用同源策略这一“漏洞”，实现的跨域请求（这也是jsonp跨域只能用get请求的原因所在）。...JSONP跨域实现：根据上边所说的，我们要用过利用srcipt标签的src属性来实现，那么我们如何做呢，我们来看一段简单的代码，为了方便，我这里使用jQuery： $('#btn').click(function...append(frame); }); 可以看到，让我们点击按钮的时候，创建了一个script标签(即会发送一个get请求到src指向的地址,注意：这里必须使用scipt标签，否则返回的数据不会被当作js...我们继续看下边的代码点击 js...如下：这样下来，就完成了实现jsonp的跨域。总结：需要注意的是，callback参数定义的方法是需要前后端定义好的，具体什么名字，商讨好就可以了。

5433 0

原来你是这样的jsonp(原理与具体实现细节)

(该篇文章重点是想说jsonp实现过程，如果你想了解跨域相关的更多的知识，可以谷歌，度娘一把) 絮叨一下jsonp的基本原理 jsonp是服务器与客户端跨源通信的常用方法之一，具有简单易用，浏览器兼容性好等特点...当然jsonp不同于平常的ajax请求,它仅仅支持get类型的方式如何使用这里简单的介绍一下zepto.js是如果使用jsonp形式请求数据的，然后从使用的角度出发一步步分析源码实现。...分析到这里我相信你已经几乎明白了jsonp实现的基本原理，文章顶部说的几个问题，我们也在这个过程中解答了。这中间前端需要做什么？后端又需要做些什么来支持？...如果你对源码感兴趣可以点击这里查看koa-todo-list 找到根目录的testJsonp.js文件即是服务端主要代码前端代码 html 请求后端jsonp数据 js...结尾希望把jsonp的实现原理说清楚了，欢迎大家拍砖。

2.2K10 0

vue-jsonp_js创建json数组对象

在JSON中，字符串必须用双引号包裹。JSON由若干key:value的格式的数据组成。其中key值必须为字符串，value可以为字符串、数字、对象、数组、布尔...

6.8K2 0

面试经典之Jsonp跨域原理

本次仅这一个系列中的一小环展开讨论，并且深入其原理了解其用法。 ? 跨域是什么？首先，跨域是浏览器本身施加的安全限制，并不是人为的给某一个特定的网站设置的。...Jsonp（JSON with Padding）实质是一种跨域数据获取的解决方案，本质是利用html中的script标签的跨域调用能力。...这个标签来加载一些脚本，但是这个标签加载的内容是没有同源限制的，例如你在www.qq.com的网站上使用js...实现一个Jsonp 1. 服务端（三方平台）API 设计 // api可以接受一个callback参数，存在callback时，拼接返回结果 http://xxx.com/api?...callback=func 总结上述将jsonp的原理简单实现完成，从它的本质就可以看出一个明显缺点，因为script标签仅支持get，所以jsonp也仅仅能对get请求跨域，不能支持post。

1.5K2 0

通过JSONP实现跨域访问

常见的跨域可以通过标签元素实现，例如link、script、img、iframe等标签。 Document js...JSONP 不过这篇文章的目的是为了介绍JSONP进行跨域。如何利用JSONP实现跨域？...json才是目的，jsonp只是手段原生JS实现 <!...-- 通过script元素实现JSONP跨域访问利用script元素的src属性制定服务器端地址同时将制定的回调函数名称发送指定服务器 -->

1.7K3 0

动手实现一个JSONP

JSONP的原理就不细说了，就是利用script可以跨域的特点来实现跨域，首先我们考虑一个最简单的jsonp，就是简简单单创建script标签，添加url的功能，如下： function jsonp...，假设我们只是想要alert出返回的数据，如下： function msg(res) { alert(res.data); } jsonp('http://localhost:5000?...但是我们会发现这里的callback回调函数是一个全局的，这是不可取的，因此我们需要进行一些修改，将处理修改为一个局部的，我们可以将其作为一个回调函数来处理，如下： function jsonp(url...就实现了，但是我们还是会觉得少了一些什么，相信你已经看出来了，那就是错误处理。...= jsonp; })(window); 测试代码如下： jsonp('http://localhost:5000').then((res) => alert(res.data)); jsonp('

4271 0

JsonP------实现跨域请求

JsonP技术介绍 JsonP 跨域同源策略非同源限制以下行为常见的跨域场景跨域的解决方案 JsonP的优缺点 Json的使用搭建应用场景 JsonP实现手动跨域 jsonDemo1的...jsp页面(发送跨域请求) jsonDemo2的controller JsonUtils工具类(需要添加相关坐标jackson-databind) 实现自动跨域(SpringMVC对JsonP的支持)...，子域不同不允许 http://www.domain1.com/a.js http://www.domain2.com/b.js 不同域名不允许跨域的解决方案 1）通过 jsonp 跨域...的优缺点 JSONP 的优点是：它不像 XMLHttpRequest 对象实现的 Ajax 请求那样受到同源策略的限制；它的兼容性更好，在更加古老的浏览器中都可以运行，不需要 XMLHttpRequest...实现手动跨域手动实现跨域的要求 1. ajax的请求方式必须是get 2. ajax的dataType必须是jsonp 3.

1.2K1 0

JS-抽奖系统-实现原理

title.innerHTML = arr[i]; }, 30); play.className = 'play'; //更改样式直接用了一个class名字，这样js里省点代码。

8.4K4 0

Spring Boot 实现json和jsonp格式数据接口Spring boot 实现json和jsonp格式数据接口

Spring boot 实现json和jsonp格式数据接口 1.新建一个类继承AbstractJsonpResponseBodyAdvice，重写父类构造方法，传入callback和jsonp参数...JsonpAdvice extends AbstractJsonpResponseBodyAdvice { public JsonpAdvice() { super("callback", "jsonp..."); } } 2.写返回json和jsonp格式数据的Controller package com.alibaba.sinfo.h5.agent.controller import com.alibaba.fastjson.JSONObject

1K1 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭