js实现跨域的方法实例详解


Posted in Javascript onJune 24, 2015

本文实例讲述了js实现跨域的方法。分享给大家供大家参考。具体分析如下:

由于同源策略的限制,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 相关文章推荐
jquery 跨域访问问题解决方法(笔记)
Jun 08 Javascript
js导入导出excel(实例代码)
Nov 25 Javascript
jquery中each遍历对象和数组示例
Aug 05 Javascript
jQuery中的基本选择器用法学习教程
Apr 14 Javascript
详解Python中logging日志模块在多进程环境下的使用
Dec 26 Javascript
Node.js 8 中的 util.promisify的详解
Jun 12 Javascript
vue子父组件通信的实现代码
Jul 09 Javascript
Vue-Router2.X多种路由实现方式总结
Feb 09 Javascript
Node.Js中实现端口重用原理详解
May 03 Javascript
Node.js一行代码实现静态文件服务器的方法步骤
May 07 Javascript
jquery实现烟花效果(面向对象)
Mar 10 jQuery
JavaScript高级程序设计之基本引用类型
Nov 17 Javascript
JavaScript中的Promise使用详解
Jun 24 #Javascript
JavaScript面对国际化编程时的一些建议
Jun 24 #Javascript
对JavaScript的全文搜索实现相关度评分的功能的方法
Jun 24 #Javascript
在Mac OS下使用Node.js的简单教程
Jun 24 #Javascript
在Node.js应用中使用Redis的方法简介
Jun 24 #Javascript
浅析Node.js中使用依赖注入的相关问题及解决方法
Jun 24 #Javascript
浅析Node.js中的内存泄漏问题
Jun 23 #Javascript
You might like
网站当前的在线人数
2006/10/09 PHP
使用Limit参数优化MySQL查询的方法
2008/11/12 PHP
利用php获取服务器时间的实现代码
2013/06/07 PHP
ThinkPHP令牌验证实例
2014/06/18 PHP
ThinkPHP实现递归无级分类――代码少
2015/07/29 PHP
PHP加密技术的简单实现
2016/09/04 PHP
ThinkPHP3.2.3框架实现的空模块、空控制器、空操作,跳转到错误404页面图文详解
2019/04/03 PHP
Jquery post传递数组方法实现思路及代码
2013/04/28 Javascript
JavaScript中this的使用详解
2013/11/08 Javascript
js 实现的可折叠留言板(附源码下载)
2014/07/01 Javascript
jQuery在线选座位插件seat-charts特效代码分享
2015/08/27 Javascript
javascript实现tab响应式切换特效
2016/01/29 Javascript
jQuery实现百叶窗焦点图动画效果代码分享(附源码下载)
2016/03/14 Javascript
js实现移动端微信页面禁止字体放大
2017/02/16 Javascript
JS仿JQuery选择器功能
2017/03/08 Javascript
详解Node.js 命令行程序开发教程
2017/06/07 Javascript
微信小程序“摇一摇”的实例代码
2017/07/20 Javascript
微信小程序模版渲染详解
2018/01/26 Javascript
基于jQuery实现无缝轮播与左右点击效果
2018/05/13 jQuery
小程序实现左滑删除功能
2018/10/30 Javascript
图解javascript作用域链
2019/05/27 Javascript
Vue 构造选项 - 进阶使用说明
2020/08/14 Javascript
原生js实现无缝轮播图效果
2021/01/28 Javascript
Python Web服务器Tornado使用小结
2014/05/06 Python
浅谈Python数据类型判断及列表脚本操作
2016/11/04 Python
python中MethodType方法介绍与使用示例
2017/08/03 Python
Python检测网络延迟的代码
2018/05/15 Python
pytorch加载语音类自定义数据集的方法教程
2020/11/10 Python
找到不普通的东西:Bonanza
2016/10/20 全球购物
当一个对象被当作参数传递到一个方法后,此方法可改变这个对象的属性,并可返回变化后的结果,那么这里到底是值传递还是引用传递?
2014/09/09 面试题
水利学院求职自荐书
2014/02/01 职场文书
遗体告别仪式主持词
2014/03/20 职场文书
政府绩效管理实施方案
2014/05/04 职场文书
艾滋病宣传活动总结
2014/05/08 职场文书
大学毕业典礼演讲稿
2014/09/09 职场文书
java实现自定义时钟并实现走时功能
2022/06/21 Java/Android