簡單的jsonp實現跨域原理

【轉】簡單的jsonp實現跨域原理

什麼緣由使jsonp誕生？ javascript

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

可是咱們在工做中有時又會須要和不一樣域名的網站進行交流，因爲同源策略的限制，使操做變得有些困難。jsonp是目前比較主流的跨域方式。什麼是jsonp呢？咱們來了解一下。java

jsonp和json有什麼關係嗎？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實現方式post

寫一個模擬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})");  //調用客戶端指定函數,並把數據傳進去

 }