摘要：因為同源策略的限制，我們不能在與外部服務器進行通信的時候使用。這個是跨域服務器取數據的接口，參數為回調函數的名字，返回的格式為原理首先在客戶端注冊一個然后把的名字傳給服務器。

同源策略，它是由Netscape提出的一個著名的安全策略，現在所有的可支持javascript的瀏覽器都會使用這個策略。

為什么需要同源策略，這里舉個例子：

假設現在沒有同源策略，會發生什么事情呢？大家知道，JavaScript可以做很多東西，比如：讀取/修改網頁中某個值。恩，你現在打開了瀏覽器，在一 個tab窗口中打開了銀行網站，在另外一個tab窗口中打開了一個惡意網站，而那個惡意網站掛了一個的專門修改銀行信息的JavaScript，當你訪問 這個惡意網站并且執行它JavaScript時，你的銀行頁面就會被這個JavaScript修改，后果會非常嚴重！而同源策略就為了防止這種事情發生.

比如說，瀏覽器的兩個tab頁中分別打開了http://www.baidu.com/index.X19Xhtml和http: //www.google.com/index.html，其中，JavaScript1和JavaScript3是屬于百度的腳本，而 JavaScript2是屬于谷歌的腳本，當瀏覽器的tab1要運行一個腳本時，便會進行同源檢查，只有和www.baidu.com同源的腳本才能被執 行，所謂同源，就是指域名、協議、端口相同。所以，tab1只能執行JavaScript1和JavaScript3腳本，而JavaScript2不能 執行，從而防止其他網頁對本網頁的非法篡改。

JSONP（JSON with Padding）是一個非官方的協議，它允許在服務器端集成Script tags返回至客戶端，通過javascript callback的形式實現跨域訪問（這僅僅是JSONP簡單的實現形式）。

由于 JSON 只是一種含有簡單括號結構的純文本，因此許多通道都可以交換 JSON 消息。因為同源策略的限制，我們不能在與外部服務器進行通信的時候使用 XMLHttpRequest。而JSONP是一種可以繞過同源策略的方法，即通過使用 JSON 與 < script> 標記相結合的方法，從服務端直接返回可執行的JavaScript函數調用或者JavaScript對象。

其實 jsonp 是個很簡單的一個東西。主要是利用了

其中 jsonCallback 是客戶端注冊的，獲取跨域服務器上的json數據后，回調的函數。

http://crossdomain.com/jsonServerResponse?jsonp=jsonpCallback

這個 url 是跨域服務器取 json 數據的接口，參數為回調函數的名字，返回的格式為:

jsonpCallback({ msg:"this  is  json  data"})

Jsonp原理:

首先在客戶端注冊一個callback, 然后把callback的名字傳給服務器。此時，服務器先生成 json 數據。然后以 javascript 語法的方式，生成一個function , function 名字就是傳遞上來的參數 jsonp.

最后將 json 數據直接以入參的方式，放置到 function 中，這樣就生成了一段 js 語法的文檔，返回給客戶端。

客戶端瀏覽器，解析script標簽，并執行返回的javascript文檔，此時數據作為參數，傳入到了客戶端預先定義好的 callback 函數里.(動態執行回調函數) .

其實說白了，就是客戶端定義一個函數(如a），請求地址后服務器端返回的結果是調用a函數,需要的數據都放在了a函數的參數里面。

demo:

應為它用到的只是所有 HTML 元素中一個簡單的 script 元素?？吹竭@是不是覺得越發奇怪了？沒關系，繼續看下去就會茅廁（塞）頓開的，嘿嘿～來看個例子吧：
demo.html:

demo.js:

say("Hello, everyone!");

運行 demo.html 文件后，是不是看到寫著“Hello, everyone!”的警告框了？你可能會覺得這個例子很簡單，沒什么了不起的，甚至會在想：這和 JSONP 有關系嗎？那么，我可以很肯定的告訴你：有關系！而且，這個例子實際上就是 JSONP 的原型！你也許會想到，JSONP 不是訪問遠程數據的嗎？對，試想一下，如果 demo.js 文件在其它域的服務器上呢？結果會不會出現問題？我也可以很負責的告訴你：不會！你可以將上面例子中的 demo.js 更改為：http://demo.hpyer.cn/php/jsonp.php?callback=say 再試一下。
現在，聰明的你應該已經明白 JSONP 到底是怎么回事了，那么，再來解釋一下本節開頭第一句話吧?？催^ demo.js 文件的內容，應該知道，其只是對一個函數（通常稱之為：回調函數）的調用，而需要交互的數據則通過參數形勢進行返回。所以通過 JSONP 訪問的服務器需要提供一個可以設置回調函數名的接口，就像 http://demo.hpyer.cn/php/jsonp.php?callback=say 中的 callback，所以，綜上所述 JSONP 是需要服務器端的支持的。附上 jsonp.php 的源碼：

jquery 中的應用:

 自 1.2 版本起，jQuery 加入了對 JSONP 的支持。我們可以很容易的利用 $.getJSON() 方法（或者其它基于 $.ajax() 的方法），來跨域加載 JSON 數據。來個例子吧：










Click me






你可能注意到上面的例子中，url 被寫成了 http://demo.hpyer.cn/php/jsonp.php?type=json&callback=?，需要說明的是，這個問號會被 jQuery 自動替換為回調函數的函數名（如果是一個匿名函數，jQuery 會自動生成一個帶時間戳的函數名）。

看我在項目中的一個例子：

//定義Ajax函數
function ajaxFun() {
    var timeStamp = Math.floor(new Date().getTime() / 1000);
    var url = "http://apiso.alidemo.3gpp.cn/httpserver/cp/yisou/ali_feedback_interface.php?callback=jsonpCallback&feedbacktype=add&type=" + feedbackNumber + "&book=" + me.mixedInfo.title + "&author=" + me.mixedInfo.author + "&chapter=" + me.mixedInfo.cname + "&chapterid=" + me.mixedInfo.cid + "&questiondesc=" + text + "&platform=1&t=" + timeStamp + "&sn=" + md5("d30fcd1a9f1900fa049b4766e0a275e1" + timeStamp);
    var scriptObj = document.createElement("script");
    scriptObj.src = url;
    scriptObj.id = "jsonpScript";
    document.body.appendChild(scriptObj);
    //jsonp回調函數，jsonpCallback必須為全局函數，因為jsonp返回的是在全局環境中執行函數的語句，即jsonpCallback(data)
    window.jsonpCallback = function(data) {
        switch (data.code) {
            case "1":
                novel.readerPrompt("提交成功，即將返回……", 1, function() {
                    window.history.go(-1);
                });
                break;
            case "0":
                novel.readerPrompt("提交失敗。", 2);
                break;
            case "900":
                novel.readerPrompt("提交失敗，驗證失敗。", 2);
                break;
        }
        //成功后刪除scriptObj，后面的setTimeout就不會執行了
        if (document.getElementById("jsonpScript")) {
            document.body.removeChild(scriptObj);
        }
    }
    //設置超時，超時的話直接顯示提交成功
    setTimeout(function() {
        if (document.getElementById("jsonpScript")) {
            document.body.removeChild(scriptObj);
            novel.readerPrompt("提交成功，即將返回……", 1, function() {
                window.history.go(-1);
            });
        }
    }, 2000);
}
ajaxFun();


via WEB前端開發