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 相关文章推荐
javascript 面向对象思想 附源码
Jul 07 Javascript
用JavaScript对JSON进行模式匹配 (Part 2 - 实现)
Jul 17 Javascript
生成二维码方法汇总
Dec 26 Javascript
JavaScript将DOM事件处理程序封装为event.js 出现的低级错误问题
Aug 03 Javascript
利用BootStrap弹出二级对话框的简单实现方法
Sep 21 Javascript
Laravel整合Bootstrap 4的完整方案(推荐)
Jan 25 Javascript
基于Vue自定义指令实现按钮级权限控制思路详解
May 23 Javascript
微信小程序制作扭蛋机代码实例
Sep 24 Javascript
javascript实现点击星星小游戏
Dec 24 Javascript
js函数和this用法实例分析
Mar 13 Javascript
js实现炫酷光感效果
Sep 05 Javascript
vue如何使用模拟的json数据查看效果
Mar 31 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脚本的10个技巧(1)
2006/10/09 PHP
yii2.0整合阿里云oss的示例代码
2017/09/19 PHP
PHP设计模式之状态模式定义与用法详解
2018/04/02 PHP
在laravel中实现事务回滚的方法
2019/10/10 PHP
jQuery帮助之筛选查找 children([expr])
2011/01/31 Javascript
JS文字球状放大效果代码分享
2015/08/19 Javascript
javascript字符串替换函数如何一次性全部替换掉
2015/10/30 Javascript
关于function类中定义变量this的简单说明
2016/05/28 Javascript
利用vue-router实现二级菜单内容转换
2016/11/30 Javascript
Extjs表单输入框异步校验的插件实现方法
2017/03/20 Javascript
Angularjs 动态添加指令并绑定事件的方法
2017/04/13 Javascript
AngularJS实现的省市二级联动功能示例【可对选项实现增删】
2017/10/26 Javascript
AngularJS实现controller控制器间共享数据的方法示例
2017/10/30 Javascript
Angular学习教程之RouterLink花式跳转
2018/05/03 Javascript
浅析vue-router jquery和params传参(接收参数)$router $route的区别
2018/08/03 jQuery
微信小程序Echarts覆盖正常组件问题解决
2019/07/13 Javascript
这15个Vue指令,让你的项目开发爽到爆
2019/10/11 Javascript
微信浏览器左上角返回按钮监听的实现
2020/03/04 Javascript
Vue全局使用less样式,组件使用全局样式文件中定义的变量操作
2020/10/21 Javascript
[26:21]浴火之凤-TI4世界冠军Newbee战队纪录片
2014/08/07 DOTA
Python中的pprint折腾记
2015/01/21 Python
Python映射拆分操作符用法实例
2015/05/19 Python
Python的socket模块源码中的一些实现要点分析
2016/06/06 Python
python命令行解析之parse_known_args()函数和parse_args()使用区别介绍
2018/01/24 Python
人脸识别经典算法一 特征脸方法(Eigenface)
2018/03/13 Python
Python使用cx_Oracle模块操作Oracle数据库详解
2018/05/07 Python
Python实现通过解析域名获取ip地址的方法分析
2019/05/17 Python
tensorflow实现训练变量checkpoint的保存与读取
2020/02/10 Python
结合 CSS3 transition transform 实现简单的跑马灯效果的示例
2018/02/07 HTML / CSS
罗德与泰勒百货官网:Lord & Taylor
2016/08/12 全球购物
大学生就业自我鉴定
2013/10/26 职场文书
师德师风自我评价范文
2014/09/11 职场文书
离婚协议书范本(2014版)
2014/09/28 职场文书
房地产销售主管岗位职责
2015/02/13 职场文书
PyTorch梯度裁剪避免训练loss nan的操作
2021/05/24 Python
Python3的进程和线程你了解吗
2022/03/16 Python