javascript实现跨域的方法汇总


Posted in Javascript onJune 25, 2015

由于同源策略的限制,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);



}
Javascript 相关文章推荐
用一段js程序来实现动画功能
Mar 06 Javascript
ASP中Sub和Function的区别说明
Aug 30 Javascript
JavaScript代码复用模式详解
Nov 07 Javascript
JavaScript触发onScroll事件的函数节流详解
Dec 14 Javascript
JavaScript中Hoisting详解 (变量提升与函数声明提升)
Aug 18 Javascript
详解JS转换数值函数Number()、parseInt()、parseFloat()
Aug 24 Javascript
VUE 实现滚动监听 导航栏置顶的方法
Sep 11 Javascript
Vue加载json文件的方法简单示例
Jan 28 Javascript
详解50行代码,Node爬虫练手项目
Apr 22 Javascript
js getBoundingClientRect使用方法详解
Jul 17 Javascript
javaScript中indexOf用法技巧
Nov 26 Javascript
vue使用exif获取图片旋转,压缩的示例代码
Dec 11 Vue.js
浅谈JavaScript字符串拼接
Jun 25 #Javascript
javascript最基本的函数汇总
Jun 25 #Javascript
使用javascript将时间转换成今天,昨天,前天等格式
Jun 25 #Javascript
javascript中的Function.prototye.bind
Jun 25 #Javascript
jQuery实现为图片添加镜头放大效果的方法
Jun 25 #Javascript
jquery实现的缩略图预览滑块实例
Jun 25 #Javascript
使用javascript提交form表单方法汇总
Jun 25 #Javascript
You might like
php匹配字符中链接地址的方法
2014/12/22 PHP
PHP文件缓存smarty模板应用实例分析
2016/02/26 PHP
Zend Framework动作控制器用法示例
2016/12/09 PHP
JS中自定义定时器让它在某一时刻执行
2014/09/02 Javascript
浅谈JavaScript Array对象
2014/12/29 Javascript
DOM基础教程之使用DOM
2015/01/19 Javascript
论Bootstrap3和Foundation5网格系统的异同
2016/05/16 Javascript
利用ES6的Promise.all实现至少请求多长时间的实例
2017/08/28 Javascript
js事件on动态绑定数据,绑定多个事件的方法
2018/09/15 Javascript
Vue中的$set的使用实例代码
2018/10/08 Javascript
小程序云开发教程如何使用云函数实现点赞功能
2019/05/18 Javascript
如何在微信小程序中实现Mixins方案
2019/06/20 Javascript
小程序中this.setData的使用和注意事项
2019/08/28 Javascript
Openlayers实现地图的基本操作
2020/09/28 Javascript
原生js实现自定义滚动条
2021/01/20 Javascript
使用PYTHON接收多播数据的代码
2012/03/01 Python
python获取远程图片大小和尺寸的方法
2015/03/26 Python
python采集百度百科的方法
2015/06/05 Python
python利用sklearn包编写决策树源代码
2017/12/21 Python
Python常见工厂函数用法示例
2018/03/21 Python
Python中垃圾回收和del语句详解
2018/11/15 Python
python虚拟环境迁移方法
2019/01/03 Python
解决PyCharm不运行脚本,而是运行单元测试的问题
2019/01/17 Python
Python Pexpect库的简单使用方法
2019/01/29 Python
python如何使用Redis构建分布式锁
2020/01/16 Python
python 30行代码实现蚂蚁森林自动偷能量
2021/02/08 Python
css3动画事件—webkitAnimationEnd与计时器time事件
2013/01/31 HTML / CSS
美国户外生活方式品牌:Eddie Bauer
2016/12/28 全球购物
美国隐形眼镜网:Major Lens
2018/02/09 全球购物
模具设计与制造专业应届生求职信
2013/10/18 职场文书
会展策划与管理专业大学生职业生涯规划
2014/02/07 职场文书
上课迟到检讨书300字
2014/10/15 职场文书
2014年少先队工作总结
2014/12/03 职场文书
入党介绍人意见范文
2015/06/01 职场文书
python基础学习之生成器与文件系统知识总结
2021/05/25 Python
Java实现添加条码或二维码到Word文档
2022/06/01 Java/Android