摘要：因?yàn)橥床呗缘南拗?，我們不能在與外部服務(wù)器進(jìn)行通信的時(shí)候使用。這個(gè)是跨域服務(wù)器取數(shù)據(jù)的接口，參數(shù)為回調(diào)函數(shù)的名字，返回的格式為原理首先在客戶端注冊(cè)一個(gè)然后把的名字傳給服務(wù)器。

同源策略，它是由Netscape提出的一個(gè)著名的安全策略，現(xiàn)在所有的可支持javascript的瀏覽器都會(huì)使用這個(gè)策略。

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

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

比如說(shuō)，瀏覽器的兩個(gè)tab頁(yè)中分別打開(kāi)了http://www.baidu.com/index.X19Xhtml和http: //www.google.com/index.html，其中，JavaScript1和JavaScript3是屬于百度的腳本，而 JavaScript2是屬于谷歌的腳本，當(dāng)瀏覽器的tab1要運(yùn)行一個(gè)腳本時(shí)，便會(huì)進(jìn)行同源檢查，只有和www.baidu.com同源的腳本才能被執(zhí) 行，所謂同源，就是指域名、協(xié)議、端口相同。所以，tab1只能執(zhí)行JavaScript1和JavaScript3腳本，而JavaScript2不能 執(zhí)行，從而防止其他網(wǎng)頁(yè)對(duì)本網(wǎng)頁(yè)的非法篡改。

JSONP（JSON with Padding）是一個(gè)非官方的協(xié)議，它允許在服務(wù)器端集成Script tags返回至客戶端，通過(guò)javascript callback的形式實(shí)現(xiàn)跨域訪問(wèn)（這僅僅是JSONP簡(jiǎn)單的實(shí)現(xiàn)形式）。

由于 JSON 只是一種含有簡(jiǎn)單括號(hào)結(jié)構(gòu)的純文本，因此許多通道都可以交換 JSON 消息。因?yàn)橥床呗缘南拗?，我們不能在與外部服務(wù)器進(jìn)行通信的時(shí)候使用 XMLHttpRequest。而JSONP是一種可以繞過(guò)同源策略的方法，即通過(guò)使用 JSON 與 < script> 標(biāo)記相結(jié)合的方法，從服務(wù)端直接返回可執(zhí)行的JavaScript函數(shù)調(diào)用或者JavaScript對(duì)象。

其實(shí) jsonp 是個(gè)很簡(jiǎn)單的一個(gè)東西。主要是利用了

其中 jsonCallback 是客戶端注冊(cè)的，獲取跨域服務(wù)器上的json數(shù)據(jù)后，回調(diào)的函數(shù)。

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

這個(gè) url 是跨域服務(wù)器取 json 數(shù)據(jù)的接口，參數(shù)為回調(diào)函數(shù)的名字，返回的格式為:

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

Jsonp原理:

首先在客戶端注冊(cè)一個(gè)callback, 然后把callback的名字傳給服務(wù)器。此時(shí)，服務(wù)器先生成 json 數(shù)據(jù)。然后以 javascript 語(yǔ)法的方式，生成一個(gè)function , function 名字就是傳遞上來(lái)的參數(shù) jsonp.

最后將 json 數(shù)據(jù)直接以入?yún)⒌姆绞剑胖玫?function 中，這樣就生成了一段 js 語(yǔ)法的文檔，返回給客戶端。

客戶端瀏覽器，解析script標(biāo)簽，并執(zhí)行返回的javascript文檔，此時(shí)數(shù)據(jù)作為參數(shù)，傳入到了客戶端預(yù)先定義好的 callback 函數(shù)里.(動(dòng)態(tài)執(zhí)行回調(diào)函數(shù)) .

其實(shí)說(shuō)白了，就是客戶端定義一個(gè)函數(shù)(如a），請(qǐng)求地址后服務(wù)器端返回的結(jié)果是調(diào)用a函數(shù),需要的數(shù)據(jù)都放在了a函數(shù)的參數(shù)里面。

demo:

應(yīng)為它用到的只是所有 HTML 元素中一個(gè)簡(jiǎn)單的 script 元素?？吹竭@是不是覺(jué)得越發(fā)奇怪了？沒(méi)關(guān)系，繼續(xù)看下去就會(huì)茅廁（塞）頓開(kāi)的，嘿嘿～來(lái)看個(gè)例子吧：
demo.html:

demo.js:

say("Hello, everyone!");

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

jquery 中的應(yīng)用:

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










Click me






你可能注意到上面的例子中，url 被寫(xiě)成了 http://demo.hpyer.cn/php/jsonp.php?type=json&callback=?，需要說(shuō)明的是，這個(gè)問(wèn)號(hào)會(huì)被 jQuery 自動(dòng)替換為回調(diào)函數(shù)的函數(shù)名（如果是一個(gè)匿名函數(shù)，jQuery 會(huì)自動(dòng)生成一個(gè)帶時(shí)間戳的函數(shù)名）。

看我在項(xiàng)目中的一個(gè)例子：

//定義Ajax函數(shù)
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回調(diào)函數(shù)，jsonpCallback必須為全局函數(shù)，因?yàn)閖sonp返回的是在全局環(huán)境中執(zhí)行函數(shù)的語(yǔ)句，即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("提交失敗，驗(yàn)證失敗。", 2);
                break;
        }
        //成功后刪除scriptObj，后面的setTimeout就不會(huì)執(zhí)行了
        if (document.getElementById("jsonpScript")) {
            document.body.removeChild(scriptObj);
        }
    }
    //設(shè)置超時(shí)，超時(shí)的話直接顯示提交成功
    setTimeout(function() {
        if (document.getElementById("jsonpScript")) {
            document.body.removeChild(scriptObj);
            novel.readerPrompt("提交成功，即將返回……", 1, function() {
                window.history.go(-1);
            });
        }
    }, 2000);
}
ajaxFun();


via WEB前端開(kāi)發(fā)