zoukankan      html  css  js  c++  java
  • 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

  • 相关阅读:
    Swift # Apple Pay集成
    GitHub Top 100 简介
    一些常用算法
    CocoaPods 建立私有仓库
    安装 CocoaPods & Alcatraz
    iOS程序 # 启动过程
    Apache & WebDav 配置(二)
    SVN & Git (二)
    SVN & Git (一)
    poj 3169 Layout (差分约束)
  • 原文地址:https://www.cnblogs.com/you000/p/6253606.html
Copyright © 2011-2022 走看看