1、經過jsonp跨域javascript
在js中,咱們直接用XMLHttpRequest請求不一樣域上的數據時,是不能夠的。可是,在頁面上引入不一樣域上的js腳本文件倒是能夠的,jsonp正是利用這個特性來實現的。html
好比,有個a.html頁面,它裏面的代碼須要利用ajax獲取一個不一樣域上的json數據,假設這個json數據地址是https://api.douban.com/v2/book/search?q=javascript&count=1(豆瓣)java
那麼a.html中的代碼就能夠這樣:jquery
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>JSONP實現跨域2</title> </head> <body> <div id="mydiv"> <button id="btn">點擊</button> </div> </body> <script type="text/javascript"> function handleResponse(response){ //response參數爲接收到的數據 console.log(response); } </script> <script type="text/javascript"> window.onload = function() { var oBtn = document.getElementById('btn'); oBtn.onclick = function() { var script = document.createElement("script"); //動態加載script script.src = "https://api.douban.com/v2/book/search?q=javascript&count=1&callback=handleResponse"; //跨域請求 callback參數對應方法
document.body.insertBefore(script, document.body.firstChild); }; //將script標籤加入到body裏
};
</script>
</html>
注:ajax
咱們看到獲取數據的地址後面還有一個callback參數,按慣例是用這個參數名,可是你用其餘的也同樣。固然若是獲取數據的jsonp地址頁面不是你本身能控制的,就得按照提供數據的那一方的規定格式來操做了。json
輸出結果爲:api
對於常常用jQuery的開發者來講,能注意到jQuery封裝的$.ajax
中有一個dataType
屬性,若是將該屬性設置成dataType:"jsonp"
,就能實現JSONP跨域了。須要瞭解的一點是,雖然jQuery將JSONP封裝在$.ajax
中,可是其本質與$.ajax
不同。跨域
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jQuery實現JSONP</title> </head> <body> <div id="mydiv"> <button id="btn">點擊</button> </div> </body> <script type="text/javascript" src="https://code.jquery.com/jquery-3.1.0.min.js"></script> <script type="text/javascript"> $(function(){ $("#btn").click(function(){ $.ajax({ async : true, url : "https://api.douban.com/v2/book/search", type : "GET", dataType : "jsonp", // 返回的數據類型,設置爲JSONP方式 jsonp : 'callback', //指定一個查詢參數名稱來覆蓋默認的 jsonp 回調參數名 callback jsonpCallback: 'handleResponse', //設置回調函數名 data : { //拼接url q : "javascript", count : 1 }, success: function(response, status, xhr){ console.log('狀態爲:' + status + ',狀態是:' + xhr.statusText); console.log(response); } }); }); }); </script> </html>