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

2019-11-20 13:53:44

字體：大中小

供稿：網(wǎng)友

JSON和JSONP

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

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

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

復(fù)制代碼代碼如下:

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

復(fù)制代碼代碼如下:

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

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

例1：

復(fù)制代碼代碼如下:

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

復(fù)制代碼代碼如下:

 //在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ù)調(diào)用JavaScript函數(shù)。

例2：

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

復(fù)制代碼代碼如下:

 <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的內(nèi)容和之前在標簽里寫的一樣是：

1 showPrice({symbol: 'IBM', price: 91.42});

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

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

例3：

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

復(fù)制代碼代碼如下:

  <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服務(wù)的代碼片段：

復(fù)制代碼代碼如下:

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

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

以上幾個例子來自：

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

在jQuery中使用JSONP

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

復(fù)制代碼代碼如下:

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

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

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

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

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

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

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

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

jsonp，

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

jsonpCallback，

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

復(fù)制代碼代碼如下: