jsonp跨域原理(JSONP跨域的原理是什么)

JSONP是一個非官方的協議,它允許在服務器端集成script tags返回至客戶端,通過javascript callback的形式實現跨域訪問(這僅僅是JSONP簡單的實現形式)。JSON系統開發方法是一種典型的面向數據結構的分析和設計方法,以活動為中心,一連串的活動的順序組合成一個完整的工作進程。

之所以會有跨域這個問題的產生根本原因是瀏覽器的同源策略限制,理解同源策略的限制同源策略是指阻止代碼獲得或者更改從另一個域名下獲得的文件或者信息。也就是說我們的請求地址必須和當前網站的地指相同。同源策略通過隔離來實現對資源的保護。這個策略的歷史非常悠久從Netscape Navigator 2.0時代就開始了。

解決這個限制的一個相對簡單的辦法就是在服務器端發送請求,服務器充當一個到達第三方資源的代理中繼。雖然是用廣泛但是這個方法卻不夠靈活。

另一個辦法就是使用框架(frames),將第三方站點的資源包含進來,但是包含進來的資源同樣要受到同源策略的限制。

有一個很巧妙的辦法就是在頁面中使用動態代碼元素,代碼的源指向服務地址并在自己的代碼中加載數據。當這些代碼加載執行的時候,同源策略就不會起到限制。但是如果代碼試圖下載文件的時候執行還是會失敗,幸運的是,我們可以使用JSON(JavaScript Object Notation)來改進這個應用。

JSON和JSONP

與XML相比,JSON是一個輕量級的數據交換格式。JSON對于JavaScript開發人員充滿魅力的原因在于JSON本身就是Javascript中的對象。

例如一個ticker對象

var ticker = {symbol:'IBM',price:100}

而JSON串就是 {symbol:'IBM',price:100}

這樣我們就可以在函數的參數中傳遞JSON數據。我們很容易掌握在函數中使用動態的JSON參數數據,但是我們的目的并不是這個。

通過使我們的函數能夠加載動態的JSON數據,我們就能夠處理動態的數據,這項技術叫做 Dynamic Javascript Insertion。

我們看下面的例子:

index.html中

<scripttype="text/javascript">functionshowPrice(data){alert("Symbol:"+data.symbol+",Price:"+data.price);}varurl="ticker.js";//OuterJSURLvarscript=document.createElement('script');script.setAttribute('src',url);//loadjavascriptdocument.getElementsByTagName('head')[0].appendChild(script);</script>ticker.js中vardata={symbol:'IBM',price:100};showPrice(data);

上面的代碼通過動態加入Javascript代碼,來執行函數加載數據。

正如之前提到過的,同源策略對于動態插入的代碼不適用。也就是你可以從不同的域中加載代碼,來執行在他們代碼中的JSON數據。

這就是JSONP(JSON with Padding)。注意,使用這種方法時,你必須在頁面中定義回調函數,就像上例中的showPrice一樣。

我們通常所說的JSONP服務(遠程JSON服務),實際上就是一種擴展的支持在用戶定義函數中包含返回數據的能力。這種方法依賴于必須接受一個回調函數的名字作為參數。

然后執行這個函數,處理JSON數據,并顯示在客戶頁面上。

JQuery的JSONP支持

從JQery 1.2以后,就開始支持JSONP的調用。在另外的一個域名中指定好回調函數名稱,你就可以用下面的形式來就加載JSON數據。

url?callback=?

示例:

jQuery.getJSON(url+"&callbak=?",function(data){alert("Symbol:"+data.symbol+",Price:"+data.price);});

jquery會在window對象中加載一個全局的函數,當代碼插入時函數執行,執行完畢后就會被移除。同時jquery還對非跨域的請求進行了優化,如果這個請求是在同一個域名下那么他就會像正常的Ajax請求一樣工作。

上例中我們在動態插入到頁面的代碼中使用了靜態的json數據,雖然完成了依次JSONP返回,但仍不是JSONP服務,因為不支持在URL中定義回調函數名稱。下面是一個將其變成JSONP服務的一個方法

服務器端使用PHP。

首先我們來定義接口的規范,就像這樣:http://www.mydomain.com/jsonp/ticker?symbol=IBM&callback=showPrice
symbol是請求條件,callback是回調函數名稱。

在頁面文件中,我們使用JQuery的支持:

//JQueryJSONPSupportvarurl="http://www.mydomain.com/api/suggest.php?symbol=IBM&callback=?";jQuery.getJSON(url,function(data){alert("Symbol:"+data.symbol+",Price:"+data.price);});

在suggest.php中

$jsondata="{symbol:'IBM',price:120}";echo$_GET['callback'].'('.$jsondata.')';

再舉個.NET webservice 的例子

客戶端

$.getJSON("http://192.168.0.66/services/WebService1.asmx/ws?callback=?",{name:"ff",time:"2pm"},function(data){alert(decodeURI(data.msg))});

服務器端

[WebMethod]publicvoidws(stringname,stringtime){HttpRequestRequest=HttpContext.Current.Request;stringcallback=Request["callback"];HttpResponseResponse=HttpContext.Current.Response;Response.Write(callback+"({msg:'thisis"+name+"jsonp'})");Response.End();}

現在,如果我們想制作一些mashup,或者將第三方的資源整合到一個頁面中,我們就很容易想到JSONP的解決方法了。

注意:

JSONP是一個非常強大的構建mashp的方法,可是不是一個解決跨域訪問問題的***藥。它也有一些缺點:

***也是最重要的:JSONP不提供錯誤處理。如果動態插入的代碼正常運行,你可以得到返回,但是如果失敗了,那么什么都不會發生。你無法獲得一個404的錯誤,也不能取消這個請求。

另外一個重要的缺點是如果使用了不信任的服務會造成很大的安全隱患。

關于JSONP跨域的原理是什么就分享到這里了,希望以上內容可以對大家有一定的幫助,可以學到更多知識。如果覺得文章不錯,可以把它分享出去讓更多的人看到。