JSONP跨域原理和jQuery.getJSON用法

    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中

<script type="text/javascript">  
function showPrice(data){  
alert("Symbol:" + data.symbol + ", Price:" + data.price);  
}  
var url = "ticker.js"; //Outer JS URL  
var script = document.createElement('script');  
script.setAttribute('src', url);  
//load javascript  
document.getElementsByTagName('head')[0].appendChild(script);  
</script>  
ticker.js中  
var data = {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的支持：

//JQuery JSONP Support  
var url = "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]  
public void ws(string name,string time) {  
HttpRequest Request = HttpContext.Current.Request;  
string callback = Request["callback"];  
HttpResponse Response = HttpContext.Current.Response;  
Response.Write(callback + "({msg:'this is"+name+"jsonp'})");  
Response.End();  
} 

    如今，若是咱們想製做一些mashup，或者將第三方的資源整合到一個頁面中，咱們就很容易想到JSONP的解決方法了。

    注意：

    JSONP是一個很是強大的構建mashp的方法，但是不是一個解決跨域訪問問題的萬能藥。它也有一些缺點：

    第一也是最重要的：JSONP不提供錯誤處理。若是動態插入的代碼正常運行，你能夠獲得返回，可是若是失敗了，那麼什麼都不會發生。你沒法得到一個404的錯誤，也不能取消這個請求。

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