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查看html源文件
Nov 08 Javascript
javascript 火狐(firefox)不显示本地图片问题解决
Jul 05 Javascript
js 浮动层菜单收藏
Jan 16 Javascript
Ext.get() 和 Ext.query()组合使用实现最灵活的取元素方式
Sep 26 Javascript
table insertRow、deleteRow定义和用法总结
May 14 Javascript
Javascript实现计算个人所得税
May 10 Javascript
jquery $.trim()去除字符串空格的实现方法【附图例】
Mar 30 Javascript
自动化测试读写64位操作系统的注册表
Aug 15 Javascript
原生JS与jQuery编写简单选项卡
Oct 30 jQuery
微信小程序中上传图片并进行压缩的实现代码
Aug 28 Javascript
vue 实现购物车总价计算
Nov 06 Javascript
工作中常用js功能汇总
Nov 07 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
首页四格,首页五格For6.0(GBK)(UTF-8)[12种组合][9-18][版主安装测试通过]
2007/09/24 PHP
php的dl函数用法实例
2014/11/06 PHP
PHP支付宝当面付2.0代码
2018/12/21 PHP
PHP中的self关键字详解
2019/06/23 PHP
返回页面顶部top按钮通过锚点实现(自写)
2013/08/30 Javascript
jQuery 借助插件Lavalamp实现导航条动态美化效果
2013/09/27 Javascript
做好七件事帮你提升jQuery的性能
2014/02/06 Javascript
JavaScript实现twitter puddles算法实例
2014/12/06 Javascript
jQuery技巧之让任何组件都支持类似DOM的事件管理
2016/04/05 Javascript
非常漂亮的相册集 使用jquery制作相册集
2016/04/28 Javascript
canvas实现动态小球重叠效果
2017/02/06 Javascript
js数字计算 误差问题的快速解决方法
2017/02/28 Javascript
Vue.js路由vue-router使用方法详解
2017/03/20 Javascript
javascript实现延时显示提示框效果
2017/06/01 Javascript
React 高阶组件入门介绍
2018/01/11 Javascript
Node.JS段点续传:Nginx配置文件分段下载功能的实现方法
2018/03/12 Javascript
iview中Select 选择器多选校验方法
2018/03/15 Javascript
JQuery元素快速查找与操作
2018/04/22 jQuery
微信小程序使用gitee进行版本管理
2018/09/20 Javascript
vue2.0+SVG实现音乐播放圆形进度条组件
2019/09/21 Javascript
vue遍历对象中的数组取值示例
2019/11/07 Javascript
简单掌握Python的Collections模块中counter结构的用法
2016/07/07 Python
python访问抓取网页常用命令总结
2017/04/11 Python
Python+PIL实现支付宝AR红包
2018/02/09 Python
在Python 不同级目录之间模块的调用方法
2019/01/19 Python
Python self用法详解
2020/11/28 Python
python 实现网易邮箱邮件阅读和删除的辅助小脚本
2021/03/01 Python
劳资员岗位职责
2013/11/11 职场文书
应付会计岗位职责
2013/12/12 职场文书
学习雷锋演讲稿
2014/05/10 职场文书
社区矫正工作方案
2014/06/04 职场文书
2014年效能监察工作总结
2014/11/21 职场文书
2014年测量员工作总结
2014/12/12 职场文书
2015年机械设备管理工作总结
2015/05/04 职场文书
新郎新娘致辞
2015/07/31 职场文书
小学生必读成语故事大全:送给暑假的你们
2019/07/09 职场文书