JSONP 是 JSON with padding(填充式 JSON 或參數式 JSON)的簡寫。javascript
JSONP實現跨域請求的原理簡單的說,就是動態建立<script>
標籤,而後利用<script>
的src 不受同源策略約束來跨域獲取數據。html
JSONP 由兩部分組成:回調函數和數據。回調函數是當響應到來時應該在頁面中調用的函數。回調函數的名字通常是在請求中指定的。而數據就是傳入回調函數中的 JSON 數據。java
動態建立<script>
標籤,設置其src,回調函數在src中設置:jquery
1 var script = document.createElement("script"); 2 script.src = "https://api.douban.com/v2/book/search?q=javascript&count=1&callback=handleResponse"; 3 document.body.insertBefore(script, document.body.firstChild);
在頁面中,返回的JSON做爲參數傳入回調函數中,咱們經過回調函數來來操做數據。ajax
function handleResponse(response){ // 對response數據進行操做代碼 }
瞭解了JSONP的基本使用方法,咱們在實現上面經過ajax調用豆瓣接口的需求,實現代碼以下:json
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>JSONP實現跨域2</title> 6 </head> 7 <body> 8 <div id="mydiv"> 9 <button id="btn">點擊</button> 10 </div> 11 </body> 12 <script type="text/javascript"> 13 function handleResponse(response){ 14 console.log(response); 15 } 16 </script> 17 <script type="text/javascript"> 18 window.onload = function() { 19 20 var oBtn = document.getElementById('btn'); 21 22 oBtn.onclick = function() { 23 24 var script = document.createElement("script"); 25 script.src = "https://api.douban.com/v2/book/search?q=javascript&count=1&callback=handleResponse"; 26 document.body.insertBefore(script, document.body.firstChild); 27 }; 28 }; 29 </script> 30 </html>
在控制檯,咱們能夠查看到返回的response數據格式爲JSON對象格式的,具體須要取出哪些參數,能夠根據本身的須要:api
JSONP目前仍是比較流行的跨域方式,雖然JSONP使用起來方便,可是也存在一些問題:
首先, JSONP 是從其餘域中加載代碼執行。若是其餘域不安全,極可能會在響應中夾帶一些惡意代碼,而此時除了徹底放棄 JSONP 調用以外,沒有辦法追究。所以在使用不是你本身運維的 Web 服務時,必定得保證它安全可靠。跨域
其次,要肯定 JSONP 請求是否失敗並不容易。雖然 HTML5 給<script>
元素新增了一個 onerror事件處理程序,但目前尚未獲得任何瀏覽器支持。爲此,開發人員不得不使用計時器檢測指定時間內是否接收到了響應。瀏覽器
對於常常用jQuery的開發者來講,能注意到jQuery封裝的$.ajax
中有一個dataType
屬性,若是將該屬性設置成dataType:"jsonp"
,就能實現JSONP跨域了。須要瞭解的一點是,雖然jQuery將JSONP封裝在$.ajax
中,可是其本質與$.ajax
不同。安全
經過jQuery的$.ajax
實現跨域的代碼參考以下:
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>jQuery實現JSONP</title> 6 </head> 7 <body> 8 <div id="mydiv"> 9 <button id="btn">點擊</button> 10 </div> 11 </body> 12 <script type="text/javascript" src="https://code.jquery.com/jquery-3.1.0.min.js"></script> 13 <script type="text/javascript"> 14 $(function(){ 15 $("#btn").click(function(){ 16 17 $.ajax({ 18 async : true, 19 url : "https://api.douban.com/v2/book/search", 20 type : "GET", 21 dataType : "jsonp", // 返回的數據類型,設置爲JSONP方式 22 jsonp : 'callback', //指定一個查詢參數名稱來覆蓋默認的 jsonp 回調參數名 callback 23 jsonpCallback: 'handleResponse', //設置回調函數名 24 data : { 25 q : "javascript", 26 count : 1 27 }, 28 success: function(response, status, xhr){ 29 console.log('狀態爲:' + status + ',狀態是:' + xhr.statusText); 30 console.log(response); 31 } 32 }); 33 }); 34 }); 35 </script> 36 </html>
最後的結果與JavaScript經過動態添加<script>
標籤獲得的結果是同樣的。
經過$.getJSON()
利用getJSON來實現,只要在地址中加上callback=?參數便可,參考代碼以下:
1 $.getJSON("https://api.douban.com/v2/book/search?q=javascript&count=1&callback=?", function(data){ 2 console.log(data); 3 });
樣也能實現跨域的功能。