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: https://files.cnblogs.com/files/you000/ajaxcdr-1.0.zip