码迷,mamicode.com
首页 > 编程语言 > 详细

JavaScript跨域提交数据

时间:2017-01-05 20:22:03      阅读:203      评论:0      收藏:0      [点我收藏+]

标签:message   element   json   服务器   send   bbb   使用   方式   nbsp   

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

JavaScript跨域提交数据

标签:message   element   json   服务器   send   bbb   使用   方式   nbsp   

原文地址:http://www.cnblogs.com/you000/p/6253606.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!