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 數據，就不能用，可是數據仍是同樣會返回來。前端