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

  • 相关阅读:
    servlet规范核心类图
    策略模式
    掌握Spark机器学习库-07-回归算法原理
    掌握Spark机器学习库-07-线性回归算法概述
    掌握Spark机器学习库-07-回归分析概述
    掌握Spark机器学习库-06-基础统计部分
    掌握Spark机器学习库-05-spark中矩阵与向量的使用
    测试开发要懂的设计模式知识
    数据可视化工具-ECharts
    掌握Spark机器学习库-02-mllib数据格式
  • 原文地址:https://www.cnblogs.com/you000/p/6253606.html
Copyright © 2011-2022 走看看