Jsonp 解決的是跨域 ajax 調用的問題。為什麼要跨域 ajax 調用呢?這樣可以在一個應用中直接在前端通過 js 調用另外一個應用(在不同的域名下)的 API。
在實際應用中也用到了 Jsonp ,但之前只知道 Jsonp 的一個限制,只能發 get 請求,get 請求的弊端是請求長度有限制。
範例如下:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | <script> /* * AJAX 和 JSONP 在 jQuery 中的調用方式看起來極為相像,千萬不要被這種現象迷惑,它們本質上有很大不同。 * AJAX 是通過 XMLHttpRequest 物件獲取非頁面內容,而 JSONP 是動態的添加<script>標籤來調用伺服器腳本。雖然 jQuery 把 JSONP 作為 AJAX 的一種形式進行了封裝,但 JSONP 並不是 AJAX 的一種形式或一種特例。 * 請注意: * 1. 由於 Jquery 在 Ajax 處理中使用的是 UTF-8 編碼傳遞參數的,所以 Jsonp 處理端用 UTF-8 的編碼最好,這樣省得編碼轉換了,如果不是 UTF-8 記得轉換,否則中文會亂碼。 * 2. 請求的服務端url最好不要寫成 http://henry.inc/?act=add這樣的,應寫全其為:http://henry.inc/index.php?act=add這樣的,在應用的過程中出現了不相容的情況。 * 3. 如果同一個頁面使用多個 Jsonp 的請求,建議默認使用jquery自動生成的隨機函數。否則某個請求將會錯誤。 */ var url = 'http://api.open-notify.org/iss-now.json'; $.ajax({ url: url, dataType: 'jsonp', //指定以 Jsonp 方式執行。 //jQuery 在我們每次發出 Request 時,會補上一個參數"_",而其內容是每次皆不同的亂數,這是 Javascript 端很常見的迴避 Cache 技巧。由於參數值不相同,每次 Request 都被視為不同,就能避開 Cache 裡的舊資料,強迫每次都將 Request 送至 Server 端執行。 cache: false, //預設會啟用 Cache 功能,同樣的 Request 第二次不會真的送出,而是直接由 Cache 取回結果。 jsonp: "callback", //傳遞給請求處理常式或頁面的,用以獲得jsonp回呼函數名的參數名(一般默認為:callback)。 success: function (data) { console.log('callback success'); console.log(data); }, error: function (xhr, status, error) { console.log(status + '; ' + error); } }); </script> |
瀏覽器的結果: