JSONP 原理和使用

JSONP是服務器與客戶端跨源通訊的經常使用方法。最大特色就是簡單適用，老式瀏覽器所有支持，服務器改造很是小。

它的基本思想是，網頁經過添加一個<script>元素，向服務器請求JSON數據，這種作法不受同源政策限制；服務器收到請求後，將數據放在一個指定名字的回調函數裏傳回來。

首先，網頁動態插入<script>元素，由它向跨源網址發出請求。

function addScriptTag(src) {
     var script = document.createElement('script');
     script.setAttribute("type", "text/javascript");
     script.src = src;
     document.body.appendChild(script);
 }
window.onload = function () {
    addScriptTag('http://127.0.0.1:3000?callback=foo');
}
function foo(data) {
    // 獲取用戶信息- 姓名：王小二 年齡：30
    console.log("獲取用戶信息- 姓名：" + data.name + " 年齡：" + data.age);
};

上面代碼經過動態添加<script>元素，向服務器example.com發出請求。注意，該請求的查詢字符串有一個callback參數，用來指定回調函數的名字，這對於JSONP是必需的。

服務器收到這個請求之後，會將數據放在回調函數的參數位置返回。

nodejs 服務端代碼爲例：

const http = require('http');
const querystring  = require('querystring');
 http.createServer(function(req,res){
    let params = querystring.parse(req.url.replace(/\/?\?/, ""));
    let data = {"name": "王小二", "age": 30};
    res.writeHead(200, {"Content-Type":"application/json;charset=utf-8"});
    res.end(params.callback + "("+JSON.stringify(data)+")");
}).listen(3000);

因爲<script>元素請求的腳本，直接做爲代碼運行。這時，只要瀏覽器定義了foo函數，該函數就會當即調用。做爲參數的 JSON 數據被視爲JavaScript對象，而不是字符串，所以避免了使用JSON.parse的步驟。