ajax處理跨域有幾種方式？實現原理是什嗎？

標籤：

一、什麼是跨域

我們先回顧一下網域名稱地址的組成：

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

　　　　  http:// （協議號）

               www  （子網域名稱）

             google （主網域名稱）

               8080 （連接埠號碼）

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

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

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

比如：http://www.abc.com/index.html 請求 http://www.def.com/sever.php

 二、出現跨域問題的情況

由於在工作中需要使用AJAX請求其他網域名稱下的請求，但是會出現拒絕訪問的情況，這是因為基於安全的考慮，AJAX只能訪問本地的資源，而不能跨域訪問。

比如說你的網站網域名稱是aaa.com，想要通過AJAX請求bbb.com網域名稱中的內容，瀏覽器就會認為是不安全的，所以拒絕訪問。

會出現跨域問題的幾種情況：

 

三、處理跨域的方法1 -- 代理

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

比如在北京（www.beijing.com/sever.php）和上海（www.shanghai.com/sever.php）各有一個伺服器，北京的後端（www.beijing.com/sever.php）直接存取上海的服務，然後把擷取的響應值返回給前端。也就是北京的服務在後台做了一個代理，前端只需要訪問北京的伺服器也就相當與訪問了上海的伺服器。這種代理屬於背景技術，所以不展開敘述。

 

四、處理跨域的方法2 -- JSONP

假設在http://www.aaa.com/index.php這個頁面中向http://www.bbb.com/getinfo.php提交GET請求，那麼我們在www.aaa.com頁面中添加如下代碼：

1234567

var eleScript= document.createElement("script"); //建立一個script元素 eleScript.type = "text/javascript"; //宣告類型、 eleScript.src = "http://www.bbb.com/getinfo.php"; //添加src屬性 引入跨域訪問的url document.getElementsByTagName("HEAD")[0].appendChild(eleScript); //在頁面中添加新建立的script元素

當GET請求從http://www.bbb.com/getinfo.php返回時，可以返回一段JavaScript代碼，這段代碼會自動執行，可以用來負責調用http://www.aaa.com/index.php頁面中的一個callback函數。看下面一個列子：

在www.aaa.com頁面中：

1234567891011

<script> 　　function jsonp( json ){ 　　　　document.write( json.name ); //輸出周星馳 } <script> <script src="http://www.bbb.com/getinfo.php"></script>

在www.bbb.com頁面中：

　　jsonp({ "name":"周星馳","age":45 });

也就是在www.aaa.com頁面中聲明，在www.bbb.com頁面中調用。但是JSONP只支援 “GET” 請求，但不支援 “POST” 請求。

 

五、處理跨域的方法3 -- XHR2（推薦方法）

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

* IE10一下的版本都不支援

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

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

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

ajax處理跨域有幾種方式？實現原理是什嗎？