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 创建快捷方式的代码(fso)
Nov 19 Javascript
window.navigate 与 window.location.href 的使用区别介绍
Sep 21 Javascript
js写的评论分页(还不错)
Dec 23 Javascript
JavaScript事件委托用法分析
Jan 24 Javascript
基于jquery实现导航菜单高亮显示(两种方法)
Aug 23 Javascript
jQuery实现滑动页面固定顶部显示(可根据显示位置消失与替换)
Oct 28 Javascript
AngularJs中Bootstrap3 datetimepicker使用实例
Dec 13 Javascript
Vue.js实战之组件之间的数据传递
Apr 01 Javascript
XMLHttpRequest对象_Ajax异步请求重点(推荐)
Sep 28 Javascript
小程序视频或音频自定义可拖拽进度条的示例代码
Sep 30 Javascript
vue项目创建并引入饿了么elementUI组件的步骤
Apr 11 Javascript
vue设置动态请求地址的例子
Nov 01 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
php代码优化及php相关问题总结
2006/10/09 PHP
PHP读取网页文件内容的实现代码(fopen,curl等)
2011/06/23 PHP
php实现邮件发送并带有附件
2014/01/24 PHP
php实现微信公众号企业转账功能
2018/10/01 PHP
PHP基于array_unique实现二维数组去重
2020/07/14 PHP
非常不错的一个javascript 类
2006/11/07 Javascript
基于jQuery图片平滑连续滚动插件
2009/04/27 Javascript
JS实现商品倒计时实现代码
2013/05/03 Javascript
jquery中append()与appendto()用法分析
2014/11/14 Javascript
JavaScript中的数值范围介绍
2014/12/29 Javascript
JavaScript实现的一个倒计时的类
2015/03/12 Javascript
javascript验证邮件地址和MX记录的方法
2015/06/16 Javascript
JavaScript必知必会(六) delete in instanceof
2016/06/08 Javascript
基于jQuery和hwSlider实现内容左右滑动切换效果附源码下载(一)
2016/06/22 Javascript
使用canvas进行图像编辑的实例
2017/08/29 Javascript
微信小程序 按钮滑动的实现方法
2017/09/27 Javascript
实例分析js事件循环机制
2017/12/13 Javascript
vue v-model实现自定义样式多选与单选功能
2018/07/05 Javascript
jQuery删除/清空指定元素的所有子节点实例代码
2019/07/04 jQuery
Vue路由守卫及页面登录权限控制的设置方法(两种)
2020/03/31 Javascript
[03:52]显微镜下的DOTA2第三期——英雄在无聊的时候干什么
2014/06/20 DOTA
python用ConfigObj读写配置文件的实现代码
2013/03/04 Python
python select.select模块通信全过程解析
2017/09/20 Python
urllib和BeautifulSoup爬取维基百科的词条简单实例
2018/01/17 Python
Django框架的使用教程路由请求响应的方法
2018/07/03 Python
12个Python程序员面试必备问题与答案(小结)
2019/06/24 Python
python 实现兔子生兔子示例
2019/11/21 Python
pytorch点乘与叉乘示例讲解
2019/12/27 Python
django3.02模板中的超链接配置实例代码
2020/02/04 Python
python logging设置level失败的解决方法
2020/02/19 Python
用python监控服务器的cpu,磁盘空间,内存,超过邮件报警
2021/01/29 Python
运动会广播稿150字
2014/02/19 职场文书
教师节活动主持词
2014/04/02 职场文书
2015年银行柜员工作总结报告
2015/04/01 职场文书
详解MySQL集群搭建
2021/05/26 MySQL
未发现nvidia显卡怎么办?Win11系统中未检测到nvidia显卡解决教程
2022/04/08 数码科技