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 相关文章推荐
找到一点可怜的关于dojo资料,谢谢作者!
Dec 06 Javascript
多浏览器兼容性比较好的复制到剪贴板的js代码
Oct 09 Javascript
jQuery源码分析-01总体架构分析
Nov 14 Javascript
点击按钮或链接不跳转只刷新页面的脚本整理
Oct 22 Javascript
js截取小数点后几位的写法
Nov 14 Javascript
JavaScript设计模式开发中组合模式的使用教程
May 18 Javascript
less简单入门(CSS 预处理语言)
Mar 08 Javascript
使用 Node.js 对文本内容分词和关键词抽取
May 27 Javascript
Vue实现一个无限加载列表功能
Nov 13 Javascript
解决一个微信号同时支持多个环境网页授权问题
Aug 07 Javascript
js实现div色块碰撞
Jan 16 Javascript
vue项目配置使用flow类型检查的步骤
Mar 18 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
解析VS2010利用VS.PHP插件调试PHP的方法
2013/07/19 PHP
Thinkphp模板中截取字符串函数简介
2014/06/17 PHP
php需登录的文件上传管理系统
2020/03/21 PHP
关于jquery input textare 事件绑定及用法学习
2013/04/03 Javascript
javascript检测页面是否缩放的小例子
2013/05/16 Javascript
node.js中的querystring.stringify方法使用说明
2014/12/10 Javascript
使用javascript实现雪花飘落的效果
2015/01/13 Javascript
简介JavaScript中strike()方法的使用
2015/06/08 Javascript
基于jQuery实现表格内容的筛选功能
2016/08/21 Javascript
BootStrap中Table分页插件使用详解
2016/10/09 Javascript
深入理解选择框脚本[推荐]
2016/12/13 Javascript
jQuery 插件实现随机自由弹跳气泡样式
2017/01/12 Javascript
详解Vue 实例中的生命周期钩子
2017/03/21 Javascript
BootStrap表单验证 FormValidation 调整反馈图标位置的实例代码
2017/05/17 Javascript
详解无限滚动插件vue-infinite-scroll源码解析
2019/05/12 Javascript
python文件比较示例分享
2014/01/10 Python
Python实现破解12306图片验证码的方法分析
2017/12/29 Python
详解Python locals()的陷阱
2019/03/26 Python
python爬虫 2019中国好声音评论爬取过程解析
2019/08/26 Python
Python从文件中读取指定的行以及在文件指定位置写入
2019/09/06 Python
python cv2读取rtsp实时码流按时生成连续视频文件方式
2019/12/25 Python
django前端页面下拉选择框默认值设置方式
2020/08/09 Python
Python Pandas数据分析工具用法实例
2020/11/05 Python
selenium设置浏览器为headless无头模式(Chrome和Firefox)
2021/01/08 Python
python批量提取图片信息并保存的实现
2021/02/05 Python
JSF界面控制层技术
2013/06/17 面试题
车间组长岗位职责
2013/12/20 职场文书
餐厅执行经理岗位职责范本
2014/02/26 职场文书
写字楼租赁意向书
2014/07/30 职场文书
高职教师先进事迹材料
2014/08/24 职场文书
优秀教师单行材料
2014/12/16 职场文书
2015年母亲节寄语
2015/03/23 职场文书
举起手来观后感
2015/06/09 职场文书
警示教育片观后感
2015/06/17 职场文书
python使用pywinauto驱动微信客户端实现公众号爬虫
2021/05/19 Python
python使用pymysql模块操作MySQL
2021/06/16 Python