跨域請求相關知識
阿新 • • 發佈：2017-09-29
char 不同 自定義 解析 style 設置 調用 create ont
一、跨域請求概念
請求在域名、端口或協議不同的服務器上的數據過程
二、原生js跨域請求
先獲取接口URL並設置相應的參數，如回調函數，然後把URL添加到createElement（“script”）生成的script標簽的src屬性上，append到主頁面中，然後編寫回調函數來解析接口獲得的數據
客戶端
1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>jsonp</title> 6 </head> 7 <body> 8 <script type="text/javascript"> 9 function cb(data){ 10 console.log(data); 11 } 12 </script> 13 <!--script中的src調用了cb並返回數據 --> 14 <script type="text/javascript" src="jsonp.php?_jsonp=cb"></script> 15 </body> 16</html>
服務器端(自寫的接口)
1 /*name：jsonp.php*/ 2 <?php 3 $callback = $_GET[‘_jsonp‘]; 4 5 $arr = array("zhangsan","lisi","zhaoliu"); 6 7 8 echo $callback."(".json_encode($arr).")"; 9 10 ?>
其中cb是回調函數
三、jsonp方式跨域
1 <!doctype html> 2 <html lang="en"> 3 <head> 4<meta charset="UTF-8"> 5 <title>jquery跨域jsonp</title> 6 </head> 7 <body> 8 <input type="button" id="btn" value="點擊"> 9 <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script> 10 <script type="text/javascript"> 11 $(function(){ 12 13 $.ajax({ 14 type : "get", 15 async: false, 16 url : "./jsonp.php", 17 dataType : "jsonp", 18 jsonp: "cb",//傳遞給請求處理程序或頁面的，用以獲得jsonp回調函數名的參數名(默認為:callback) 19 jsonpCallback:"fn",//自定義的jsonp回調函數名稱，默認為jQuery自動生成的隨機函數名(類似：jQuery1102016820125747472048_1450147653563(["zhangsan", "lisi", "wangwu"]);) 20 success : function(data){ 21 console.log(data); 22 }, 23 error:function(){ 24 console.log(‘fail‘); 25 } 26 }); 27 28 }); 29 30 </script> 31 </body> 32 </html>
接口
1 <?php 2 $fn = $_GET[‘cb‘];//獲取參數：回調函數的名字 3 $arr = array(‘zhangsan‘,‘lisi‘,‘wangwu‘); 4 echo $fn.‘(‘.json_encode($arr).‘);‘;//callback([‘zhangsan‘,‘lisi‘,‘wangwu‘]); 5 ?>
跨域請求相關知識