原生js实现JSONP

最新推荐文章于 2024-09-12 13:23:45 发布

mannuandeyangguang

最新推荐文章于 2024-09-12 13:23:45 发布

阅读量4k

点赞数 5

分类专栏：前端开发文章标签： jsonp

本文链接：https://blog.youkuaiyun.com/wujunlei1595848/article/details/94124893

版权

前端开发专栏收录该内容

73 篇文章

订阅专栏

JSONP是一种跨域请求技术，通过动态创建`<script>`标签利用其可跨域特性来实现。请求时，回调函数名作为参数传递给服务端，服务器返回一个JavaScript函数调用形式的响应，浏览器执行这个函数并传递回数据。本文详细介绍了JSONP的工作流程，包括服务端和前端的实现代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

介绍

JSONP是JSON with Padding(填充式JSON或参数式JSON)的简写，是一种非常常用的跨域请求方式。主要原理是利用了script 标签可以跨域请求的特性，由其 src属性发送请求到服务器，服务器返回 JavaScript 代码，浏览器接受响应，然后就直接执行了，这和通过 script 标签引用外部文件的原理是一样的。

JSONP由两部分组成：回调函数和数据，回调函数是当响应到来时应该在页面中调用的函数，回调函数的名字一般在请求中指定。当服务器响应时，服务器端就会把该函数和数据拼成字符串返回。

JSONP的请求过程

请求阶段：浏览器创建一个 script 标签，并给其src 赋值(类似 http://example.com/api/?callback=jsonpCallback）。
发送请求：当给script的src赋值时，浏览器就会发起一个请求。
数据响应：服务端将要返回的数据作为参数和函数名称拼接在一起(格式类似”jsonpCallback({name: 'abc'})”)返回。当浏览器接收到了响应数据，由于发起请求的是 script，所以相当于直接调用 jsonpCallback 方法，并且传入了一个参数。

服务端交互示意图

server1代码(Nodejs实现)

var Koa = require('koa');
var Router = require('koa-router');
var querystring = require('querystring');
var app = new Koa();
var router = new Router();

//处理get请求
router.get('/get', async function(ctx){
    var params = querystring.parse(ctx.request.url.split('?')[1]);
    var data = { message: "我是" + ctx.request.header.host + "，我收到了你的get请求！！！" }
    ctx.status=200;
    ctx.body=params['callback']+'('+JSON.stringify(data)+');';
});

app
    .use(router.routes())
    .use(router.allowedMethods())

app.listen(3000);

server2代码

var Koa = require('koa');
var Router = require('koa-router');
var render = require('koa-art-template');
var path = require('path');

var app = new Koa();
var router = new Router();

//配置模板引擎
render(app, {
    root: path.join(__dirname, 'views'),
    extname: '.html',
    debug: process.env.NODE_ENV !== 'production',
});

router.get('/index.html', async function (ctx) {
    await ctx.render('server2');
});

app.use(router.routes()).use(router.allowedMethods());
app.listen(4000);

前端代码

<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <title>原生js实现</title>
</head>

<body>
    <div><button>点击我发送get请求</button></div>
    <!-- <script>
        function jsonpcallback(response){
            alert(response.message);
        }
    </script>
    <script src="http://127.0.0.1:3000/get?callback=jsonpcallback" type="text/javascript"></script> -->
</body>
<script>
    document.getElementsByTagName('button')[0].addEventListener('click', function () {
        ajax('http://127.0.0.1:3000/get', function(response){
            alert(response.message);
        });
    });
    function ajax(url, callback){
        var jsonp=document.createElement('script');
        jsonp.type = 'text/javascript';
        jsonp.src=url+'?callback=jsonpcallback';
        jsonpcallback = function(response){
            callback(response);
        };
        document.getElementsByTagName('head')[0].appendChild(jsonp);
    }
</script>

</html>

分析

其实上述过程可以总结为：

function jsonpcallback(response){
    alert(response.message);
}
jsonpcallback({"message":"我是127.0.0.1:3000，我收到了你的get请求！！！"});