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学习笔记之获取当前目录的实现代码
Dec 14 Javascript
jquery合并表格中相同文本的相邻单元格
Jul 17 Javascript
jsonp跨域请求数据实现手机号码查询实例分析
Dec 12 Javascript
浅谈Sticky组件的改进实现
Mar 22 Javascript
Javascript中 toFixed四舍六入方法
Aug 21 Javascript
js实现登录注册框手机号和验证码校验(前端部分)
Sep 28 Javascript
JS实现非首屏图片延迟加载的示例
Jan 06 Javascript
Angular 项目实现国际化的方法
Jan 08 Javascript
JS关于刷新页面的相关总结
May 09 Javascript
vue权限路由实现的方法示例总结
Jul 29 Javascript
vue2.0基于vue-cli+element-ui制作树形treeTable
Apr 30 Javascript
JS实现鼠标按下拖拽效果
Jul 23 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 数组使用详解 推荐
2011/06/02 PHP
编写php应用程序实现摘要式身份验证的方法详解
2013/06/08 PHP
PHP 循环删除无限分类子节点的实现代码
2013/06/21 PHP
PHP中Restful api 错误提示返回值实现思路
2016/04/12 PHP
利用switch语句进行多选一判断的实例代码
2016/11/14 PHP
PHP实现的最大正向匹配算法示例
2017/12/19 PHP
Jquery实现仿新浪微博获取文本框能输入的字数代码
2013/02/22 Javascript
用unescape反编码得出汉字示例
2014/04/24 Javascript
js选择并转移导航菜单示例代码
2014/08/19 Javascript
使用正则表达式的格式化与高亮显示json字符串
2014/12/03 Javascript
使用Chart.js图表库制作漂亮的响应式表单
2015/10/28 Javascript
浅谈jquery的html方法里包含特殊字符的处理
2016/11/30 Javascript
详解AngularJS中$filter过滤器使用(自定义过滤器)
2017/02/04 Javascript
Vue 2.0的数据依赖实现原理代码简析
2017/07/10 Javascript
vue loadmore 组件滑动加载更多源码解析
2017/07/19 Javascript
vue父组件通过props如何向子组件传递方法详解
2017/08/16 Javascript
解决vue 绑定对象内点击事件失效问题
2018/09/05 Javascript
puppeteer实现html截图的示例代码
2019/01/10 Javascript
JavaScript使用setTimeout实现倒计时效果
2021/02/19 Javascript
python 生成器协程运算实例
2017/09/04 Python
Python3.5基础之NumPy模块的使用图文与实例详解
2019/04/24 Python
pandas 使用均值填充缺失值列的小技巧分享
2019/07/04 Python
Python3 A*寻路算法实现方式
2019/12/24 Python
Python3列表List入门知识附实例
2020/02/09 Python
深入浅析python变量加逗号,的含义
2020/02/22 Python
Python验证码截取识别代码实例
2020/05/16 Python
解锁canvas导出图片跨域的N种姿势小结
2019/01/24 HTML / CSS
New Balance天猫官方旗舰店:始于1906年,百年慢跑品牌
2017/11/15 全球购物
农业大学毕业生的个人自我评价
2013/10/11 职场文书
志愿者活动总结
2014/04/28 职场文书
高效课堂标语
2014/06/26 职场文书
交通事故协议书范本
2014/11/18 职场文书
2014年质检工作总结
2014/11/26 职场文书
初中作文评语集锦
2014/12/25 职场文书
工人先进事迹材料
2014/12/26 职场文书
mysql 索引合并的使用
2021/08/30 MySQL