由于同源策略的限制，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. java如何判断字符串是否为空（小知识）

    方法一: 最多人使用的一个方法, 直观, 方便, 但效率很低: if(s == null ||"".equals(s));方法二: 比较字符串长度, 效率高, 是我知道的最好一个方 ...

  2. Ubuntu安装mycli，让mysql命令行可以自动提示

    安装mycli 1.确保有安装python 2.确保有安装pip 3.进入su模式,以管理员身份安装 4.安装 pip install -U mycli 5.登录 mycli -u root 很好很强 ...

  3. Linux：外网域名防火墙设置导致下载失败

    问题现象: 通过IE从服务器下载文件时,提示Can't read from connection: Connection reset by peer. 别的现场都是好的,只有该现场有这个问题.所以,一 ...

  4. HUST - 1010 The Minimum Length（最小循环节）

    1.赤裸裸的最小循环节 2. 3. #include<iostream> #include<stdio.h> #include<string.h> using na ...

  5. [Selenium] WebDriver 操作 HTML5 中的 drag/drop

    以 jQuery UI 官方网站元素测试,地址:http://jqueryui.com/draggable/ 示例: package com.learningselenium.html5; impor ...

  6. [SHOI 2013] 发微博

    [题目链接] https://www.lydsy.com/JudgeOnline/problem.php?id=4419 [算法] 用std :: set维护每个人的好友集合 当两人成为好友时将每人接 ...

  7. python-----删除列表中某个元素的3种方法

    python中关于删除list中的某个元素,一般有三种方法:remove.pop.del: 1.remove: 删除单个元素,删除首个符合条件的元素,按值删除举例说明: >>> st ...

  8. 877C

    构造 想了好长时间... 答案是n+n/2 我们这么想,先把偶数位置炸一遍,所有坦克都在奇数位置,然后再把奇数炸一遍,坦克都到偶数去了,然后再炸一次偶数就都炸掉了... 好巧妙啊 奇偶讨论很重要 #i ...

  9. eclipse配置环境基本设置

    一.修改字符集编码 二修改字体 三.安装jre 四.修改jsp文件的默认字符集 五.展示想要的窗口 六.修改右键new的内容

  10. css margin边界叠加问题详谈

    问题:给子元素一个margin-top值,其父元素会跟着往下走margin-top的值 一.代码展示 HTML <body> <div class="box"&g ...