簡單的jsonp實現跨域原理

什么原因使jsonp誕生？ 

       傳說，瀏覽器有一個很重要的安全限制，叫做"同源策略"。同源是指，域名，協議，端口相同。舉個例子，用一個瀏覽器分別打開了百度和谷歌頁面，百度頁面在執行腳本的時候就會檢查這個腳本是否屬於百度頁面，只有和百度同源的腳本才會執行，這就是同源策略。（相當於給腳本按了一個大門，只允許在大門內部活動）

       但是我們在工作中有時又會需要和不同域名的網站進行交流，由於同源策略的限制，使操作變得有些困難。jsonp是目前比較主流的跨域方式。什么是jsonp呢？我們來了解一下。

 

 jsonp和json有什么關系嗎？

       jsonp（JSON with Padding）和json很像，但卻完全不是一回事兒。json和xml有些類似，是用於存儲和表達數據的一種方式，也是javascript對象的表示。而jsonp是獲取、傳遞數據的一種方式。打個比方，在早前的飛鴿傳書，大家都知道吧？json相當於傳遞的書信，而jsonp是攜帶書信的飛鴿。這么一說，相信大家就都明白了！^_^

 

 jsonp的原理是什么？

       整體來說，jsonp實現跨域的原理是跨域的服務端把客戶端所需要的數據放進客戶端本地的一個js方法里，進行調用，客戶端在本地的js對返回的數據進行處理。這樣就實現了不同域名下的兩個站點間的交流。

       由於<script>標簽的src可以跨域，利用這一點，就有了jsonp這種非正式傳輸協議。因為有可能是多個不同站點都要訪問這個服務端，那么各個站點要調用的方法可能是各不相同的，如果把方法名寫死的話，就會很不和諧。所以解決的辦法是各個站點來訪問服務端時，在url中帶一個參數（callback）過來，服務端獲取到這個參數，就會在生成js代碼時，以這個callback參數作為方法名，再把數據放到這個方法里。這樣各個站點就可以調用各自的方法了。這也是jsonp的一個要點。

 

jsonp實現方式

 

寫一個模擬jsonp原理的一個簡單的例子

本地客戶端：

<script type="text/javascript" src="http://example.com/Index.aspx?callback=Hello"></script>

 

本地回調函數

function Hello(data){

     alert(data.result);

}

 

 

跨域服務端：

protected void Page_Load(object sender, EventArgs e)
{

     string callback=Request.QueryString["callback"];//獲取客戶端回調函數名，值為"Hello"

     Response.Write(callback+"({result:1})");  //調用客戶端指定函數,並把數據傳進去

 }