由于同源策略的限制,XMLHttpRequest只允许请求当前源(包含域名、协议、端口)的资源。

json与jsonp的区别:
    JSON是一种数据交换格式,而JSONP是一种依靠开发人员创造出的一种非官方跨域数据交互协议。

script标签经常被用来加载不同域下的资源,可以绕过同源策略。(有src属性的都可以获取异域文件)。
如果请求的这个远程数据本身就是一段可执行的js,那么这些js会被执行(相当于eval)。
    
方法一:
利用script标签请求(<script src="http://....jsp?callback=回调函数名"></script>)
在使用script标签请求前,先进行回调函数的申明调用,
    <script>
        function 回调函数名(data数据){   。。。。 }
    </script>
    <script src="http://....jsp?callback=回调函数名"></script>

使用JSON来传递javascript对象是一种最简单的方式了,这样的跨域通讯方式称为JSONP。
    
    远程服务器拼凑字符串:
        回调函数名( {"name1":"data1","name2","data2"} )
    这种以后台拼凑json数据,利用回调函数传参的形式返回给客户端
    (可以直接调用相当于已经将获取的字符串进行eval了处理)
    例如:function databack(data){ alert(data.name1) }  // 会输出显示"data1"

方法二:
jquery实现异域加载方法更为简单(与ajax异步请求方式相同)
    $.ajax({
        type : "get",
        dataType:"json",
        success : function(data){ alert(data.name1) };
    })
    或者简写形式
    var url = "http://.....jsp?callback=?"; // 在jquery中此处的callback值可以为任意,因为

jquery进行处理后都是利用success回调函数进行数据的接受;
    $.getJSON( url, function(data){ alert(data.name1) });

方法三:
ajax跨域之服务端代理
    在同源的后台设置一个代理程序(proxy.jsp...);在服务器端与异域的服务器交互。
    
    jquery前台传输数据:
        例如:
      $.get(
          'http://。。。.jsp',    // 代理程序地址
          {
              name1 : "data1",
              name2 : "data2"
          },
          function(data){
          if(data == 1) alert('发送成功!');
          }
      );
    
    后台数据的处理 :
        String data1 = request.getParameter("name1");
        ........
        // 此处的url为另一域下的地址并带有参数
        String url = "http://.....com/.../sss.jsp?" + "name1=" + data1+ "name2=" +

data2;
        // 跳转到另一个域进行数据的处理并返回json格式的数据
        request.getRequestDispatcher(url).forward(request,response);

方法四:
    利用iframe标签的src属性,进行跨域的访问,将获取到的值存储到当前的iframe中,然后再

同一页面进行获取该iframe的body内的值。
    <body>
        <div id="show"></div>
        <iframe id="frame" style="display: none;"></iframe>
    </body>
    <script>
$("#frame").attr("src", "路径?time=" + new Date().getTime()).load(function(){
    // 获取iframe标签的值并进行获取,显示到页面
    $("#show").append("[data: " + $($("#frame").get(0).contentDocument).find("body").text()

+ " ]");
});
    </script>

方法五:
    HTML5中websocket可以进行跨域的访问;
  创建一个websocket对象:

    var ws = new WebSocket(url);

  主要处理的事件类型有(onopen,onclose,onmessage,onerror);

    例如:

    ws.onopen = function(){

      console.log("open");

      // 向后台发送数据

      ws.send("open");

    }

    后台可以是java,php,nodejs等,对数据处理用时间onmessage事件对返回的值进行前端处理。

    ws.onmessage = function(eve){

      console.log(eve.data);

    }

  

js实现跨域的方法的更多相关文章

  1. JS访问或设置cookie的方法+跨域调用方法

    无意中从163网站获取的JS访问或设置cookie的方法,Log到日志上以防遗忘 //COOKIE功能检查function fCheckCookie(){    if(!navigator.cooki ...

  2. js调用跨域

    web aapi 初体验 解决js调用跨域问题   跨域界定 常见跨域: 同IP不同端口: http:IP:8001/api/user     http:IP:8002/api/user 不同IP不同 ...

  3. js&jquery跨域详解jsonp,jquery并发大量请求丢失回调bug

    URL  说明 是否允许通信 http://www.a.com/a.js http://www.a.com/b.js 同一域名下 允许 http://www.a.com/lab/a.js http:/ ...

  4. [转]vue跨域解决方法

      vue跨域解决方法 vue项目中,前端与后台进行数据请求或者提交的时候,如果后台没有设置跨域,前端本地调试代码的时候就会报“No 'Access-Control-Allow-Origin' hea ...

  5. AJAX四种跨域处理方法

    同源策略 同源策略 同源策略限制从一个源加载的文档或者脚本如何与来自另一个源的资源进行交互.这是一个用于隔离潜在恶意文件的关键的安全机制. 具体定义是:一段脚本向后台请求数据,只能读取属于同一协议名. ...

  6. JS JSOP跨域请求实例详解

    JSONP(JSON with Padding)是JSON的一种“使用模式”,可用于解决主流浏览器的跨域数据访问的问题.这篇文章主要介绍了JS JSOP跨域请求实例详解的相关资料,需要的朋友可以参考下 ...

  7. 搞懂:前端跨域问题JS解决跨域问题VUE代理解决跨域问题原理

    什么是跨域 跨域:一个域下的文档或脚本试图去请求另一个域下的资源 广义的跨域包含一下内容: 1.资源跳转(链接跳转,重定向跳转,表单提交) 2.资源请求(内部的引用,脚本script,图片img,fr ...

  8. js执行跨域请求

    //js执行跨域请求 var _script = document.createElement('script'); _script.type = "text/javascript" ...

  9. react-native debug js remotely跨域问题

    react-native debug js remotely跨域问题 我们在安卓真机上调试react-native时,启用debug js remotely的时候,会出现跨域问题.这个时候我们只需要一 ...

随机推荐

  1. poj 2923 Relocation 解题报告

    题目链接:http://poj.org/problem?id=2923 题目意思:给出两部卡车能装的最大容量,还有n件物品的分别的weight.问以最优方式装入,最少能运送的次数是多少. 二进制表示物 ...

  2. 【转载】Java中StringTokenizer类的作用

    StringTokenizer是一个用来分隔String的应用类,相当于VB的split函数.1.构造函数public StringTokenizer(String str)public String ...

  3. 【Selenium】显示、隐式等待

    显示等待 WebDriverWait 超时抛出TimeOutException,默认500毫秒 public class WaitToReturnElement { /* * 设置超时时间为5秒,返回 ...

  4. python中的编码和解码

    计算机中常见的编码方式有多种,英文一般是ascii编码,其他有unicode,utf-8,gbk,utf-16等编码. 常见编码方式: ASCII编码:ASCII是早期的编码,包含英文字母.数字和 ...

  5. I.MX6 lcd lvds 注册流程

    /************************************************************************ * I.MX6 lcd lvds 注册流程 * 说明 ...

  6. python中为什么需要使用“if __name__ == '__main__'”语句

    首先用最简洁的语言来说明一下 if __name__ == '__main__': 的作用:防止在被其他文件导入时显示多余的程序主体部分. 先举个例子,如果不用 if __name__ == '__m ...

  7. 02_通过scrollview实现内容滚动

    在ScrollView里面放一个Button和TextView程序直接就挂了. ScrollView它只限制了有几个孩子,没限制有几个孙子.给Button和TextView套上一个爹LinearLay ...

  8. spring+mybatis下delete和insert返回值-2147482646

    <bean id="sqlSessionTemplate" class="org.mybatis.spring.SqlSessionTemplate"&g ...

  9. 使用mysqlfrm恢复frm表结构,获得建表语句

    1.mysqlfrm 是一个恢复性质的工具,用来读取.frm文件并从该文件中找到表定义数据生成CREATE语句. 下载链接:https://downloads.mysql.com/archives/u ...

  10. 关于 android 中 postDelayed方法的讲解 (转载)

    转自:http://blog.csdn.net/xiabo851205/article/details/7991529 这是一种可以创建多线程消息的函数 使用方法: 1,首先创建一个Handler对象 ...