1.通过jsonp跨域
场景：假设前台有JS方法"crossJS"，
1.1发送请求http://www.xxx.com/?callback=crossJS。(创建一个script标签，请求该地址)
1.2后台服务器，返回数据格如crossJS({"a":"b"});
优点：开发、维护简单
缺点：每次可提交数据大小受get方式限制
2.使用HTML5中新引进的window.postMessage方法来跨域传送数据
场景：
页面http://www.aaa.com/A.html:
<html>
<body>
<input type="text" id="txt"/>
<button onclick="fnSend()">发送</button>
<iframe id="ifr" src="http://192.168.127.39:82/b.html"></iframe>
</body>
<script type="text/javascript">
function fnSend(){
var ifr = document.getElementById("ifr");
var win = ifr.contentWindow;
var txt = document.getElementById("txt");
win.postMessage(‘{"msg":"‘ + txt.value + ‘"}‘,"http://192.168.127.39:82");
}
</script>
</html>
页面http://www.bbb.com/B.html:
B页面，接收结果
<ul id="msg"></ul>
<script type="text/javascript">
window.onmessage = function(msg){
msg = msg.data||{};
console.log(msg);
msg = JSON.parse(msg);
var ul = document.getElementById("msg");
var li = document.createElement("li");;
li.innerHTML = msg.msg;
ul.appendChild(li);
}
</script>
优点：可以提交数据量大。
缺点：1.页面http://www.aaa.com/A.html，不可以直接提交数据到http://www.bbb.com/站点服务器，只能通过http://www.bbb.com/B.html页面中转
2.维护麻烦，需要两个站点的页面都同时修改。
3.使用Flush方法来跨域传送数据
转载 http://zyan.cc/ajaxcdr/#entrymore
详情见demo: http://files.cnblogs.com/files/you000/ajaxcdr-1.0.zip
时间： 2024-10-20 14:35:06