一、什么是跨域
我們先回顧一下域名地址的組成:
http:// www . google : 8080 / script/jquery.js
http:// (協(xié)議號(hào))
www (子域名)
google (主域名)
8080 (端口號(hào))
script/jquery.js (請求的地址)
* 當(dāng)協(xié)議、子域名、主域名、端口號(hào)中任意一各不相同時(shí),都算不同的“域”。
* 不同的域之間相互請求資源,就叫“跨域”。
比如:http://www.abc.com/index.html 請求 http://www.def.com/sever.php
二、處理跨域的方法1 -- 代理(這個(gè)方法比較“笨” 故不做詳細(xì)介紹)
比如在北京(www.beijing.com/sever.php)和上海(www.shanghai.com/sever.php)各有一個(gè)服務(wù)器,北京的后端(www.beijing.com/sever.php)直接訪問上海的服務(wù),然后把獲取的響應(yīng)值返回給前端。也就是北京的服務(wù)在后臺(tái)做了一個(gè)代理,前端只需要訪問北京的服務(wù)器也就相當(dāng)與訪問了上海的服務(wù)器。這種代理屬于后臺(tái)的技術(shù),所以不展開敘述。
三、處理跨域的方法2 -- JSONP
假設(shè)在http://www.aaa.com/index.php這個(gè)頁面中向http://www.bbb.com/getinfo.php提交GET請求,那么我們在www.aaa.com頁面中添加如下代碼:
var eleScript= document.createElement("script"); //創(chuàng)建一個(gè)script元素
eleScript.type = "text/javascript"; //聲明類型、
eleScript.src = "http://www.bbb.com/getinfo.php"; //添加src屬性 引入跨域訪問的url
document.getElementsByTagName("HEAD")[0].appendChild(eleScript); //在頁面中添加新創(chuàng)建的script元素
當(dāng)GET請求從http://www.bbb.com/getinfo.php返回時(shí),可以返回一段JavaScript代碼,這段代碼會(huì)自動(dòng)執(zhí)行,可以用來負(fù)責(zé)調(diào)用http://www.aaa.com/index.php頁面中的一個(gè)callback函數(shù)??聪旅嬉粋€(gè)列子:
在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頁面中調(diào)用。但是JSONP只支持 “GET” 請求,但不支持 “POST” 請求。
三、處理跨域的方法2 -- XHR2(推薦方法)
“XHR2” 全稱 “XMLHttpRequest Level2” 是HTML5提供的方法,對跨域訪問提供了很好的支持,并且還有一些新的功能。
* IE10一下的版本都不支持
* 只需要在服務(wù)器端頭部加上下面兩句代碼:
header( "Access-Control-Allow-Origin:*" );
header( "Access-Control-Allow-Methods:POST,GET" );
關(guān)于 “XHR2” 的更多信息大家可以查看官方文檔,在這里就不詳細(xì)敘述了,總之這是這個(gè)很好用的方法。
以上所述就是本文的全部內(nèi)容了,希望大家能夠喜歡。
您可能感興趣的文章:- 完美解決AJAX跨域問題
- AJAX跨域請求json數(shù)據(jù)的實(shí)現(xiàn)方法
- Ajax 設(shè)置Access-Control-Allow-Origin實(shí)現(xiàn)跨域訪問
- IE9版本以下ajax 跨域問題可行解決方法
- 解決AJAX中跨域訪問出現(xiàn)''沒有權(quán)限''的錯(cuò)誤
- Nginx服務(wù)器中處理AJAX跨域請求的配置方法講解
- 解決ajax跨域請求數(shù)據(jù)cookie丟失問題
- 完美解決ajax跨域請求下parsererror的錯(cuò)誤
- AJAX的跨域訪問-兩種有效的解決方法介紹
- 關(guān)于Ajax跨域問題及解決方案詳析