在漫長的前端開發(fā)旅途上，無可避免的會(huì)接觸到ajax，而且一般情況下都是用在同一域下的ajax請(qǐng)求；但是如果請(qǐng)求是發(fā)生在不同的域下，請(qǐng)求就無法執(zhí)行，并且會(huì)拋出異常提示不允許跨域請(qǐng)求，目前我沒有找到明確的資料說明這是為什么，我覺得應(yīng)該是出于安全性的考慮吧。縱然如此，要實(shí)現(xiàn)跨域訪問的話，方法還是有的，而且不只一種，在這里介紹其中一種解決方案：如何利用iframe完成ajax的跨域請(qǐng)求。
如下圖所示：域a.com的頁面request.html（即http://a.com/request.html）里面嵌套了一個(gè)iframe指向域b.com的response.html，而response.html里又嵌套了域a.com的proxy.html。
要實(shí)現(xiàn)域a.com的request.html請(qǐng)求域b.com的process.php，可以將請(qǐng)求的參數(shù)通過URL傳給response.html，由response.html向process.php發(fā)出真正的ajax請(qǐng)求（response.html與process.php都屬于域b.com），然后將返回的結(jié)果通過URL傳給proxy.html，最后由于proxy.html與request.html是在同一域下，所以可以在proxy.html利用window.top將結(jié)果返回給request.html完成跨域通信。
整個(gè)流程的思路其實(shí)非常清晰，真正的ajax請(qǐng)求并不是發(fā)生在域a.com，而是發(fā)生在域b.com；而域a.com是做了兩件事，第一件事是由request.html完成，向域b.com發(fā)送傳入?yún)?shù)；第二件事由proxy.html完成，把域b.com的響應(yīng)數(shù)據(jù)遞回給request.html。
跨域訪問流程圖
OK，接下來就是如何用代碼實(shí)現(xiàn)了；在此之前先看文檔結(jié)構(gòu)：
http://a.com/
request.html
proxy.html
http://b.com/
response.html
process.php
1、先來看request.html，為了方便理解，我把js也放到了頁面上:
代碼如下:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>該頁面的路徑是：http://a.com/request.html</title>
</head>
<body>
<p id="result">這里將會(huì)填上響應(yīng)的結(jié)果</p>
<a id="sendBtn" href="javascript:void(0)">點(diǎn)擊，發(fā)送跨域請(qǐng)求</a>
<iframe id="serverIf"></iframe>
<script type="text/javascript">
document.getElementById("sendBtn").onclick = function() {
var url = "http://b.com/response.html";
var fn = "GetPerson";//這是定義在response.html的方法
var reqdata = '{"id" : 24}';//這是請(qǐng)求的參數(shù)
var callback = "CallBack";//這是請(qǐng)求全過程完成后執(zhí)行的回調(diào)函數(shù)，執(zhí)行最后的動(dòng)作
CrossRequest(url, fn, reqdata, callback);//發(fā)送請(qǐng)求
}
function CrossRequest(url, fn, reqdata, callback) {
var server = document.getElementById("serverIf");
server.src = url + "?fn=" + encodeURIComponent(fn) + "&data=" + encodeURIComponent(reqdata) + "&callback=" + encodeURIComponent(callback);//這里由request.html向response.html發(fā)送的請(qǐng)求其實(shí)就是通過iframe的src將參數(shù)與回調(diào)方法傳給response.html
}
function CallBack(data) {//回調(diào)函數(shù)
var str = "My name is " + data.name + ". I am a " + data.sex + ". I am " + data.age + " years old.";
document.getElementById("result").innerHTML = str;
}
</script>
</body>
</html>
看代碼和注釋相信都很容易理解，這個(gè)頁面其實(shí)就是要告訴response.html：我要讓你執(zhí)行你定義好的方法GetPerson，并且要用我給你的參數(shù)'{"id" : 24}'。可能感到模糊的就是為什么要把CallBack函數(shù)傳給response.html，這是定義在本頁面上的方法，response.html也不能執(zhí)行它；看接下來的代碼就會(huì)知道：response.html純粹是負(fù)責(zé)將CallBack這個(gè)方法名傳遞給下一位仁兄proxy.html，而proxy.html拿到了CallBack這個(gè)方法名就可以執(zhí)行了，因?yàn)閜roxy.html和request.html是同域的。
2、接下來我們看response.html的代碼：
代碼如下:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>該頁面的路徑是：http://b.com/response.html</title>
</head>
<body>
<iframe id="proxy"></iframe>
<script type="text/javascript">
function _request(reqdata, url, callback) {//通用方法，ajax請(qǐng)求
var xmlhttp;
if (window.XMLHttpRequest) {
xmlhttp = new XMLHttpRequest();
}
else {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function () {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
var data = xmlhttp.responseText;
callback(data);
}
}
xmlhttp.open("POST", url);
xmlhttp.setRequestHeader("Content-Type", "application/json; charset=utf-8");
xmlhttp.send(reqdata);
}
function _getQuery(key) {//通用方法，獲取url參數(shù)
var query = location.href.split("?")[1];
var value = decodeURIComponent(query.split(key + "=")[1].split("&")[0]);
return value;
}
function GetPerson(reqdata, callback) {//向process.php發(fā)送ajax請(qǐng)求
var url = "process.php";
var fn = function(data) {
var proxy = document.getElementById("proxy");
proxy.src = "http://b.com/Proxy.html?data=" + encodeURIComponent(data) + "&callback=" + encodeURIComponent(callback);
}
_request(reqdata, url, fn);
}
(function() {
var fn = _getQuery("fn");
var reqdata = _getQuery("data");
var callback = _getQuery("callback");
eval(fn + "('" + reqdata +"', '" + callback + "')");
})();
</script>
</body>
</html>
這里其實(shí)就是接收來自request.html的請(qǐng)求得到請(qǐng)求參數(shù)和方法后向服務(wù)器process.php發(fā)出真正的ajax請(qǐng)求，然后將從服務(wù)器返回的數(shù)據(jù)以及從request.html傳過來的回調(diào)函數(shù)名傳遞給proxy.html。
3、接下來看一下process.php的代碼，比較簡單：
代碼如下:
<?php
$data = json_decode(file_get_contents("php://input"));
header("Content-Type: application/json; charset=utf-8");
echo ('{"id" : ' . $data->id . ', "age" : 24, "sex" : "boy", "name" : "huangxueming"}');
?>
這幾句代碼就不打算講了，稍微有點(diǎn)PHP基礎(chǔ)都能看懂，沒PHP基礎(chǔ)的應(yīng)該都能看出個(gè)大概了，呵呵～～～4、最后就是proxy.html了：
代碼如下:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>該頁面的路徑是：http://a.com/proxy.html</title>
</head>
<body>
<script type="text/javascript">
function _getUrl(key) {//通用方法，獲取URL參數(shù)
var query = location.href.split("?")[1];
var value = decodeURIComponent(query.split(key + "=")[1].split("&")[0]);
return value;
}
(function() {
var callback = _getUrl("callback");
var data = _getUrl("data");
eval("window.top." + decodeURIComponent(callback) + "(" + decodeURIComponent(data) + ")");
})()
</script>
</body>
</html>
這里也是最后一步了，proxy終于拿到了request.html透過response.html傳過來的回調(diào)函數(shù)名以及從response.html直接傳過來的響應(yīng)數(shù)據(jù)，利用window.top執(zhí)行request.html里定義的回調(diào)函數(shù)。實(shí)際應(yīng)用中，proxy.html基本上可以是一個(gè)通用的代理，無需改動(dòng)，如果需要用到很多跨域方法，這些方法都可以在域a.com里面加上，而域b.com就相當(dāng)于定義一些接口供a.com調(diào)用，如GetPerson，當(dāng)然這并不是真正的接口，只是方便理解，打個(gè)比方；另外，當(dāng)然就是要把iframe隱藏起來。OK，最后還是奉上那句老話：所擁有的技術(shù)并不是最重要的，最重要的是學(xué)習(xí)的能力。
聲明：本網(wǎng)頁內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com
Copyright ? 2019-2025 m.alabama37th.com 版權(quán)所有
違法及侵權(quán)請(qǐng)聯(lián)系：TEL:177 7030 7066 E-MAIL:11247931@qq.com 本站由北京市萬商天勤律師事務(wù)所王興未律師提供法律服務(wù)
