為什么會有JSONP？因為我們使用AJAX，使用AJAX可能就會遇到跨域的需求，如何解決呢，對，就是JSONP。

　　這里注意下JSON和JSONP不是一類，雖然他們只是一個字母只差，但是實際差別很大。這里簡單介紹下：

• 　　JSON：JSON（JavaScript Object Notation）是一種基于文本的數據交換方式，或者叫做數據描述格式。

  • JSON的優點：

    　　1、基于純文本，跨平臺傳遞極其簡單；

    　　2、Javascript原生支持，后臺語言幾乎全部支持；

    　　3、輕量級數據格式，占用字符數量極少，特別適合互聯網傳遞；

    　　4、可讀性較強，雖然比不上XML那么一目了然，但在合理的依次縮進之后還是很容易識別的；

    　　5、容易編寫和解析，當然前提是你要知道數據結構；

    　　JSON的缺點當然也有，但在作者看來實在是無關緊要的東西，所以不再單獨說明。

  • JSON的格式或者叫規則：

    　　JSON能夠以非常簡單的方式來描述數據結構，XML能做的它都能做，因此在跨平臺方面兩者完全不分伯仲。

    　　1、JSON只有兩種數據類型描述符，大括號{}和方括號[]，其余英文冒號:是映射符，英文逗號,是分隔符，英文雙引號""是定義符。

    　　2、大括號{}用來描述一組“不同類型的無序鍵值對集合”（每個鍵值對可以理解為OOP的屬性描述），方括號[]用來描述一組“相同類型的有序數據集合”（可對應OOP的數組）。

    　　3、上述兩種集合中若有多個子項，則通過英文逗號,進行分隔。

    　　4、鍵值對以英文冒號:進行分隔，并且建議鍵名都加上英文雙引號”"，以便于不同語言的解析。

    　　5、JSON內部常用數據類型無非就是字符串、數字、布爾、日期、null 這么幾個，字符串必須用雙引號引起來，其余的都不用，日期類型比較特殊，這里就不展開講述了，只是建議如果客戶端沒有按日期排序功能需求的話，那么把日期時間直接作為字符串傳遞就好，可以省去很多麻煩。

• JSONP：JSONP（JSON with Padding）實現跨域交換數據。

　　AJAX的核心是通過XmlHttpRequest獲取非本頁內容，而JSONP的核心則是動態添加<script>標簽來調用服務器提供的js腳本，允許用戶傳遞一個callback參數給服務端，然后服務端返回數據時會將這個callback參數作為函數名來包裹住JSON數據，這樣客戶端就可以隨意定制自己的函數來自動處理返回數據了。

　　一個眾所周知的問題，Ajax直接請求普通文件存在跨域無權限訪問的問題，甭管你是靜態頁面、動態網頁、web服務、WCF，只要是跨域請求，一律不準；不過我們又發現，Web頁面上調用js文件時則不受是否跨域的影響（不僅如此，我們還發現凡是擁有”src”這個屬性的標簽都擁有跨域的能力，比如<script>、<img>、<iframe>）；于是可以判斷，當前階段如果想通過純web端（ActiveX控件、服務端代理、屬于未來的HTML5之Websocket等方式不算）跨域訪問數據就只有一種可能，那就是在遠程服務器上設法把數據裝進js格式的文件里，供客戶端調用和進一步處理；恰巧我們已經知道有一種叫做JSON的純字符數據格式可以簡潔的描述復雜數據，更妙的是JSON還被js原生支持，所以在客戶端幾乎可以隨心所欲的處理這種格式的數據；這樣子解決方案就呼之欲出了，web客戶端通過與調用腳本一模一樣的方式，來調用跨域服務器上動態生成的js格式文件（一般以JSON為后綴），顯而易見，服務器之所以要動態生成JSON文件，目的就在于把客戶端需要的數據裝入進去?？蛻舳嗽趯SON文件調用成功之后，也就獲得了自己所需的數據，剩下的就是按照自己需求進行處理和展現了，這種獲取遠程數據的方式看起來非常像AJAX，但其實并不一樣。為了便于客戶端使用數據，逐漸形成了一種非正式傳輸協議，人們把它稱作JSONP，該協議的一個要點就是允許用戶傳遞一個callback參數給服務端，然后服務端返回數據時會將這個callback參數作為函數名來包裹住JSON數據，這樣客戶端就可以隨意定制自己的函數來自動處理返回數據了。

jQuery實現JSONP：

客戶端：

$.ajax({url: 'http://192.168.1.114/yii/demos/test.php', //不同的域type: 'GET', // jsonp模式只有GET是合法的 data: {'action': 'aaron'}, // 預傳參的數組dataType: 'jsonp', // 數據類型jsonp: 'backfunc', // 指定回調函數名，與服務器端接收的一致，并回傳回來 }) 查看代碼

服務端：（mvc的，protected，給其他需要返回JSONP的調用，在父類中）

protected ActionResult Jsonp(object data){string jsoncallback = Request.QueryString["jsoncallback"];if (string.IsNullOrEmpty(jsoncallback)){return Json(data, JsonRequestBehavior.AllowGet);}var jsc = new JavaScriptSerializer();return Content(string.Format("{0}({1})", jsoncallback, jsc.Serialize(data)), "text/plain", System.Text.Encoding.Default);} 查看代碼

　　只要你了解其原理，使用原生js實現也是一樣了。請注意，JSONP和AJAX不是一回事哦，兩者的原理也不一樣。
　　至此，我們已經了解JSONP的原理以及如何實現了，博客寫的不是很好，忘指正。謝謝。

?

轉載于:https://www.cnblogs.com/moretry/p/3905731.html

總結

以上是生活随笔為你收集整理的JSONP的原理与实现（基于jQuery）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。