這次為大家帶來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元素
<script> function jsonp( json ){ document.write( json.name ); //输出周星驰 } <script> <script src="http://www.bbb.com/getinfo.php"></script>
三、處理跨域的方法2 -- XHR2(推薦方法)
「XHR2」 全域「XMLHttpRequest Level2」 是HTML5提供的方法,對跨域訪問提供了很好的支持,並且還有一些新的功能。* IE10一下的版本都不支援
* 只需要在伺服器端頭部加上下面兩句程式碼: header( "Access-Control-Allow- Origin:*" ); header( "Access-Control-Allow-Methods:POST,GET" );關於「XHR2」 的更多資訊大家可以查看官方文檔,在這裡就不詳細敘述了,總之這是這個很好用的方法。 相信看了本文案例你已經掌握了方法,更多精彩請關注php中文網其它相關文章! 推薦閱讀:#
以上是Ajax實作跨域存取三種方法總結的詳細內容。更多資訊請關注PHP中文網其他相關文章!