幾種常用的ajax 跨域請求

  前 言

    首先，我們要明白，什么是跨域，為什么要跨域。 由於JS中存在同源策略。當請求不同協議名不同端口號下面的文件時，將會違背同源策略，無法請求成功！需要進行跨域處理！

   這篇文章就為大家詳細介紹一下個人常用的三種跨域方式，以請求PHP為例。

 

1header("Access-Control-Allow-Origin:*");

 后台PHP進行設置，前台無需任何設置，在后台被請求的PHP文件中，寫入一條header。表示允許哪些域名請求這個PHP文件，*表示所有域名都允許

eg:

前台：

 $.post("http://localhost/lianxi/kuayu.php",function(data){
                console.log(data);
            })

后台：

header("Access-Control-Allow-Origin:*");
$str=<<<str

[
    {
        "name": "zhangsan",
        "age": 17,
        "hobby": [
            "吃",
            "喝",
            "玩",
            "樂"
        ],
        "score":{
            "math":78,
            "chinese":80
        }
    }
]
str;
echo $str;

前台返回：

 

2使用src屬性+jsonp實現跨域

①用於src屬性的標簽自帶跨域功能，所以可以使用script標簽的src屬性請求后台數據。

②由於src在加載數據成功后，會直接將加載內容放入到script標簽中。所以后台直接返回JSON字符串不能在script標簽中解析。因此，后台應該返回給前台一個回調函數，並將JSON字符串作為參數傳入。

③前台就收到返回的回調函數，將直接在script標簽中調用。因此需要聲明這樣一個回調函數，作為請求成功的回調。

 jsonp：JSON with padding，是JSON的一種“使用模式”，可用於解決主流瀏覽器的跨域數據訪問的問題。

前台：

<script type="text/javascript">
        function callBack(data){
            console.log(data);
            }
    </script>
    <script type="text/javascript" src="http://localhost/lianxi/kuayu.php"></script>

后台：

header("Content-Type:text/html;charset=utf-8");

$str=<<<str

[
    {
        "name": "zhangsan",
        "age": 17,
        "hobby": [
            "吃",
            "喝",
            "玩",
            "樂"
        ],
        "score":{
            "math":78,
            "chinese":80
        }
    },
    
]
str;
echo "callBack({$str})";

前台返回：

 

3JQuery的AJax實現JSONP

 

①在ajax請求時，設置dataType為"jsonp"

②后台返回時，依然需要返回回調函數名。但是ajax在發送請求時，會默認使用get請求回調函數名發給后台，后台可以使用$_GET['callback']取出回調函數名
echo "{$_GET['callback']}({$str})";

③后台返回以后，ajax依然可以用success作為成功的回調函數：
success:function(data){}

當然后台也可以隨便返回一個回到函數名， echo "callBack({$json})"; 前台只要請求成功，就會自動調用這個函數。類似第二條的②③步

 

前台：

$.ajax({
                type:"post",
                url:"http://localhost/lianxi/kuayu.php",
                dataType:"jsonp",
                success:function(data){
                    console.log(data);
                }
            });

后台：

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

前台返回：

 

 

作者：唯芸熙
以上就是本人常用的跨域方式，希望對各位讀者有所幫助。歡迎批評、交流與溝通。