由于同源策略的限制，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. MongoDB3.6.3 windows安装配置、启动

    1.官网下载MongoDB的安装包 2.安装中一直Next即可安装成功,不过需要注意的是: 可以自定义安装,选择安装路径 值得注意的还有,安装中因为下载compass十分缓慢.把下面默认选中的勾去掉 ...

  2. WebAssembly，可以作为任何编程语言的编译目标，使应用程序可以运行在浏览器或其它代理中——浏览器里运行其他语言的程序？

    Mozilla.谷歌.微软和苹果已经决定开发一种面向Web的二进制格式.该格式名为WebAssembly,可以作为任何编程语言的编译目标,使应用程序可以运行在浏览器或其它代理中. 几年前,我们在Inf ...

  3. 书写优雅的shell脚本（五）- shell中(())双括号运算符

    在使用shell的逻辑运算符"[]"使用时候,必须保证运算符与算数之间有空格. 四则运算也只能借助:let,expr等命令完成. 今天讲的双括号"(())"结构 ...

  4. maven实战（7）-- 设置maven编译器级别

    两种方式: (一)全局设置 首先我们要在settings.xml文件中找到<profiles>标签,然后在此标签内部粘贴如下配置: <profile> <id>jd ...

  5. Gradle系列之二 Groovy对文件的操作

    Groovy对文件的操作 对文件的遍历 假设文件的原始内容为: hello,world 这里是北京 andorid and ios are good system 第一种方法:使用 eachLine( ...

  6. 51nod 1225:余数之和

    传送门 题意 略 分析 \(\sum_i^n(n\%i)=\sum_i^n(n-i*n/i)=n^2-\sum_i^ni*n/i\) \(=\sum r\sum_i^ni[n/i==r]\) 可以证明 ...

  7. hihocoder 1582 : Territorial Dispute（凸包）

    传送门 题意 略 分析 求一个凸包即可 1.所有点在凸包上且点数>3,令凸包上第1,3点为'A',其余点为'B' 2.部分点在凸包上,令凸包上点为'A',其余点为'B' 3.无可行情况 附代码 ...

  8. hdoj5317【素数预处理】

    //这个很好了...虽然是一般.. int isp[1000100]; int p[1000100]; void init() { int sum=0; int i,j; fill(isp,isp+1 ...

  9. python 子类调用父类成员的方法

    1.直接写类名调用: parent_class.parent_attribute(self) class Animal(): def __init__(self, name): self.name = ...

  10. 11.6NOIP模拟赛

    [数据规模和限制] 对于全部测试数据,满足 N,M,K≤,W≤ 各个测试点的数据规模及特殊性质如下表. 测试点 N M K ≤ ≤ ≤ ≤ ≤ ≤ ≤ ≤ ≤ ≤ 师 更多咨询:北京信息学窦老师 QQ ...