淺談JSON和JSONP區別及jQuery的ajax jsonp的使用_jquery

JSON和JSONP
 
　　JSON（JavaScript Object Notation）是一種輕量級的資料交換格式，用於在瀏覽器和伺服器之間交換資訊。
 
　　JSONP(JSON With Padding)，就是打包在函數調用中的的JSON（或者包裹的JSON）。
 
　　JSON是一種資料格式，JSONP是一種資料調用方式。
 

複製代碼 代碼如下:

 //JSON
 {
 “name”: “sb”
 }

複製代碼 代碼如下:

 //JSONP
 callback({
 “name”: “sb”
 })

　　出於安全考慮，指令碼（AJAX）不能訪問非本域的內容。但是，靜態資源是不受域策略限制的，可以載入任意域的指令碼、樣式、圖片等靜態資源，JSOP就是利用這種原理來實現跨域擷取資料的。
 
例1：

複製代碼 代碼如下:

 //定義shoPrice函數
 function showPrice(data) {
     alert("Symbol: " + data.symbol + ", Price: " + data.price);
 }

複製代碼 代碼如下:

 //在Web頁面中包含showPrice函數和參數
 <script type="text/javascript">
 function showPrice(data) {
     alert("Symbol: " + data.symbol + ", Price: " + data.price);
 }
 </script>
 <script type="text/javascript">showPrice({symbol: 'IBM', price: 91.42});</script>

　　本例展示了如何將靜態JSON資料作為參數調用JavaScript函數。
 
 例2：
 
　　第一種的函數調用完全可以寫在一個js檔案中放在伺服器上，用script標籤載入到頁面，而且這個標籤可以動態地建立。
 

複製代碼 代碼如下:

 <script type="text/javascript">
 // This is our function to be called with JSON data
 function showPrice(data) {
     alert("Symbol: " + data.symbol + ", Price: " + data.price);
 }
 
 var url = “remote.js”; // 外部指令碼的URL
 // 動態插入指令碼
 var script = document.createElement('script');
 script.setAttribute('src', url);
 
 // 載入script
 document.getElementsByTagName('head')[0].appendChild(script);
 </script>

remote.js的內容和之前在標籤裡寫的一樣是：
 
 1 showPrice({symbol: 'IBM', price: 91.42});
 
　　動態插入的JavaScript代碼，將要傳遞的JSON資料作為參數，showPrice函數調用語句的參數。
 
　　那麼問題來了，每次擷取到資料都調用showPrice函數嗎？這就需要前後端程式猿做好約定，當然這樣有很多不便，尤其是對於開放介面給公眾開發的情況。JSOP這樣處理：支援前端傳遞一個回呼函數名參數，後端接收回呼函數名參數，然後產生對該函數的調用，將JSON資料作為參數傳遞，在到達用戶端時將其插入頁面開始執行。
 
例3：
 
　　動態插入代碼，帶有callback參數：
 

複製代碼 代碼如下:

  <script type="text/javascript">
  // This is our function to be called with JSON data
  function showPrice(data) {
      alert("Symbol: " + data.symbol + ", Price: " + data.price);
  }
 var url = “remote.js?callback='showPrice'”; // 外部指令碼的URL
 // 動態插入指令碼
 var script = document.createElement('script');
 script.setAttribute('src', url);
 // 載入script
 document.getElementsByTagName('head')[0].appendChild(script);
  </script>

後端用PHP實現的JSONP服務的程式碼片段：
 

複製代碼 代碼如下:

 $jsonData = getDataAsJson($_GET['symbol']);
 echo $_GET['callback'] . '(' . $jsonData . ');';
 // 列印: showPrice({"symbol" : "IBM", "price" : "91.42"});

很好的契合了JSONP的定義，打包在函數調用中的JSON資料。
 
以上幾個例子來自：
 
使用 JSONP 實現跨域通訊，第 1 部分: 結合 JSONP 和 jQuery 快速構建強大的 mashup
 
在jQuery中使用JSONP
 
　　AJAX和JSONP在jQuery中的調用方式看起來極為相像，千萬不要被這種現象迷惑，它們本質上有很大不同。AJAX是通過XMLHttpRequest對象擷取非頁面內容，而JSONP是動態添加<script>標籤來調用伺服器指令碼。雖然jQuery把JSONP作為AJAX的一種形式進行了封裝，但JSONP並不是AJAX的一種形式或一種特例。
 

複製代碼 代碼如下:

 $.ajax({
     url: "http://query.yahooapis.com/v1/public/yql",
     jsonpCallback: "showPrice",
     jsonp: "callback",
     // tell jQuery we're expecting JSONP
     dataType: "jsonp",
     data: {
         q: "select title,abstract,url from search.news where query=\"cat\"",
         format: "json"
     },
     // work with the response
     success: function( data ) {
         console.log( data ); // server response
     }
 });

ajax請求參數說明：

dataType  String

預期伺服器返回的資料類型。如果不指定，jQuery 將自動根據 HTTP 包 MIME 資訊來智能判斷，比如XML MIME類型就被識別為XML。在1.4中，JSON就會產生一個JavaScript對象，而script則會執行這個指令碼。隨後伺服器端返回的資料會根據這個值解析後，傳遞給回呼函數。可用值:

"xml": 返回 XML 文檔，可用 jQuery 處理。

"html": 返回純文字 HTML 資訊；包含的script標籤會在插入dom時執行。

"script": 返回純文字 JavaScript 代碼。不會自動緩衝結果。除非設定了"cache"參數。'''注意：'''在遠程請求時(不在同一個域下)，所有POST請求都將轉為GET請求。(因為將使用DOM的script標籤來載入)

"json": 返回 JSON 資料 。

"jsonp": JSONP 格式。使用 JSONP 形式調用函數時，如 "myurl?callback=?" jQuery 將自動替換 ? 為正確的函數名，以執行回呼函數。

"text": 返回純文字字串
 
jsonp，
 
　　重寫jsonp請求中的回呼函數的名稱。至俄格值用來替代“callback=?”這種GET或POST請求URL參數裡的“callback”部分，例如{jsonp:'onJsonPLoad'}會導致“onJsonPLoad”傳遞給伺服器。
 
jsonpCallback，
 
　　為jsonp指定一個回呼函數名。這個值將用來取代jQuery自動產生的隨機函數名。這主要用來讓jQuery產生度獨特的函數名，這樣管理請求更容易，也能方便地提供回呼函數和錯誤處理。你也可以在想讓瀏覽器緩衝GET請求的時候，指定這個回呼函數名。但是實際使用過程中，並不用寫回呼函數，比如此例中的showPrice，不寫也不會報錯，因為jQuery在處理JSONP的時候，自動幫你產生回呼函數並且把資料取出來共success方法調用。可能像這樣：

複製代碼 代碼如下:

 function success_jsonpCallback(data) { success(data); } 

以上就是本文的全部內容了，大家是否對jsonp有了細緻的瞭解了呢。有什麼疑問也請給我留言，大家共同探討。