原生JS如何實現Ajax的跨域請求？
在解決這個問題之前，我們務必先清楚為什么我們要跨域請求，以及在什么情況下會跨域請求。
了解一下：“同源策略”，你就知道了；
同源策略限制從一個源加載的文檔或腳本如何與來自另一個源的資源進行交互。這是一個用於隔離潛在惡意文件的關鍵的安全機制。
它的定義是：
一段腳本向后台請求數據，只能讀取屬於同一協議名、同一主機名、同一端口號下的數據；
所以，請求不同協議名、不同端口號、不同主機名下面的文件時，
將會違背同源策略，無法請求成功，需要進行跨越處理!!
解決跨域請求的方法：
方法一：
通過后台的PHP進行設置
前台無需任何設置，在后台被請求的PHP文件中，寫入一條header。
header("Access-Control-Allow-Origin:*"); --- 表示允許哪些域名請求這個PHP文件，*表示所有域名都允許
JS代碼：
$.post("http://127.0.0.1/json.php",function(data){
console.log(data);
});
注釋：
其中，url為PHP文件的路徑；
PHP代碼：
<?php header("Content-Tyepe:text/html;charset=utf-8"); header("Access-Control-Allow-Origin:*"); $str = <<<str [ { "name": "影子", "age": 17, "hobby": [ "吃", "喝", "玩", "樂" ], "score":{ "math":78, "chinese":89 } }, ] str; echo $str;
結果：
方法二：
實現步驟：
1、原有src屬性的標簽子帶跨域功能；所以可以使用script標簽的src屬性請求后台數據
<script src="http://127.0.0.1/json.php">< /script>
2、用於src在加載數據成功后，會直接將加載的內容放到script標簽中；
所以，后台直接返回JSON字符串將不能在script標簽中解析。
因此，后台應該返回給前台一個回調函數名，並將JSON字符串作為參數傳入。
后台PHP文件中返回： echo "callback({$json})";
3、前台接收到返回的回調函數，將直接在script標簽中調用。因此，需要聲明這樣一個回調函數，作為請求成功的回調
function callback(data){ alert("請求成功!!"); console.log(data); }
JS代碼：
<script type="text/javascript">
function callback(data){
console.log(data);
}
</script>
<script src="http://127.0.0.1/json.php"></script>
PHP文件：
<?php header("Content-Tyepe:text/html;charset=utf-8"); $str = <<<str [ { "name":"yingzi", "age":17, "hobby":[ "吃", "喝", "玩", "樂" ], } ] str; echo "callback({$str})";
結果：
方法三：
1、在ajax請求時，設置dataType為"jsonp"；
2、后台返回時，依然需要返回回調函數名，但是，ajax在發送請求時，會默認使用get請求將回調函數名發給后台，
后台$_GET['callback'] 取出函數名：
--- echo "{$_GET['callback']}({$str})";
3、后台返回以后，前台就可以使用ajax的success函數作為成功的回調
--- success : function(data){}
JS代碼：
<script type="text/javascript"> $.ajax({ type:"post", url:"http://127.0.0.1/json.php", dataType:"jsonp", success:function(data){ console.log(data); } }); </script>
PHP文件：
<?php header("Content-Tyepe:text/html;charset=utf-8"); $str = <<<str [ { "name":"yingzi", "age":17, "hobby":[ "吃", "喝", "玩", "樂" ], } ] str; echo "{$_GET['callback']}({$str})";
結果：
當然，后台也可以隨便返回一個函數名，前台只要請求成功，就會自動調用這個函數。類似第二條的②、③步，而不需要本方法的第③步
PHP返回： echo "callback({$str})";
JS代碼： function callback(data){
console.log(data);
}
JS代碼：
<script type="text/javascript"> $.ajax({ type:"post", url:"http://127.0.0.1/json.php", dataType:"jsonp", }); function(data){ console.log(data); } </script>
PHP文件：
<?php header("Content-Tyepe:text/html;charset=utf-8"); $str = <<<str [ { "name":"yingzi", "age":17, "hobby":[ "吃", "喝", "玩", "樂" ], } ] str; echo "callback({$str})";
結果：
