關於Ajax跨域請求

標籤：state   關於   pre   read   har   轉換   回調   調用   告訴   

什麼是跨域？

網域名稱地址組成：

http:// www . google : 8080 / script/jquery.js

　　　　  http://              （協議號）

                www                （子網域名稱）

                google             （主網域名稱）

                8080                （連接埠號碼）

                script/jquery.js （請求的地址）

當協議、子網域名稱、主網域名稱、連接埠號碼中任意一各不相同時，都算不同的“域”。

不同的域之間相互請求資源，就叫“跨域”。

跨域解決辦法？

1.代理

這種方式是通過後台(ASP、PHP、JAVA、ASP.NET)擷取其他網域名稱下的內容，然後再把獲得內容返回到前端，這樣因為在同一個網域名稱下，所以就不會出現跨域的問題。

實現代碼：建立一個AJAX請求（頁面地址為：http://localhost/ajax/proxy.html）

    var request = null;    if(window.XMLHttpRequest){        request = new XMLHttpRequest;    }else{        request = new ActiveXObject("Microsoft.XMLHttp");    }    request.onreadystatechange = function{        console.log(this.readyState);        if(this.readyState===4 && this.status===200){ var resultObj = eval("("+this.responseText+")");    //將返回的文本資料轉換JSON對象 document.getElementById("box").innerHTML = resultObj.name+":"+resultObj.sex;    //將返回的內容顯示在頁面中        }    }    request.open("POST","proxy.php",true);    request.setRequestHeader("Content-Type","application/x-www-form-urlencoded");    request.send("name=呂銘印&sex=男");

建立AJAX請求。

proxy.php代碼

header("Content-type:text/html;charset=utf-8");$url = "http://localhost:63342/ajax/proxy.js";$contents = file_get_contents($url);echo $contents;

使用php代碼擷取localhost:63342下的proxy.js檔案。

proxy.js代碼

proxy.html運行結果

至此，使用代理實現了訪問不同域之間的檔案。

首先在proxy.html使用AJAX訪問背景proxy.php檔案，然後proxy.php接收到請求之後去訪問localhost:63342中的proxy.js檔案，擷取到proxy.js的內容後，將內容返回到前端頁面，這就實現了跨域的功能。

如果要訪問多個跨域檔案，可以以參數的形式告訴後台proxy.php檔案要訪問的檔案的地址。

2.jsonp+使用SRC屬性

實現步驟：　　　

　　　　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標籤中調用。因此，需要聲明這樣一個回呼函數，作為請求成功的回調

js代碼：

 

php代碼：

結果：

3.JQuery的Ajax實現jsonp

實現步驟：

       1、在ajax請求時，設定dataType為"jsonp"；

       2、後台返回時，依然需要返回回呼函數名，但是，ajax在發送請求時，會預設使用get請求將回呼函數名發給後台，

  　　　　 後台$_GET[‘callback‘] 取出函數名：

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

       3、後台返回以後，前台就可以使用ajax的success函數作為成功的回調

 　　　　　　  ---    success : function(data){}

js代碼：

php檔案：

結果：

4."XHR2"(XMLHttpRequest Level 2)

“XHR2” 全稱 “XMLHttpRequest Level2” 是HTML5提供的方法，對跨域訪問提供了很好的支援，並且還有一些新的功能。

* IE10一下的版本都不支援

* 只需要在伺服器端頭部加上下面兩句代碼：

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

　　header( "Access-Control-Allow-Methods:POST,GET" );

總結：

代理實現最麻煩，但使用最廣泛，任何支援AJAX的瀏覽器都可以使用這種方式。

JSONP相對簡單，但只支援GET方式調用。

XHR2最簡單，但只支援HTML5，如果你是移動端開發，可以選擇使用XHR2。

 

關於Ajax跨域請求