淺談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函數和參數
 
 

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

複製程式碼 程式碼如下:

 

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

複製程式碼 程式碼如下:

 

後端用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的一種形式或一種特例。 <br />  <br /> <div class="codetitle"><span><a style="CURSOR: pointer" data="8779" class="copybut" id="copybut8779" onclick="doCopy('code8779')"><U>複製程式碼 程式碼如下:<div class="codebody" id="code8779"><br />  $.ajax({<br />      url: "<a href="http://query.yahooapis.com/v1/public/yql">http://query.yahooapis.com/v1/public/yql",<br />      jsonpCallback: "showPrice",<br />      jsonp: "callback",<br />      // tell jQuery we're expecting JSONP<br />      dataType: "jsonp",<br />      data: {<br />          q: "select title,abstract,url from search.news where query="cat"",<br />          format: "json"<br />      },<br />      // work with the response<br />      success: function( data ) {<br />          console.log( data ); // server response<br />      }<br />  });<br /> <p>ajax請求參數說明： <p><strong>dataType  String <p>預期伺服器傳回的資料類型。如果不指定，jQuery 會自動根據 HTTP 套件 MIME 資訊來智慧判斷，例如XML MIME類型就被辨識為XML。在1.4中，JSON就會產生一個JavaScript對象，而script則會執行這個腳本。隨後伺服器端傳回的資料會根據這個值解析後，傳遞給回呼函數。可用值: <p>"xml": 傳回 XML 文檔，可用 jQuery 處理。 <p>"html": 傳回純文字 HTML 資訊；所包含的script標籤會在插入dom時執行。 <p>"script": 傳回純文字 JavaScript 程式碼。不會自動快取結果。除非設定了"cache"參數。 '''注意：'''在遠端請求時(不在同一個網域下)，所有POST請求都會轉為GET請求。 (因為將使用DOM的script標籤來載入) <p>"json": 傳回 JSON 資料 。 <p>"jsonp": JSONP 格式。使用 JSONP 形式呼叫函數時，如 "myurl?callback=?" jQuery 會自動取代 ? 為正確的函式名，以執行回呼函數。 <p>"text": 傳回純文字字串<br />  <br /> <strong>jsonp，<br />  <br /> 　　重寫jsonp請求中的回呼函數的名稱。至俄格值用來取代「callback=?」這種GET或POST請求URL參數裡的「callback」部分，例如{jsonp:'onJsonPLoad'}會導致「onJsonPLoad」傳遞給伺服器。 <br />  <br /> <strong>jsonpCallback，<br />  <br /> 　　為jsonp指定一個回呼函數名。這個值將會用來取代jQuery自動產生的隨機函數名。這主要用來讓jQuery產生度獨特的函數名，這樣管理請求更容易，也能方便地提供回呼函數和錯誤處理。你也可以在想讓瀏覽器快取GET請求的時候，指定這個回呼函數名稱。但是實際使用過程中，並不用寫回調函數，比如此例中的showPrice，不寫也不會報錯，因為jQuery在處理JSONP的時候，自動幫你產生回調函數並且把資料取出來共success方法呼叫。可能像這樣： <p><div class="codetitle"><span><a style="CURSOR: pointer" data="75667" class="copybut" id="copybut75667" onclick="doCopy('code75667')"><U>複製程式碼 程式碼如下:<div class="codebody" id="code75667"><br />  function success_jsonpCallback(data) { success(data); }  <br /> <p>以上就是本文的全部內容了，大家是否對jsonp有了細緻的了解呢。有什麼疑問也請給我留言，大家共同探討。 </script>