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 相关文章推荐
SeaJS入门教程系列之SeaJS介绍(一)
Mar 03 Javascript
关于两个jQuery(js)特效冲突的bug的解决办法
Sep 04 Javascript
原生js仿jquery实现对Ajax的封装
Oct 04 Javascript
Bootstrap导航条学习使用(二)
Feb 08 Javascript
js如何获取网页所有图片
May 12 Javascript
Angular2搜索和重置按钮过场动画
May 24 Javascript
Easyui在treegrid添加控件的实现方法
Jun 23 Javascript
详解 vue.js用法和特性
Oct 15 Javascript
nuxt框架中路由鉴权之Koa和Session的用法
May 09 Javascript
vue项目出现页面空白的解决方案
Oct 31 Javascript
vue element-ui读取pdf文件的方法
Nov 26 Javascript
elementUI同一页面展示多个Dialog的实现
Nov 19 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
如何用PHP实现插入排序?
2013/04/10 PHP
php设计模式之单例模式实例分析
2015/02/25 PHP
PHP IDE PHPStorm配置支持友好Laravel代码提示方法
2015/05/12 PHP
PHP用户验证和标签推荐的简单使用
2016/10/31 PHP
jquery 常用操作方法
2010/01/28 Javascript
JQ获取动态加载的图片大小的正确方法分享
2013/11/08 Javascript
js 采用delete实现继承示例代码
2014/05/20 Javascript
JavaScript实现鼠标滑过图片变换效果的方法
2015/04/16 Javascript
Node.js事件驱动
2015/06/18 Javascript
JS实现淘宝支付宝网站的控制台菜单效果
2015/09/28 Javascript
JavaScript判断DIV内容是否为空的方法
2016/01/29 Javascript
json传值以及ajax接收详解
2016/05/24 Javascript
Bootstrap导航条的使用和理解3
2016/12/14 Javascript
原生javascript实现分页效果
2017/04/21 Javascript
微信小程序定位当前城市的方法
2018/07/19 Javascript
微信小程序时间标签和时间范围的联动效果
2019/02/15 Javascript
django1.8使用表单上传文件的实现方法
2016/11/04 Python
Flask框架实现给视图函数增加装饰器操作示例
2018/07/16 Python
Python实现的字典排序操作示例【按键名key与键值value排序】
2018/12/21 Python
python3+PyQt5 自定义窗口部件--使用窗口部件样式表的方法
2019/06/26 Python
Python字符串大小写转换拼接删除空白
2019/09/19 Python
Python通过递归获取目录下指定文件代码实例
2019/11/07 Python
tensorflow实现读取模型中保存的值 tf.train.NewCheckpointReader
2020/02/10 Python
python zip,lambda,map函数代码实例
2020/04/04 Python
使用Python实现将多表分批次从数据库导出到Excel
2020/05/15 Python
如何查看python关键字
2021/01/17 Python
美国新娘礼品店:The Paisley Box
2020/09/08 全球购物
简单的JAVA编程面试题
2013/03/19 面试题
商务专员岗位职责
2013/11/23 职场文书
建筑工程专业大学生求职信
2014/04/23 职场文书
小学学习雷锋活动总结
2014/07/03 职场文书
房屋出租委托书格式
2014/09/23 职场文书
学校师德师风整改方案
2014/10/28 职场文书
2014年会计主管工作总结
2014/12/20 职场文书
公司股份转让协议书范本
2015/01/28 职场文书