jsonp 实现原理及代码解析

时间 2019-11-05

标签 jsonp 实现原理代码解析栏目 JSON 繁體版

原文原文链接

前端代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jsonp 的使用</title>
    <script src="//cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
</head>
<body>
<div id="test"></div>
<script>
    $.ajax({
        url: "http://169.254.217.223:3000/",
        type: "post",
        dataType : "jsonp",
        contentType: "application/json",
        jsonp: "callback",//传递给请求处理程序或页面的，用以得到jsonp回调函数名的参数名(通常默认为:callback)
        jsonpCallback:"jsonpCallback",//自定义的jsonp回调函数名称，默认为jQuery自动生成的随机函数名，也能够写"?"，jQuery会自动为你处理数据
        success: function (data) {
            $("#test").text(JSON.stringify(data));
        },
        error: function () {
        }
    });
</script>
</body>
</html>

后台代码

须要本地有 nodejs 环境，以及安装 express 包 npm install express --savecss

var express = require('express');

var app = express();

app.get('/', function (req, res) {
    var callback = req.query.callback; //这里的callback 就是上面 jsonp: "callback" 定义的名称
    res.send(callback + '({"data": "test", "test": "data"})');
});

app.listen(3000, function () {
    console.log('app is listening at port 3000');
});

实现原理

先来看看用js 实现 jsonp 的代码html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js 实现jsonp </title>
    <script src="//cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
</head>
<body>
<div id="test"></div>
<script>

        function jsonpCallback(data) {
            $("#test").text(JSON.stringify(data));
        }

        var scriptStr = '<script src="http://127.0.0.1:3000/?callback=jsonpCallback"><\/script>';
        $("body").after(scriptStr);
</script>

</body>
</html>

从代码能够看出来，要实现 jsonp 只是多定义了一个回调函数 jsonpCallback，再把jsonp请求的url 改成了用script src 请求的方法。
总结得出jsonp 实现原理是：由于script 标签是不受同源策略约束的，因此只要把请求写在src 中，就能够获得你要的 json 数据，可是经过这种方式得到的若是只是 json 数据，就不能用，可是数据仍是同样会返回来。前端

若是后台要返回一个回调函数包裹的字符串，在前端定义好该回调函数的方法，就能在回调函数中获取到后台返回的数据了。node

返回来后会执行 jsonpCallBack 方法，并把数据做为参数传到 jsonpCallBack 方法执行。jquery

jsonp 实现原理及代码解析

前端代码

后台代码

实现原理

常见问题