萬盛學電腦網

 萬盛學電腦網 >> 腳本專題 >> javascript >> Ajax實現跨域訪問的三種方法

Ajax實現跨域訪問的三種方法

本文給大家介紹了ajax實現跨域訪問的3種解決方案,非常的實用,個人比較推薦第三種,小伙伴們可以著重看下。    

一、什麼是跨域

我們先回顧一下域名地址的組成:

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

二、處理跨域的方法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頁面中添加如下代碼:

? 1 2 3 4 5 6 7   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頁面中:

? 1 2 3 4 5 6 7 8 9 10 11 <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” 的更多信息大家可以查看官方文檔,在這裡就不詳細敘述了,總之這是這個很好用的方法。

以上所述就是本文的全部內容了,希望大家能夠喜歡。

 

copyright © 萬盛學電腦網 all rights reserved