利用iframe实现ajax跨域通信的实现原理(图解)
在漫长的前端开发旅途上,无可避免的会接触到ajax,而且一般情况下都是用在同一域下的ajax请求;但是如果请求是发生在不同的域下,请求就无法执行,并且会抛出异常提示不允许跨域请求,目前我没有找到明确的资料说明这是为什么,我觉得应该是出于安全性的考虑吧。纵然如此,要实现跨域访问的话,方法还是有的,而且不只一种,在这里介绍其中一种解决方案:如何利用iframe完成ajax的跨域请求。
如下图所示:域a.com的页面request.html(即http://a.com/request.html)里面嵌套了一个iframe指向域b.com的response.html,而response.html里又嵌套了域a.com的proxy.html。
要实现域a.com的request.html请求域b.com的process.php,可以将请求的参数通过URL传给response.html,由response.html向process.php发出真正的ajax请求(response.html与process.php都属于域b.com),然后将返回的结果通过URL传给proxy.html,最后由于proxy.html与request.html是在同一域下,所以可以在proxy.html利用window.top将结果返回给request.html完成跨域通信。
整个流程的思路其实非常清晰,真正的ajax请求并不是发生在域a.com,而是发生在域b.com;而域a.com是做了两件事,第一件事是由request.html完成,向域b.com发送传入参数;第二件事由proxy.html完成,把域b.com的响应数据递回给request.html。
OK,接下来就是如何用代码实现了;在此之前先看文档结构:
http://a.com/
request.html
proxy.html
http://b.com/
response.html
process.php
1、先来看request.html,为了方便理解,我把js也放到了页面上:
<!DOCTYPEhtml>
<html>
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=UTF-8">
<title>该页面的路径是:http://a.com/request.html</title>
</head>
<body>
<pid="result">这里将会填上响应的结果</p>
<aid="sendBtn"href="javascript:void(0)">点击,发送跨域请求</a>
<iframeid="serverIf"></iframe>
<scripttype="text/javascript">
document.getElementById("sendBtn").onclick=function(){
varurl="http://b.com/response.html";
varfn="GetPerson";//这是定义在response.html的方法
varreqdata="{"id":24}";//这是请求的参数
varcallback="CallBack";//这是请求全过程完成后执行的回调函数,执行最后的动作
CrossRequest(url,fn,reqdata,callback);//发送请求
}
functionCrossRequest(url,fn,reqdata,callback){
varserver=document.getElementById("serverIf");
server.src=url+"?fn="+encodeURIComponent(fn)+"&data="+encodeURIComponent(reqdata)+"&callback="+encodeURIComponent(callback);//这里由request.html向response.html发送的请求其实就是通过iframe的src将参数与回调方法传给response.html
}
functionCallBack(data){//回调函数
varstr="Mynameis"+data.name+".Iama"+data.sex+".Iam"+data.age+"yearsold.";
document.getElementById("result").innerHTML=str;
}
</script>
</body>
</html>
看代码和注释相信都很容易理解,这个页面其实就是要告诉response.html:我要让你执行你定义好的方法GetPerson,并且要用我给你的参数"{"id":24}"。可能感到模糊的就是为什么要把CallBack函数传给response.html,这是定义在本页面上的方法,response.html也不能执行它;看接下来的代码就会知道:response.html纯粹是负责将CallBack这个方法名传递给下一位仁兄proxy.html,而proxy.html拿到了CallBack这个方法名就可以执行了,因为proxy.html和request.html是同域的。
2、接下来我们看response.html的代码:
<!DOCTYPEhtml>
<html>
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=UTF-8">
<title>该页面的路径是:http://b.com/response.html</title>
</head>
<body>
<iframeid="proxy"></iframe>
<scripttype="text/javascript">
function_request(reqdata,url,callback){//通用方法,ajax请求
varxmlhttp;
if(window.XMLHttpRequest){
xmlhttp=newXMLHttpRequest();
}
else{
xmlhttp=newActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function(){
if(xmlhttp.readyState==4&&xmlhttp.status==200){
vardata=xmlhttp.responseText;
callback(data);
}
}
xmlhttp.open("POST",url);
xmlhttp.setRequestHeader("Content-Type","application/json;charset=utf-8");
xmlhttp.send(reqdata);
}
function_getQuery(key){//通用方法,获取url参数
varquery=location.href.split("?")[1];
varvalue=decodeURIComponent(query.split(key+"=")[1].split("&")[0]);
returnvalue;
}
functionGetPerson(reqdata,callback){//向process.php发送ajax请求
varurl="process.php";
varfn=function(data){
varproxy=document.getElementById("proxy");
proxy.src="http://b.com/Proxy.html?data="+encodeURIComponent(data)+"&callback="+encodeURIComponent(callback);
}
_request(reqdata,url,fn);
}
(function(){
varfn=_getQuery("fn");
varreqdata=_getQuery("data");
varcallback=_getQuery("callback");
eval(fn+"(""+reqdata+"",""+callback+"")");
})();
</script>
</body>
</html>
这里其实就是接收来自request.html的请求得到请求参数和方法后向服务器process.php发出真正的ajax请求,然后将从服务器返回的数据以及从request.html传过来的回调函数名传递给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"}");
?>
这几句代码就不打算讲了,稍微有点PHP基础都能看懂,没PHP基础的应该都能看出个大概了,呵呵~~~
4、最后就是proxy.html了:
<!DOCTYPEhtml>
<html>
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=UTF-8">
<title>该页面的路径是:http://a.com/proxy.html</title>
</head>
<body>
<scripttype="text/javascript">
function_getUrl(key){//通用方法,获取URL参数
varquery=location.href.split("?")[1];
varvalue=decodeURIComponent(query.split(key+"=")[1].split("&")[0]);
returnvalue;
}
(function(){
varcallback=_getUrl("callback");
vardata=_getUrl("data");
eval("window.top."+decodeURIComponent(callback)+"("+decodeURIComponent(data)+")");
})()
</script>
</body>
</html>
这里也是最后一步了,proxy终于拿到了request.html透过response.html传过来的回调函数名以及从response.html直接传过来的响应数据,利用window.top执行request.html里定义的回调函数。
实际应用中,proxy.html基本上可以是一个通用的代理,无需改动,如果需要用到很多跨域方法,这些方法都可以在域a.com里面加上,而域b.com就相当于定义一些接口供a.com调用,如GetPerson,当然这并不是真正的接口,只是方便理解,打个比方;另外,当然就是要把iframe隐藏起来。OK,最后还是奉上那句老话:所拥有的技术并不是最重要的,最重要的是学习的能力。
相关文章
- SpringMVC工作原理(含案例图解)
- 什么是Ajax以及ajax请求的步骤[通俗易懂]
- AJAX读音_ajax怎么发音
- Petshop4.0下载及安装图解教程[通俗易懂]
- 图解Redis
- 图解设计模式: 有趣的工厂模式
- 线索二叉树怎么画-先序线索二叉树和中序线索二叉树有什么区别 最好图解
- Adobe Audition 2019 v12.1.5更新 完美PJ版下载+安装图解教程
- 图解中断 | 中断从产生到消失的一生
- jQuery Ajax 实例 ($.ajax、$.post、$.get)详解编程语言
- “抗美援朝志愿军经典武器”系列图解④“水连珠”步枪
- Ajax技术实现MySQL数据查询与更新(ajax连接mysql)
- 使用Ajax轻松访问和操作MySQL数据库(ajax访问mysql)
- MySQL快速入门以CMD操作绘就技能图解(cmd操作mysql图解)
- Ajax无缝接入MySQL数据库(ajax请求mysql)
- Ajax注册MySQL极速轻量注册引擎(ajax注册mysql)
- 从MySQL分批传输至客户端AJAX解决方案(ajax分批mysql)
- Ajax与MySQL实现高效率数据加载(ajax mysql加载)
- 使用Ajax与Oracle实现极致可靠性开发(ajax oracle)
- MySQL安装图解两种方法(mysql两种安装图解)
- Redis中雪崩效应完美图解(redis雪崩图解)
- windows安装nginx部署步骤图解(反向代理与负载均衡)