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 相关文章推荐
在textarea中屏蔽js的某个function的javascript代码
Apr 20 Javascript
JavaScript onkeydown事件入门实例(键盘某个按键被按下)
Oct 17 Javascript
浅析JavaScript 调试方法和技巧
Oct 22 Javascript
JavaScript使用DeviceOne开发实战(三)仿微信应用
Dec 02 Javascript
Javascript Function.prototype.bind详细分析
Dec 29 Javascript
Javascript快速实现浏览器系统通知
Aug 26 Javascript
bootstrap自定义样式之bootstrap实现侧边导航栏功能
Sep 10 Javascript
详解JavaScript对数组操作(添加/删除/截取/排序/倒序)
Apr 28 Javascript
详解async/await 异步应用的常用场景
May 13 Javascript
JS中类的静态方法,静态变量,实例方法,实例变量区别与用法实例分析
Mar 14 Javascript
VSCode搭建React Native环境
May 07 Javascript
react 生命周期实例分析
May 18 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 正则表达式之正则处理函数小结(preg_match,preg_match_all,preg_replace,preg_split)
2012/10/05 PHP
Laravel框架自定义验证过程实例分析
2019/02/01 PHP
JavaScript中判断函数是new还是()调用的区别说明
2011/04/07 Javascript
分享一个asp.net pager分页控件
2012/01/04 Javascript
html向js方法传递参数具体实现
2013/08/08 Javascript
javascript中String对象的slice()方法分析
2014/12/20 Javascript
基于javascript实现随机颜色变化效果
2016/01/14 Javascript
一个字符串中出现次数最多的字符 统计这个次数【实现代码】
2016/04/29 Javascript
JS实现HTML表格排序功能
2016/08/05 Javascript
如何提高Dom访问速度
2017/01/05 Javascript
js登录滑动验证的实现(不滑动无法登陆)
2018/01/03 Javascript
vue-cli3 从搭建到优化的详细步骤
2019/01/20 Javascript
深入了解query和params的使用区别
2019/06/24 Javascript
构建Python包的五个简单准则简介
2015/06/15 Python
Python实现识别手写数字 简易图片存储管理系统
2018/01/29 Python
Python实现对文件进行单词划分并去重排序操作示例
2018/07/10 Python
Python利用ORM控制MongoDB(MongoEngine)的步骤全纪录
2018/09/13 Python
Python列表切片常用操作实例解析
2020/03/10 Python
Python 实现键盘鼠标按键模拟
2020/11/18 Python
css3个性化字体_动力节点Java学院整理
2017/07/12 HTML / CSS
HTML5之SVG 2D入门8—文档结构及相关元素总结
2013/01/30 HTML / CSS
HTML5头部标签的一些常用信息小结
2016/10/23 HTML / CSS
英国女性时尚鞋类的潮流制造者:Koi Footwear
2018/10/19 全球购物
维德科技C#面试题笔试题
2015/12/09 面试题
农行实习自我鉴定
2013/09/22 职场文书
业务员简历自我评价
2014/03/06 职场文书
中学生国旗下讲话稿
2014/04/26 职场文书
岗位说明书范文
2014/05/07 职场文书
大专生求职信
2014/06/29 职场文书
2014年建筑工作总结
2014/11/26 职场文书
教师党员个人自我评价
2015/03/04 职场文书
读书笔记怎么写
2015/07/01 职场文书
小学教师教育随笔
2015/08/14 职场文书
升学宴家长答谢词
2015/09/29 职场文书
大学生饮品店创业计划书范文
2019/07/10 职场文书
SQL使用复合索引实现数据库查询的优化
2022/05/25 SQL Server