詳細分析jsonp的原理和實現方式

針對跨域問題，本文主要給大家詳細分析一下jsonp的原理，希望能夠給你提供到幫助。

詳細分析jsonp的原理和實現方式

一：跨域問題。

二，跨域產生的原因

Js是不能跨域請求。出于安全考慮，js設計時不可以跨域。

什么是跨域：

1、域名不同時。

2、域名相同，端口不同。

只有域名相同、端口相同時，才可以訪問。

可以使用jsonp解決跨域問題。

三，跨域失敗的案例 3.1，同源策略

首先基于安全的原因，瀏覽器是存在同源策略這個機制的，同源策略阻止從一個源加載的文檔或腳本獲取或設置另一個源加載的文檔的屬性。看起來不知道什么意思，實踐一下就知道了。

3.2，隨便建兩個網頁

一個端口是2698，一個2701，按照定義它們是不同源的。

3.3，用jQuery發起不同源的請求

在2698端口的網頁上添加一個按鈕，Click事件隨便發起兩個向端口為2701域的請求。

$("#getOtherDomainThings").click(function () {
$.get("http://localhost:2701/Scripts/jquery-1.4.4.min.js", function (data) {
console.log(data)
})

$.get("http://localhost:2701/home/index", function (data) {
console.log(data)
})
})

根據同源策略，很明顯會悲劇了。瀏覽器會阻止，根本不會發起這個請求。（not allowed by Access-Control-Allow-Origin）

OK，原來jsonp是要解決這個問題的。

換句話就是說在一個src中或者一個url中直接去請求了另一個項目的json數據。

例如在端口是8080的項目中的頁面的url中直接去請求了一個http://localhost:8081/category.json這個語句，而這個category.json就在8081的webapp的目錄下，就會產生跨域請求的提示。

四，跨域的解決方法 4.1，啟發

我們有時候在項目中經常能看到這樣的代碼

<script type="text/javascript" src="https://com/seashell/weixin/js/jquery.js"></script>

這樣即使不在同一個項目中，也可以請求成功。就是利用了這個漏洞，或者說是技術吧，來實現的寬裕的請求。

4.2，方法（案例一） 4.2.1，利用script獲取不同源的json

既然它叫jsonp，很明顯目的還是json，而且是跨域獲取。根據上面的分析，很容易想到：利用js構造一個script標簽，把json的url賦給script的scr屬性，把這個script插入到dom里，讓瀏覽器去獲取。實踐：

function CreateScript(src) {
 $("<script><//script>").attr("src", src).appendTo("body")
}

添加一個按鈕事件來測試一下：

$("#getOtherDomainJson").click(function () {
 $.get('http://localhost:2701/home/somejson', function (data) {
 console.log(data)
 })
})

首先，第一個瀏覽器，http://localhost:2701/home/somejson這個Url的確是存在一個json的，而且在 2698網頁上用script標簽來請求這個2701這個Url也是200OK的，但是最下面報js語法錯誤了。原來用script標簽加載完后，會立即 把響應當js去執行，很明顯{"Email":"zhww@outlook.com","Remark":"我來自遙遠的東方"}不是合法的js語句。

4.2.2,利用script獲取異域的jsonp

顯然，把上面的json放到一個回調方法里是最簡單的方法。例如，變成這樣：

如果存在jsonpcallback這個方法，那么jsonpcallback({"Email":"zhww@outlook.com","Remark":"我來自遙遠的東方"})就是合法的js語句。

在這里需要注意的就是在原來的json格式的數據{"Email":"zhww@outlook.com","Remark":"我來自遙遠的東方"}要封裝成jsonpcallback({"Email":"zhww@outlook.com","Remark":"我來自遙遠的東方"})這樣一個腳本，這樣才會被回調的時候解析到，否則解析也是失敗的。

由于服務器不知道客戶端的回調是什么，不可能hard code成jsonpcallback，所以就帶一個QueryString讓客戶端告訴服務端，回調方法是什么，當然，QueryString的key要遵從服務端的約定，上面的是”callback“。

添加回調函數：

function jsonpcallback(json) {
 console.log(json)
}

把前面的方法稍微改改參數：

$("#getJsonpByHand").click(function () {
 CreateScript("http://localhost:2701/home/somejsonp?callback=jsonpcallback")
})

200OK，服務器返回jsonpcallback({"Email":"zhww@outlook.com","Remark":"我來自遙遠的 東方"})，我們也寫了jsonpcallback方法，當然會執行。OK順利獲得了json。沒錯，到這里就是jsonp的全部。

4.2.3，利用jQuery獲取jsonp

上面的方式中，又要插入script標簽，又要定義一個回調，略顯麻煩，利用jQuery可以直接得到想要的json數據，同樣是上面的jsonp：

$("#getJsonpByJquery").click(function () {
$.ajax({
url: 'http://localhost:2701/home/somejsonp',
dataType: "jsonp",
jsonp: "callback",
success: function (data) {
console.log(data)
}
})
})

得到的結果跟上面類似。

4.2.4，總結

一句話就是利用script標簽繞過同源策略，獲得一個類似這樣的數據，jsonpcallback是頁面存在的回調方法，參數就是想得到的json。

jsonpcallback({"Email":"zhww@outlook.com","Remark":"我來自遙遠的東方"})

4.3，案例二 4.3.1，簡單應用

程序A中sample的部分代碼：

<script type="text/javascript">
//回調函數
function callback(data) {
alert(data.message);
}
</script>
<script type="text/javascript" src="http://localhost:20002/test.js"></script>

程序B中test.js的代碼：
1 //調用callback函數，并以json數據形式作為闡述傳遞，完成回調
2 callback({message:"success"});
這其實就是JSONP的簡單實現模式，或者說是JSONP的原型：創建一個回調函數，然后在遠程服務上調用這個函數并且將JSON 數據形式作為參數傳遞，完成回調。

將JSON數據填充進回調函數，這就是JSONP的JSON+Padding的含義吧。

一般情況下，我們希望這個script標簽能夠動態的調用，而不是像上面因為固定在html里面所以沒等頁面顯示就執行了，很不靈活。我們可以通過javascript動態的創建script標簽，這樣我們就可以靈活調用遠程服務了。

4.3.2，簡單應用的升級以一

程序A中sample的部分代碼：

<script type="text/javascript">
function callback(data) {
alert(data.message);
}
//添加<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://localhost:20002/test.js");
}
</script>

程序B的test.js代碼不變，我們再執行下程序，是不是和原來的一樣呢。如果我們再想調用一個遠程服務的話，只要添加addScriptTag方法，傳入遠程服務的src值就可以了。這里說明下為什么要將addScriptTag方法放入到window.onload的方法里，原因是addScriptTag方法中有句document.body.appendChild(script);，這個script標簽是被添加到body里的，由于我們寫的javascript代碼是在head標簽中，document.body還沒有初始化完畢呢，所以我們要通過window.onload方法先初始化頁面，這樣才不會出錯。

這樣這個http://localhost:20002/test.js路徑就可以動態的變化了。

4.3.3，簡單應用的升級二

上面的例子是最簡單的JSONP的實現模型，不過它還算不上一個真正的JSONP服務。我們來看一下真正的JSONP服務是怎么樣的，比如Google的ajax搜索接口：http://ajax.googleapis.com/ajax/services/search/web?v=1.0&q=?&callback=?

q=?這個問號是表示你要搜索的內容，最重要的是第二個callback=?這個是正如其名表示回調函數的名稱，也就是將你自己在客戶端定義的回調函數的函數名傳送給服務端，服務端則會返回以你定義的回調函數名的方法，將獲取的json數據傳入這個方法完成回調。有點羅嗦了，還是看看實現代碼吧：

<script type="text/javascript">//添加<script>標簽的方法function addScriptTag(src){ var script = document.createElement('script');script.setAttribute("type","text/javascript");script.src = src;document.body.appendChild(script);}window.onload = function(){//搜索apple，將自定義的回調函數名result傳入callback參數中addScriptTag("http://ajax.googleapis.com/ajax/services/search/web?v=1.0&q=apple&callback=result");}//自定義的回調函數resultfunction result(data) {//我們就簡單的獲取apple搜索結果的第一條記錄中url數據alert(data.responseData.results[0].unescapedUrl);}</script>

這個result方法是自己定義的，可能服務器上有千千萬萬個類似于result 的回調函數，但是我現在要的就是result而不是其它的方法，所以在這里自己定義回調方法。而不是寫死的。可能下一次我就改成result1，result2，result3，等了只要自己把回調方法的名稱改一下就行了。

4.4.4,jquery對jsonp的支持

jQuery框架也當然支持JSONP，可以使用$.getJSON(url,[data],[callback])方法(詳細可以參考http://api.jquery.com/jQuery.getJSON/)。那我們就來修改下程序A的代碼，改用jQuery的getJSON方法來實現(下面的例子沒用用到向服務傳參，所以只寫了getJSON(url,[callback]))：

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
 $.getJSON("http://localhost:20002/MyService.ashx?callback=?",function(data){
 alert(data.name + " is a a" + data.sex);
 });
</script>

結果是一樣的，要注意的是在url的后面必須添加一個callback參數，這樣getJSON方法才會知道是用JSONP方式去訪問服務，callback后面的那個問號是內部自動生成的一個回調函數名。這個函數名大家可以debug一下看看，比如jQuery17207481773362960666_1332575486681。

當然，加入說我們想指定自己的回調函數名，或者說服務上規定了固定回調函數名該怎么辦呢？我們可以使用$.ajax方法來實現(參數較多，詳細可以參考http://api.jquery.com/jQuery.ajax)。先來看看如何實現吧：

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
 $.ajax({
 url:"http://localhost:20002/MyService.ashx?callback=?", 
 dataType:"jsonp",
 jsonpCallback:"person",
 success:function(data){
 alert(data.name + " is a a" + data.sex);
 }
 });
</script>

沒錯，jsonpCallback就是可以指定我們自己的回調方法名person，遠程服務接受callback參數的值就不再是自動生成的回調名，而是person。dataType是指定按照JSOPN方式訪問遠程服務。

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com