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 相关文章推荐
Extjs列表详细信息窗口新建后自动加载解决方法
Apr 02 Javascript
一个轻量级的javascript库 pj介绍
Dec 19 Javascript
关于图片的预加载过程中隐藏未知的
Dec 19 Javascript
5分钟理解JavaScript中this用法分享
Nov 09 Javascript
javascript使用smipleChart实现简单图表
Jan 02 Javascript
jquery 抽奖小程序实现代码
Oct 12 Javascript
AngularJS实现与Java Web服务器交互操作示例【附demo源码下载】
Nov 02 Javascript
jQuery实现动态显示select下拉列表数据的方法
Feb 05 jQuery
JS拖拽排序插件Sortable.js用法实例分析
Feb 20 Javascript
使用 Element UI Table 的 slot-scope方法
Oct 10 Javascript
js点击事件的执行过程实例分析【冒泡与捕获】
Apr 11 Javascript
JavaScript编码小技巧分享
Sep 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
php中substr()函数参数说明及用法实例
2014/11/15 PHP
php实现比较两个文件夹异同的方法
2015/06/18 PHP
PHP翻页跳转功能实现方法
2020/11/30 PHP
php遍历目录下文件并按修改时间排序操作示例
2019/07/12 PHP
通过判断JavaScript的版本实现执行不同的代码
2010/05/11 Javascript
如何让div span等元素能响应键盘事件操作指南
2012/11/13 Javascript
jquery中event对象属性与方法小结
2013/12/18 Javascript
js post提交调用方法
2014/02/12 Javascript
常见浏览器多长时间会提示“脚本运行时间过长”总结
2014/04/29 Javascript
PHPExcel中的一些常用方法汇总
2015/01/23 Javascript
JavaScript通过function定义对象并给对象添加toString()方法实例分析
2015/03/23 Javascript
js实现固定显示区域内自动缩放图片的方法
2015/07/18 Javascript
jQuery实现仿新浪微博浮动的消息提示框(可智能定位)
2015/10/10 Javascript
js拼接html字符串的注意事项
2016/10/13 Javascript
jQuery中checkbox反复调用attr('checked', true/false)只有第一次生效的解决方法
2016/11/16 Javascript
浅谈关于axios和session的一些事
2017/07/13 Javascript
jQuery代码优化方法总结
2018/01/29 jQuery
AngularJs返回前一页面时刷新一次前面页面的方法
2018/10/09 Javascript
VUE引入第三方js包及调用方法讲解
2019/03/01 Javascript
微信小程序自定义组件components(代码详解)
2019/10/21 Javascript
原生javascript制作的拼图游戏实现方法详解
2020/02/23 Javascript
[51:14]LGD vs VP 2018国际邀请赛淘汰赛BO3 第一场 8.21
2018/08/22 DOTA
Python使用matplotlib的pie函数绘制饼状图功能示例
2018/01/08 Python
Pycharm新手教程(只需要看这篇就够了)
2019/06/18 Python
使用Python爬虫库requests发送请求、传递URL参数、定制headers
2020/01/25 Python
python GUI库图形界面开发之PyQt5滚动条控件QScrollBar详细使用方法与实例
2020/03/06 Python
TensorFlow的reshape操作 tf.reshape的实现
2020/04/19 Python
python中四舍五入的正确打开方式
2021/01/18 Python
突袭HTML5之Javascript API扩展4—拖拽(Drag/Drop)概述
2013/01/31 HTML / CSS
英国排名第一的最新设计师品牌手表独立零售商:TIC Watches
2016/09/24 全球购物
经济系大学生求职信
2013/10/01 职场文书
职业生涯规划怎么写
2013/12/29 职场文书
学校岗位设置方案
2014/01/16 职场文书
晚会开场白和结束语
2015/05/29 职场文书
观看《信仰》心得体会
2016/01/15 职场文书
python基础学习之递归函数知识总结
2021/05/26 Python