淺談JSON和JSONP區(qū)別及jQuery的ajax jsonp的使用

更新時間：2014年11月23日 10:00:12 投稿：hebedich

文章從JSON和JSONP區(qū)別開始講起，用實例來對比他們之間的不同之處，然后詳細講解了jQuery中的ajax jsonp的使用并給出了示例及詳細參數(shù)說明。這里推薦給大家，希望對小伙伴能有所幫助

JSON和JSONP

　　JSON（JavaScript Object Notation）是一種輕量級的數(shù)據(jù)交換格式，用于在瀏覽器和服務器之間交換信息。

　　JSONP(JSON With Padding)，就是打包在函數(shù)調用中的的JSON（或者包裹的JSON）。

　　JSON是一種數(shù)據(jù)格式，JSONP是一種數(shù)據(jù)調用方式。

復制代碼代碼如下:

 //JSON

 {

 “name”: “sb”

 }

復制代碼代碼如下:

 //JSONP

 callback({

 “name”: “sb”

 })

　　出于安全考慮，腳本（AJAX）不能訪問非本域的內容。但是，靜態(tài)資源是不受域策略限制的，可以加載任意域的腳本、樣式、圖片等靜態(tài)資源，JSOP就是利用這種原理來實現(xiàn)跨域獲取數(shù)據(jù)的。

例1：

復制代碼代碼如下:

 //定義shoPrice函數(shù)

 function showPrice(data) {

     alert("Symbol: " + data.symbol + ", Price: " + data.price);

 }

復制代碼代碼如下:

 //在Web頁面中包含showPrice函數(shù)和參數(shù)

 <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>

　　本例展示了如何將靜態(tài)JSON數(shù)據(jù)作為參數(shù)調用JavaScript函數(shù)。

例2：

　　第一種的函數(shù)調用完全可以寫在一個js文件中放在服務器上，用script標簽加載到頁面，而且這個標簽可以動態(tài)地創(chuàng)建。

復制代碼代碼如下:

 <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

 // 動態(tài)插入腳本

 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});

　　動態(tài)插入的JavaScript代碼，將要傳遞的JSON數(shù)據(jù)作為參數(shù)，showPrice函數(shù)調用語句的參數(shù)。

　　那么問題來了，每次獲取到數(shù)據(jù)都調用showPrice函數(shù)嗎？這就需要前后端程序猿做好約定，當然這樣有很多不便，尤其是對于開放接口給公眾開發(fā)的情況。JSOP這樣處理：支持前端傳遞一個回調函數(shù)名參數(shù)，后端接收回調函數(shù)名參數(shù)，然后生成對該函數(shù)的調用，將JSON數(shù)據(jù)作為參數(shù)傳遞，在到達客戶端時將其插入頁面開始執(zhí)行。

例3：

　　動態(tài)插入代碼，帶有callback參數(shù)：

復制代碼代碼如下:

  <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

 // 動態(tài)插入腳本

 var script = document.createElement('script');

 script.setAttribute('src', url);

 // 加載script

 document.getElementsByTagName('head')[0].appendChild(script); 

  </script>

后端用PHP實現(xiàn)的JSONP服務的代碼片段：

復制代碼代碼如下:

 $jsonData = getDataAsJson($_GET['symbol']);

 echo $_GET['callback'] . '(' . $jsonData . ');';

 // 打印: showPrice({"symbol" : "IBM", "price" : "91.42"});

很好的契合了JSONP的定義，打包在函數(shù)調用中的JSON數(shù)據(jù)。

以上幾個例子來自：

使用 JSONP 實現(xiàn)跨域通信，第 1 部分: 結合 JSONP 和 jQuery 快速構建強大的 mashup

在jQuery中使用JSONP

　　AJAX和JSONP在jQuery中的調用方式看起來極為相像，千萬不要被這種現(xiàn)象迷惑，它們本質上有很大不同。AJAX是通過XMLHttpRequest對象獲取非頁面內容，而JSONP是動態(tài)的添加<script>標簽來調用服務器腳本。雖然jQuery把JSONP作為AJAX的一種形式進行了封裝，但JSONP并不是AJAX的一種形式或一種特例。

復制代碼代碼如下:

$.ajax({
     url: "      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請求參數(shù)說明：

dataType String

預期服務器返回的數(shù)據(jù)類型。如果不指定，jQuery 將自動根據(jù) HTTP 包 MIME 信息來智能判斷，比如XML MIME類型就被識別為XML。在1.4中，JSON就會生成一個JavaScript對象，而script則會執(zhí)行這個腳本。隨后服務器端返回的數(shù)據(jù)會根據(jù)這個值解析后，傳遞給回調函數(shù)?？捎弥?

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

"html": 返回純文本 HTML 信息；包含的script標簽會在插入dom時執(zhí)行。

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

"json": 返回 JSON 數(shù)據(jù) 。

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

"text": 返回純文本字符串

jsonp，

　　重寫jsonp請求中的回調函數(shù)的名稱。至俄格值用來替代“callback=?”這種GET或POST請求URL參數(shù)里的“callback”部分，例如{jsonp:'onJsonPLoad'}會導致“onJsonPLoad”傳遞給服務器。

jsonpCallback，

　　為jsonp指定一個回調函數(shù)名。這個值將用來取代jQuery自動生成的隨機函數(shù)名。這主要用來讓jQuery生成度獨特的函數(shù)名，這樣管理請求更容易，也能方便地提供回調函數(shù)和錯誤處理。你也可以在想讓瀏覽器緩存GET請求的時候，指定這個回調函數(shù)名。但是實際使用過程中，并不用寫回調函數(shù)，比如此例中的showPrice，不寫也不會報錯，因為jQuery在處理JSONP的時候，自動幫你生成回調函數(shù)并且把數(shù)據(jù)取出來共success方法調用。可能像這樣：

復制代碼代碼如下:

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

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

您可能感興趣的文章: