首页 > 代码库 > JavaScript跨域提交数据

JavaScript跨域提交数据

2024-08-30 20:04:40   218人阅读

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跨域提交数据


联系
我们