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 相关文章推荐
控制打印时页眉角的代码
Feb 08 Javascript
JavaScript prototype 使用介绍
Aug 29 Javascript
基于JavaScript创建动态Dom
Dec 08 Javascript
JavaScript希尔排序、快速排序、归并排序算法
May 08 Javascript
页面向下滚动ajax获取数据的实现方法(兼容手机)
May 24 Javascript
jquery css实现邮箱自动补全
Nov 14 Javascript
JS简单实现父子窗口传值功能示例【未使用iframe框架】
Sep 20 Javascript
利用Javascript开发一个二维周视图日历
Dec 14 Javascript
Vue项目全局配置微信分享思路详解
May 04 Javascript
jQuery获取随机颜色的实例代码
May 21 jQuery
vue移动端弹框组件的实例
Sep 25 Javascript
js基础之事件捕获与冒泡原理
Oct 09 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
Netbeans 8.2将支持PHP7 更精彩
2016/06/13 PHP
Laravel中log无法写入问题的解决
2017/06/17 PHP
javascript几个易错点记录
2014/11/26 Javascript
JS实现动态给图片添加边框的方法
2015/04/01 Javascript
js实现的简洁网页滑动tab菜单效果代码
2015/08/24 Javascript
微信小程序 picker-view 组件详解及简单实例
2017/01/10 Javascript
js获取地址栏中传递的参数(两种方法)
2017/02/08 Javascript
JS异步文件上传(兼容IE8+)
2017/04/02 Javascript
Angular中使用$watch监听object属性值的变化(详解)
2017/04/24 Javascript
vue给input file绑定函数获取当前上传的对象完美实现方法
2017/12/15 Javascript
详解mpvue scroll-view自动回弹bug解决方案
2018/10/01 Javascript
jquery3和layui冲突导致使用layui.layer.full弹出全屏iframe窗口时高度152px问题
2019/05/12 jQuery
vue项目使用.env文件配置全局环境变量的方法
2019/10/24 Javascript
html2canvas属性和使用方法以及如何使用html2canvas将HTML内容写入Canvas生成图片
2020/01/12 Javascript
JS+CSS+HTML实现“代码雨”类似黑客帝国文字下落效果
2020/03/17 Javascript
Python 匹配任意字符(包括换行符)的正则表达式写法
2009/10/29 Python
深入浅析python继承问题
2016/05/29 Python
Python算术运算符实例详解
2017/05/31 Python
kaggle+mnist实现手写字体识别
2018/07/26 Python
python虚拟环境迁移方法
2019/01/03 Python
python点击鼠标获取坐标(Graphics)
2019/08/10 Python
Django使用Celery加redis执行异步任务的实例内容
2020/02/20 Python
python实现自动清理重复文件
2020/08/24 Python
AmazeUI折叠式卡片布局,整合内容列表、表格组件实现
2020/08/20 HTML / CSS
生产经理的自我评价分享
2013/11/07 职场文书
五一家具促销方案
2014/01/10 职场文书
大学生两会精神学习心得体会
2014/03/10 职场文书
财务管理专业求职信
2014/06/11 职场文书
办公用房租赁协议书
2014/11/29 职场文书
小学二年级数学教学计划
2015/01/20 职场文书
2016党员学习心得体会范文
2016/01/23 职场文书
入党心得体会
2019/06/20 职场文书
python 提取html文本的方法
2021/05/20 Python
Python下opencv使用hough变换检测直线与圆
2021/06/18 Python
python代码实现备忘录案例讲解
2021/07/26 Python
java实现面板之间切换功能
2022/06/10 Java/Android