Ajax實作跨域存取三種方法總結

這次為大家帶來Ajax實現跨域訪問三種方法總結，Ajax實現跨域訪問的注意事項有哪些，下面就是實戰案例，一起來看一下。

一、什麼是跨域

##我們先回顧一下網域位址的組成：

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

jquery.js

　　　　  http://（協定編號）

              ##               8080（連接埠號）

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

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

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

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

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

（這個方法比較「笨」 故不做詳細介紹）

例如在北京（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頁面中加入以下程式碼：

　　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頁面中：

<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” 請求。

三、處理跨域的方法2 -- XHR2（推薦方法）

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

* IE10一下的版本都不支援

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

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

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

關於「XHR2」 的更多資訊大家可以查看官方文檔，在這裡就不詳細敘述了，總之這是這個很好用的方法。

相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

推薦閱讀：

#

以上是Ajax實作跨域存取三種方法總結的詳細內容。更多資訊請關注PHP中文網其他相關文章！