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 相关文章推荐
根据判断浏览器类型屏幕分辨率自动调用不同CSS的代码
Feb 22 Javascript
JavaScript的9个陷阱及评点分析
May 16 Javascript
jQuery数据显示插件整合实现代码
Oct 24 Javascript
js操作iframe兼容各种主流浏览器示例代码
Jul 22 Javascript
JavaScript取得键盘按下方向键是哪个的方法
Aug 04 Javascript
手机端实现Bootstrap简单图片轮播效果
Oct 13 Javascript
bootstrap导航栏、下拉菜单、表单的简单应用实例解析
Jan 06 Javascript
详解网站中图片日常使用以及优化手法
Jan 09 Javascript
bootstrapvalidator之API学习教程
Jun 29 Javascript
swiper插件自定义切换箭头按钮
Dec 28 Javascript
react组件从搭建脚手架到在npm发布的步骤实现
Jan 09 Javascript
layui 弹出层回调获取弹出层数据的例子
Sep 02 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
PHP 采集程序原理分析篇
2010/03/05 PHP
PHP中使用CURL伪造来路抓取页面或文件
2011/05/04 PHP
全新Mac配置PHP开发环境教程
2016/02/03 PHP
php 静态属性和静态方法区别详解
2017/04/09 PHP
javascript下function声明一些小结
2007/12/28 Javascript
JavaScript和JQuery实用代码片段(一)
2010/04/07 Javascript
自制基于jQuery的智能提示插件一枚
2011/02/18 Javascript
jquery实现图片渐变切换兼容ie6/Chrome/Firefox
2013/08/02 Javascript
js单词形式的运算符
2014/05/06 Javascript
Javascript中对象继承的实现小例
2014/05/12 Javascript
用jquery实现的一个超级简单的下拉菜单
2014/05/18 Javascript
JS 弹出层 定位至屏幕居中示例
2014/05/21 Javascript
node.js中的fs.mkdir方法使用说明
2014/12/17 Javascript
常用原生JS兼容性写法汇总
2016/04/27 Javascript
bootstrap手风琴折叠示例代码分享
2017/05/22 Javascript
mac上配置Android环境变量的方法
2018/07/08 Javascript
基于node简单实现RSA加解密的方法步骤
2019/03/21 Javascript
史上最为详细的javascript继承(推荐)
2019/05/18 Javascript
基于Taro的微信小程序模板消息-获取formId功能模块封装实践
2019/07/15 Javascript
vue实现移动端拖动排序
2020/08/21 Javascript
解决vant title-active-color与title-inactive-color不生效问题
2020/11/03 Javascript
python实现斐波那契递归函数的方法
2014/09/08 Python
django加载本地html的方法
2018/05/27 Python
详解Django中类视图使用装饰器的方式
2018/08/12 Python
python paramiko利用sftp上传目录到远程的实例
2019/01/03 Python
在Python中os.fork()产生子进程的例子
2019/08/08 Python
查看Python依赖包及其版本号信息的方法
2019/08/13 Python
python:批量统计xml中各类目标的数量案例
2020/03/10 Python
10 套华丽的CSS3 按钮小结
2012/10/03 HTML / CSS
H5 canvas中width、height和style的宽高区别详解
2018/11/02 HTML / CSS
瑞典最好的运动鞋专卖店:Sneakersnstuff
2016/08/29 全球购物
会计专业自荐信
2013/12/02 职场文书
学校四群教育实施方案
2014/06/12 职场文书
医学生求职信
2014/07/01 职场文书
小学生我的梦想演讲稿
2014/08/21 职场文书
python实现批量移动文件
2021/04/05 Python