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 17 Javascript
js控制淡入淡出示例代码
Nov 12 Javascript
Javascript学习笔记之 对象篇(三) : hasOwnProperty
Jun 24 Javascript
JavaScript使用Math.Min返回两个数中较小数的方法
Apr 06 Javascript
javascript高级选择器querySelector和querySelectorAll全面解析
Apr 07 Javascript
非常酷炫的Bootstrap图片轮播动画
May 27 Javascript
jquery 获取select数组与name数组长度的实现代码
Jun 20 Javascript
JS触摸屏网页版仿app弹窗型滚动列表选择器/日期选择器
Oct 30 Javascript
js原生之焦点图转换加定时器实例
Dec 12 Javascript
element form 校验数组每一项实例代码
Oct 10 Javascript
vue抽出组件并传值实例
Jul 31 Javascript
vue-amap根据地址回显地图并mark的操作
Nov 03 Javascript
浅谈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
Smarty+QUICKFORM小小演示
2007/02/25 PHP
全新的PDO数据库操作类php版(仅适用Mysql)
2012/07/22 PHP
PHP中使用虚代理实现延迟加载技术
2014/11/05 PHP
Symfony学习十分钟入门经典教程
2016/02/03 PHP
php使用ftp远程上传文件类(完美解决主从文件同步问题的方法)
2016/09/23 PHP
浅谈PHP中pack、unpack的详细用法
2018/03/12 PHP
laravel实现简单用户权限的示例代码
2019/05/28 PHP
javascript 播放器 控制
2007/01/22 Javascript
解决ExtJS在chrome或火狐中正常显示在ie中不显示的浏览器兼容问题
2013/01/11 Javascript
node.js中的fs.futimes方法使用说明
2014/12/17 Javascript
关于JS中setTimeout()无法调用带参函数问题的解决方法
2016/06/21 Javascript
浅析JavaScript中break、continue和return的区别
2016/11/30 Javascript
jQuery实现动态添加tr到table的方法
2016/12/26 Javascript
js实现登录框鼠标拖拽效果
2017/03/09 Javascript
基于vue.js实现侧边菜单栏
2017/03/20 Javascript
原生JS利用transform实现banner的无限滚动示例代码
2020/06/15 Javascript
Vue——解决报错 Computed property &quot;****&quot; was assigned to but it has no setter.
2020/12/19 Vue.js
python中assert用法实例分析
2015/04/30 Python
从Python的源码来解析Python下的freeblock
2015/05/11 Python
详解Python中的日志模块logging
2015/06/19 Python
在Django的URLconf中使用多个视图前缀的方法
2015/07/18 Python
Python简单计算文件MD5值的方法示例
2018/04/11 Python
python中的decorator的作用详解
2018/07/26 Python
Python使用sorted对字典的key或value排序
2018/11/15 Python
Python实现多态、协议和鸭子类型的代码详解
2019/05/05 Python
pygame实现非图片按钮效果
2019/10/29 Python
python关闭占用端口方式
2019/12/17 Python
Python使用正则表达式实现爬虫数据抽取
2020/08/17 Python
HTML5 Canvas实现玫瑰曲线和心形图案的代码实例
2014/04/10 HTML / CSS
英国袜子店:Sock Shop
2017/01/11 全球购物
瑞典首都斯德哥尔摩的多元奢侈时尚品牌:Acne Studios
2017/07/09 全球购物
应届生求职信写作技巧
2013/10/24 职场文书
优秀党员获奖感言
2014/02/18 职场文书
小学教师师德承诺书
2014/05/23 职场文书
第二次离婚起诉书
2015/05/18 职场文书
嘉年华活动新闻稿
2015/07/17 职场文书