澳门金沙在线官网 1

在漫漫的前端开采旅途上,无可制止的会接触到ajax,何况一般情形下都是用在同一域下的ajax央求;不过借使诉求是爆发在不一样的域下,央求就不恐怕试行,而且会抛出特别提醒不允许跨域诉求,如今自个儿并未找到明显的材料表明那是干什么,作者感到应该是由于安全性的思量呢。纵然如此,要贯彻跨域访问的话,方法只怕有个别,况且不但一种,在此处介绍个中一种缓和方案:怎样使用iframe达成ajax的跨域央浼。

1、编码

澳门金沙在线官网 2

var str = encodeURIComponent;

澳门金沙在线官网 3

2、解码

一般来讲图所示:域a.com的页面request.html(即

var str = decodeURIComponent(UrlEncode);

澳门金沙在线官网 4

其实代码:

要兑现域a.com的request.html需要域b.com的process.php,能够将伏乞的参数通过U卡宴L传给response.html,由response.html向process.php发出真正的ajax供给(response.html与process.php都属于域b.com),然后将再次回到的结果通过U奥迪Q5L传给proxy.html,最终由于proxy.html与request.html是在同一域下,所以能够在proxy.html利用window.top将结果回到给request.html完成跨域通讯。

var courseName = requestObject.request.intents[0].slots.bizName.value;

整套工艺流程的笔触其实十显明晰,真正的ajax央求并非发生在域a.com,而是爆发在域b.com;而域a.com是做了两件事,第一件事是由request.html落成,向域b.com发送传入参数;第二件事由proxy.html完毕,把域b.com的响应数据递回给request.html。

courseName = encodeURIComponent(courseName);

澳门金沙在线官网 5

console.log(\”urlencode #####\”+decodeURIComponent(courseName));

跨域访问流程图

java 代码:String data = request.getParameter;data =
java.net.URLDecoder.decode(data, \”UTF-8\”);

OK,接下去正是怎么着用代码落成了;以前先看文书档案结构:

request.html

proxy.html

response.html

process.php

1、先来看request.html,为了便于了然,笔者把js也置于了页面上:

复制代码 代码如下:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html;
charset=UTF-8″>
<title>该页面包车型客车路子是:;
</head>
<body>
<p id=”result”>这里将会填上响应的结果</p>
<a id=”sendBtn”
href=”javascript:void(0)”>点击,发送跨域乞求</a>
<iframe id=”serverIf”></iframe>
<script type=”text/javascript”>
document.getElementById(“sendBtn”).onclick = function() {
var url = “”;
var fn = “GetPerson”;//那是概念在response.html的点子
var reqdata = ‘{“id” : 24}’;//那是伸手的参数
var callback =
“CallBack”;//那是伸手全经过完结后进行的回调函数,推行最终的动作
CrossRequest(url, fn, reqdata, callback);//发送央浼
}
function CrossRequest(url, fn, reqdata, callback) {
var server = document.getElementById(“serverIf”);
server.src = url + “?fn=” + encodeUEnclaveIComponent(fn) + “&data=” +
encodeUTucsonIComponent(reqdata) + “&callback=” +
encodeU福睿斯IComponent(callback);//这里由request.html向response.html发送的诉求其实就是经过iframe的src将参数与回调方法传给response.html
}
function CallBack(data) {//回调函数
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>

看代码和注释相信都很轻巧领悟,那么些页面其实便是要告知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的代码:

复制代码 代码如下:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html;
charset=UTF-8″>
<title>该页面包车型地铁门路是:;
</head>
<body>
<iframe id=”proxy”></iframe>
<script type=”text/javascript”>
function _request(reqdata, url, callback) {//通用方法,ajax央浼
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参数
var query = location.href.split(“?”)[1];
var value = decodeURIComponent(query.split(key +
“=”)[1].split(“&”)[0]);
return value;
}
function GetPerson(reqdata, callback) {//向process.php发送ajax请求
var url = “process.php”;
var fn = function(data) {
var proxy = document.getElementById(“proxy”);
proxy.src = “” + 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>

此间实在就是接受来自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了:

复制代码 代码如下:

<!DOCTYPE html>
<html>
<head>
澳门金沙在线官网,<meta http-equiv=”Content-Type” content=”text/html;
charset=UTF-8″>
<title>该页面包车型地铁渠道是:;
</head>
<body>
<script type=”text/javascript”>
function _getUrl(key) {//通用方法,获取URL参数
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传过来的回调函数名以及从response.html直接传过来的响应数据,利用window.top实践request.html里定义的回调函数。

实则行使中,proxy.html基本上能够是三个通用的代办,没有须求改变,假设急需利用相当多跨域方法,这个措施都足以在域a.com里面增加,而域b.com就一定于概念一些接口供a.com调用,如GetPerson,当然那并非真正的接口,只是方便清楚,打个举例;别的,当然正是要把iframe遮掩起来。OK,最终依旧奉上那句古语:所全部的技巧实际不是最要害的,最要害的是上学的力量。

相关文章