由于同源策略的限制，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. 一步一步学Silverlight 2系列（29）：使用Transform实现更炫的效果（上）

    概述 Silverlight 2 Beta 1版本发布了,无论从Runtime还是Tools都给我们带来了很多的惊喜,如支持框架语言Visual Basic, Visual C#, IronRuby, ...

  2. [Selenium] 测试机器上安装了多个Firefox，如何指定运行哪一个？

    可通过FirefoxBinary 来指定运行某个路径下的Firefox, 示例代码如下: public class testFirefoxBinary{ public static void main ...

  3. Css之cursor 属性

    url        需使用的自定义光标的 URL. 注释:请在此列表的末端始终定义一种普通的光标,以防没有由 URL 定义的可用光标. default 默认光标(通常是一个箭头) auto 默认.浏 ...

  4. Android Studio自动生成带系统签名的apk

    介绍签名的两种方式: 1.signapk.jar命令行方式: 如果你需要开发一个带有系统权限的app,往往需要配置SharedUserId,比如: </pre><pre name=& ...

  5. Code-zabbix：zabbix-3.4-快速入门

    ylbtech-Code-zabbix:zabbix-3.4-快速入门 1.返回顶部 1. 1 登陆和配置用户 登陆Zabbix,以及在Zabbix内建立一个系统用户. 用户名:Admin 或者 ad ...

  6. bzoj4773

    矩阵乘法 ...爆零了... 想到Floyd,却不知道怎么限制点数... 其实我们只要给Floyd加一维,dp[i][j][k]表示当前走过了i个点,从j到k的最短距离,然后这样可以倍增,最后看是否有 ...

  7. NC文件的处理【netcdf】

    NC是气象领域数据的标准格式之一. 能够更好的存储格点数据. 下面为测试NC文件的读写. git:https://git.oschina.net/ipnunu/nctest pom.xml <p ...

  8. iOS View

    创建: 2018/04/19 完成: 2018/04/20 View的创建  创建  storyboard上操作  与代码连接 ● 目的: 通过代码控制view ● 按住option拖动 View的坐 ...

  9. python 类属性和实例属性、方法 访问权限问题

    class Animal: cls_attr = 'cls_attr' _cls_attr = '_cls_attr' __cls_attr = '__cls_attr' def __init__(s ...

  10. bzoj 4504: K个串【大根堆+主席树】

    像超级钢琴一样把五元组放进大根堆,每次取一个出来拆开,(d,l,r,p,v)表示右端点为d,左端点区间为(l,r),最大区间和值为v左端点在p上 关于怎么快速求区间和,用可持久化线段树维护(主席树?) ...