1. Ajax不能跨域請求的原因
同源策略(Same Origin Policy),是一種約定,該約定阻止當前腳本獲取或者操作另一個域下的內容。所有支持Javascript的瀏覽器都支持同源策略,也就是說瀏覽器可以隔離來自不同源的內容,阻止跨域請求的發生。
2. 解決方法
(1) CORS
在被請求的腳本中使用header()函數設置http響應,從而使得跨域請求能夠發生:
header(“Access-Control-Allow-Origin:*”);
這一方法稱為CORS(Cross-Origin Resource Sharing),是w3c的工作草案。
(2) 使用Jsonp (Json with padding)
jsonp的原理是通過script標簽的src屬性來請求不同源的腳本。
步驟:
1) 創建script標簽,設置src屬性
2) 定義回調函數
3) 在被請求的php腳本中執行回調函數
4) 在回調函數中處理返回數據
發送跨域請求的html頁面:
1 <script type="text/javascript"> 2 function crossDomain() 3 { 4 //1.創建script標簽,設置src屬性 5 var script = document.createElement('script'); 6 //在script標簽的src屬性中發送跨域請求 7 //傳遞get參數 --> 回調函數的名字 8 script.src = 'http://www.another.com/index.php?name=Jonas&fn=say'; 9 document.getElementsByTagName('head')[0].appendChild(script); 10 } 11 12 //2.定義回調函數 13 function say(data) 14 { 15 //4.處理返回數據 16 console.log(data); 17 } 18 </script>
接收跨域請求的php頁面: 要執行回調函數
1 <?php 2 //3.執行回調函數,將返回數據以參數的形式傳給回調函數
3 $data = json_encode(array('msg' => 'hello world')); 4 echo $_GET['fn'] . "({$data})"; 5 ?>