JSON JSONP ajax

標籤：html5   add   資料   .com   客戶   控制項   遠程伺服器   針對   使用   

JSON 是一種資料格式 不是資料類型 也不是程式設計語言  JSON： JavaScript對象標記法 （JavaScript Object  Nonation）  與XML類似 比xml更小 更快 更易解析

JSONP ：JSON+Padding （內填充）   把JSON當作內容添加到一個盒子裡    用於 跨域              callback參數

什麼是JSONP

首先提一下JSON這個概念，JSON是一種輕量級的資料轉送格式，被廣泛應用於當前Web應用中。JSON格式資料的編碼和解析基本在所有主流語言中都被實現，所以現在大部分前後端分離的架構都以JSON格式進行資料的傳輸。

那麼JSONP是什麼呢？
首先拋出瀏覽器同源策略這個概念，為了保證使用者訪問的安全，現代瀏覽器使用了同源策略，即不允許訪問非同源的頁面，詳細的概念大家可以自行百度。這裡大家只要知道，在ajax中，不允許請求非同源的URL就可以了，比如www.a.com下的一個頁面，其中的ajax請求是不允許訪問www.b.com/c.PHP這樣一個頁面的。

JSONP就是用來解決跨域請求問題的，那麼具體是怎麼實現的呢？

先說說JSONP是怎麼產生的：

其實網上關於JSONP的講解有很多，但卻千篇一律，而且雲裡霧裡，對於很多剛接觸的人來講理解起來有些困難，著用自己的方式來闡釋一下這個問題，看看是否有協助。

1、一個眾所周知的問題，Ajax直接請求普通檔案存在跨域無許可權訪問的問題，甭管你是靜態頁面、動態網頁、web服務、WCF，只要是跨域請求，一律不準。

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

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

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

5、這樣子解決方案就呼之欲出了，web用戶端通過與呼叫指令碼一模一樣的方式，來調用跨網域服務器上動態產生的js格式檔案（一般以JSON為尾碼），顯而易見，伺服器之所以要動態產生JSON檔案，目的就在於把用戶端需要的資料裝入進去。

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

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

如果對於callback參數如何使用還有些模糊的話，我們後面會有具體的執行個體來講解
JSONP原理：

ajax請求受同源策略影響，不允許進行跨域請求，而script標籤src屬性中的連結卻可以訪問跨域的js指令碼，利用這個特性，服務端不再返回JSON格式的資料，而是返回一段調用某個函數的js代碼，在src中進行了調用，這樣實現了跨域。

這裡針對ajax與jsonp的異同再做一些補充說明：

1、ajax和jsonp這兩種技術在調用方式上"看起來"很像，目的也一樣，都是請求一個url，然後把伺服器返回的資料進行處理，因此jquery和ext等架構都把jsonp作為ajax的一種形式進行了封裝。

2、但ajax和jsonp其實本質上是不同的東西。ajax的核心是通過XmlHttpRequest擷取非本頁內容，而jsonp的核心則是動態添加<script>標籤來調用伺服器提供的js指令碼。

3、所以說，其實ajax與jsonp的區別不在於是否跨域，ajax通過服務端代理一樣可以實現跨域，jsonp本身也不排斥同域的資料的擷取。

4、還有就是，jsonp是一種方式或者說非強制性協議，如同ajax一樣，它也不一定非要用json格式來傳遞資料，如果你願意，字串都行，只不過這樣不利於用jsonp提供公開服務。

總而言之，jsonp不是ajax的一個特例，哪怕jquery等巨頭把jsonp封裝進了ajax，也不能改變這一點！

JSON JSONP ajax