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 02 Javascript
jquery 双色表格实现代码
Dec 08 Javascript
按钮JS复制文本框和表格的代码
Apr 01 Javascript
JavaScript判断变量是否为undefined的两种写法区别
Dec 04 Javascript
轻松实现javascript图片轮播特效
Jan 13 Javascript
node.js中axios使用心得总结
Nov 29 Javascript
使用vue-cli创建项目的图文教程(新手入门篇)
May 02 Javascript
vue+axios新手实践实现登陆的示例代码
Jun 06 Javascript
ES6与CommonJS中的模块处理的区别
Jun 13 Javascript
echarts实现折线图的拖拽效果
Dec 19 Javascript
小程序跳转H5页面的方法步骤
Mar 06 Javascript
JavaScript实现瀑布流布局的3种方式
Dec 27 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
yii实现创建验证码实例解析
2014/07/31 PHP
Symfony2在Nginx下的配置方法图文教程
2016/02/04 PHP
php执行多个存储过程的方法【基于thinkPHP】
2016/11/08 PHP
PHP网站常见安全漏洞,及相应防范措施总结
2021/03/01 PHP
Jquery焦点与失去焦点示例应用
2014/06/10 Javascript
前端必备神器 Snap.svg 弹动效果
2014/11/10 Javascript
JavaScript实现仿新浪微博大厅和腾讯微博首页滚动特效源码
2015/09/15 Javascript
JS基于Ajax实现的网页Loading效果代码
2015/10/27 Javascript
JavaScript中 ES6 generator数据类型详解
2016/08/11 Javascript
Boostrap基础教程之JavaScript插件篇
2016/09/08 Javascript
angular过滤器实现排序功能
2017/06/27 Javascript
vue实现点击按钮下载文件功能
2019/10/11 Javascript
Vue实现渲染数据后控制滚动条位置(推荐)
2019/12/09 Javascript
使用npm命令提示: 'npm' 不是内部或外部命令,也不是可运行的程序的处理方法
2020/05/14 Javascript
Vue的props父传子的示例代码
2020/05/20 Javascript
[02:08]DOTA2英雄基础教程 马格纳斯
2014/01/17 DOTA
[01:10]DOTA2次级职业联赛 - EP战队宣传片
2014/12/01 DOTA
[02:12]Dota 2 推出全新英雄—— 电炎绝手
2019/08/23 DOTA
使用python编写简单的小程序编译成exe跑在win10上
2018/01/15 Python
Python中一行和多行import模块问题
2018/04/01 Python
Python K最近邻从原理到实现的方法
2019/08/15 Python
python tkinter组件使用详解
2019/09/16 Python
用Python实现校园通知更新提醒功能
2019/11/23 Python
节日快乐! Python画一棵圣诞树送给你
2019/12/24 Python
PyQt5中QTableWidget如何弹出菜单的示例代码
2020/02/23 Python
keras自定义损失函数并且模型加载的写法介绍
2020/06/15 Python
全球最大的跑步用品商店:Road Runner Sports
2016/09/11 全球购物
CK巴西官方网站:Calvin Klein巴西
2019/07/19 全球购物
char型变量中能不能存贮一个中文汉字
2015/07/08 面试题
汽车技术服务与营销专业推荐信
2013/11/29 职场文书
会计核算科岗位职责
2014/03/19 职场文书
2014国庆黄金周超市促销活动方案
2014/09/21 职场文书
2015羊年春节慰问信
2015/02/14 职场文书
寻找最美乡村教师观后感
2015/06/18 职场文书
用Python爬取英雄联盟的皮肤详细示例
2021/12/06 Python
Python万能模板案例之matplotlib绘制甘特图
2022/04/13 Python