JavaScript跨域提交数据

Posted you000bbs

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JavaScript跨域提交数据相关的知识，希望对你有一定的参考价值。

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跨域提交数据的主要内容，如果未能解决你的问题，请参考以下文章

通过 Ajax Javascript 调用 SAP SOAP Web 服务——绕过跨域策略

跨越请求详解

Spring mvc 表单提交问题！！关于date类型！！

JavaScript学习--Item33 跨域总结与解决办法

CORS 跨域 node |XMLHttpRequest 跨域提交数据 node

为什么form表单提交没有跨域问题，但ajax提交有跨域问题？