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

  • 相关阅读:
    Uva 10935 Throwing cards away I
    Uva 3226 Symmetry
    eclipse @ 注释为何一写就报错
    2015省赛小感想
    Zoj 3842 Beauty of Array
    fedora 设置命令别名
    Uva220 Othello
    工作小技巧积累
    SSL介绍与Java实例
    一个完整的SSL连接建立过程
  • 原文地址:https://www.cnblogs.com/you000/p/6253606.html
Copyright © 2020-2023  润新知