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

  • 相关阅读:
    [Memcached]操作
    [Linux-CentOS7]安装Telnet
    PAT Advanced 1093 Count PAT's (25分)
    PAT Advanced 1065 A+B and C (64bit) (20分)
    PAT Advanced 1009 Product of Polynomials (25分)
    PAT Advanced 1008 Elevator (20分)
    PAT Advanced 1006 Sign In and Sign Out (25分)
    PAT Advanced 1002 A+B for Polynomials (25分)
    半年分布式处理回顾&机器学习(一)——线性回归
    PAT Advanced 1147 Heaps (30分)
  • 原文地址:https://www.cnblogs.com/you000/p/6253606.html
Copyright © 2011-2022 走看看