JsonP跨域請求原理
阿新 • • 發佈：2019-04-22
數據 pad cal block 前端 fun lin gre borde
前端訪問後臺獲取數據請求一般都會存在CROS同源問題。（即 端口 域名 協議 相同才可以訪問）。
一般我們通過本地服務器代理訪問，但是這樣就會存在上述問題。 所以我們就需要不觸發CROS同源問題就需要應用JSONP來處理。
什麽是JOSNP呢？
①通過標簽具有訪問的意義。
②具有herf屬性的標簽。 （如：a標簽、form表單等。）
③具有引用的標簽。（script標簽、img標簽、src標簽）
我們首先需要找個api端口 下面我們以天氣JOSNP api舉例：https://api.asilu.com/weather/?city=廣州
一定要抓取的API存在callback返回值
原生JS：
1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <meta charset="UTF-8"> 6 <title></title> 7 <style type="text/css"> 8 * { 9 margin: 0; 10 padding: 0; 11 list-style: none; 12 } 13 14 input { 15 width: 600px; 16 height: 30px; 17 outline: none; 18 display: block; 19 margin: 10px auto; 20 border-radius: 3px; 21 border: 1px solid #ccc; 22 } 23 24 input:focus { 25 color: skyblue; 26 border-color: skyblue; 27 } 28 29 table { 30 width: 600px; 31 margin: 0 auto; 32 line-height: 30px; 33 border-collapse: collapse; 34 } 35 </style> 36 </head> 37 38 <body> 39 <input type="text" placeholder="請輸入你要查詢的城市" list="search" /> 40 <table border="1"> 41 <thead> 42 <tr> 43 <th>日期</th> 44 <th>溫度</th> 45 <th>天氣</th> 46 <th>風向</th> 47 </tr> 48 </thead> 49 <tbody> 50 51 </tbody> 52 </table> 53 54 <script type="text/javascript"> 55 //接口https://api.asilu.com/weather/?callback=fn&city=廣州 56 var ipt = document.getElementsByTagName("input")[0]; 57 var tbody = document.querySelector("tbody"); 58 //搜索 59 ipt.onkeyup = function(ev) { 60 if(ev.keyCode === 13) { 61 //創建一個標簽 62 var script = document.createElement("script"); 63 //設置屬性 64 script.src = "http://api.asilu.com/weather/?callback=fn&city" + ipt.value; 65 //插入到body 66 document.body.appendChild(script); 67 //清空 68 document.body.removeChild(script); 69 } 70 } 71 72 function fn(data) { 73 var str = ""; 74 for(var i = 0; i < data.weather.length; i++) { 75 str += "<tr>76 <td>" + data.weather[i].date + "</td>77 <td>" + data.weather[i].temp + "</td>78 <td>" + data.weather[i].weather + "</td>79 <td>" + data.weather[i].wind + "</td>80 </tr>"; 81 } 82 console.log(data); 83 tbody.innerHTML = str; 84 } 85 </script> 86 </body> 87 88 </html>
$Jquery JsonP：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 </head> 7 <body> 8 <button>請求</button> 9 10 <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> 11 <script type="text/javascript"> 12 $("button").click(function(){ 13 14 //jquery的jsonp 15 $.ajax({ 16 url: "https://www.baidu.com/sugrec?prod=pc&wd=哈哈&cb=fn", 17 dataType: "jsonp", //指定服務器返回的數據類型 18 jsonp: "cb", //默認cb 19 jsonpCallback: "fn",//回調函數的名字 20 success: function(data){ 21 console.log(data) 22 } 23 }); 24 25 26 }) 27 28 29 </script> 30 </body> 31 </html>
JsonP跨域請求原理