jsonp跨域處理（附demo代碼）

jsonp,ajax跨域請求

<a href="http://s3.51cto.com/wyfs02/M01/6E/CB/wKioL1WIwJfRND4NAAI_j8DDv9A930.jpg" target="_blank"></a>

1、一個衆所周知的問題，Ajax直接請求普通檔案存在跨域無權限通路的問題，甭管你是靜态頁面、動态網頁、web服務、WCF，隻要是跨域請求，一律不準；

2、不過我們又發現，Web頁面上調用js檔案時則不受是否跨域的影響（不僅如此，我們還發現凡是擁有"src"這個屬性的标簽都擁有跨域的能力，比如&lt;script&gt;、&lt;img&gt;、&lt;iframe&gt;）；

3、于是可以判斷，目前階段如果想通過純web端（ActiveX控件、服務端代理、屬于未來的HTML5之Websocket等方式不算）跨域通路資料就隻有一種可能，那就是在遠端伺服器上設法把資料裝進js格式的檔案裡，供用戶端調用和進一步處理；

4、恰巧我們已經知道有一種叫做JSON的純字元資料格式可以簡潔的描述複雜資料，更妙的是JSON還被js原生支援，是以在用戶端幾乎可以随心所欲的處理這種格式的資料；

5、這樣子解決方案就呼之欲出了，web用戶端通過與調用腳本一模一樣的方式，來調用跨域伺服器上動态生成的js格式檔案（一般以JSON為字尾），顯而易見，伺服器之是以要動态生成JSON檔案，目的就在于把用戶端需要的資料裝入進去。

6、用戶端在對JSON檔案調用成功之後，也就獲得了自己所需的資料，剩下的就是按照自己需求進行處理和展現了，這種擷取遠端資料的方式看起來非常像AJAX，但其實并不一樣。

7、為了便于用戶端使用資料，逐漸形成了一種非正式傳輸協定，人們把它稱作JSONP，該協定的一個要點就是允許使用者傳遞一個callback參數給服務端，然後服務端傳回資料時會将這個callback參數作為函數名來包裹住JSON資料，這樣用戶端就可以随意定制自己的函數來自動處理傳回資料了。

jsonp跨域實作代碼如下：

客服端：

<a href="http://s3.51cto.com/wyfs02/M01/6E/CE/wKiom1WIvzey7w83AAK3IYtbOuw259.jpg" target="_blank"></a>

服務端：

<a href="http://s3.51cto.com/wyfs02/M01/6E/CB/wKioL1WIwQnxVNKoAADozKXYfoI685.jpg" target="_blank"></a>

運作結果截圖：

<a href="http://s3.51cto.com/wyfs02/M00/6E/CB/wKioL1WIwSmxdMDtAAEDfY5KAVA387.jpg" target="_blank"></a>

demo代碼下載下傳位址：

<a href="http://down.51cto.com/data/2062572" target="_blank">http://down.51cto.com/data/2062572</a>

   本文轉自許琴 51CTO部落格，原文連結：http://blog.51cto.com/xuqin/1664295，如需轉載請自行聯系原作者