原生JS實現Ajax的跨域請求

時間 2020-06-08

標籤原生實現 ajax 請求欄目 JavaScript 简体版

原文原文鏈接

原生JS如何實現Ajax的跨域請求？

在解決這個問題以前，咱們務必先清楚爲何咱們要跨域請求，以及在什麼狀況下會跨域請求。javascript

瞭解一下：「同源策略」，你就知道了；

　　同源策略限制從一個源加載的文檔或腳本如何與來自另外一個源的資源進行交互。這是一個用於隔離潛在惡意文件的關鍵的安全機制。php

　　它的定義是：html

　　　　一段腳本向後臺請求數據，只能讀取屬於同一協議名、同一主機名、同一端口號下的數據；前端

　　　　因此，請求不一樣協議名、不一樣端口號、不一樣主機名下面的文件時，java

　　將會違背同源策略，沒法請求成功，須要進行跨越處理!!ajax

解決跨域請求的方法：

方法一：json

　　經過後臺的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;

結果：

方法二：

　　實現步驟：　

　　　　一、原有src屬性的標籤子帶跨域功能；因此可使用script標籤的src屬性請求後臺數據

　　　二、用於src在加載數據成功後，會直接將加載的內容放到script標籤中；

　　　　　　因此，後臺直接返回JSON字符串將不能在script標籤中解析。

　　　　　　所以，後臺應該返回給前臺一個回調函數名，並將JSON字符串做爲參數傳入。

　　　　　　　　後臺PHP文件中返回： echo "callback({$json})";

　　三、前臺接收到返回的回調函數，將直接在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})";

結果：

方法三：

　　一、在ajax請求時，設置dataType爲"jsonp"；

二、後臺返回時，依然須要返回回調函數名，可是，ajax在發送請求時，會默認使用get請求將回調函數名發給後臺，

　　　　後臺$_GET['callback'] 取出函數名：

　　　　　　--- echo "{$_GET['callback']}({$str})";

三、後臺返回之後，前臺就可使用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})";

結果：