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 相关文章推荐
javaScript parseInt字符转化为数字函数使用小结
Nov 05 Javascript
jquery+ajax+C#实现无刷新操作数据库数据的简单实例
Feb 08 Javascript
js动态往表格的td中添加图片并注册事件
Jun 12 Javascript
JSON.stringify转换JSON时日期时间不准确的解决方法
Aug 08 Javascript
JavaScript版的TwoQueues缓存模型
Dec 29 Javascript
JS动态改变表格边框宽度的方法
Mar 31 Javascript
js实现星星打分效果的方法
Jul 05 Javascript
AngularJS实现表格的增删改查(仅限前端)
Jul 04 Javascript
微信小程序使用input组件实现密码框功能【附源码下载】
Dec 11 Javascript
微信小程序实现搜索功能并跳转搜索结果页面
May 18 Javascript
微信小程序实现拖拽功能
Sep 26 Javascript
vue自定义组件实现双向绑定
Jan 13 Vue.js
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
Ping服务的php实现方法,让网站快速被收录
2012/02/04 PHP
php5.3以后的版本连接sqlserver2000的方法
2014/07/28 PHP
php实现mysql事务处理的方法
2014/12/25 PHP
PHP利用imagick生成组合缩略图
2016/02/19 PHP
Ajax实现对静态页面的文章访问统计功能示例
2016/10/10 PHP
PHP实现的MD5结合RSA签名算法实例
2017/10/07 PHP
javascript 类方法定义还是有点区别
2009/04/15 Javascript
js 小数取整的函数
2010/05/10 Javascript
鼠标拖动实现DIV排序示例代码
2013/10/14 Javascript
js弹出确认是否删除对话框
2014/03/27 Javascript
moment.js轻松实现获取当前日期是当年的第几周
2015/02/05 Javascript
JS实现在网页中弹出一个输入框的方法
2015/03/03 Javascript
JS实现的论坛Ajax打分效果完整实例
2015/10/31 Javascript
Angular使用ng-messages与PHP进行表单数据验证
2016/12/28 Javascript
javascript删除html标签函数cIsHTML
2017/01/09 Javascript
Node.js中用D3.js的方法示例
2017/01/16 Javascript
关于使用js算总价的问题
2017/06/23 Javascript
浅谈angular2 组件的生命周期钩子
2017/08/12 Javascript
JS中的事件委托实例浅析
2018/03/22 Javascript
Node.js笔记之process模块解读
2018/05/31 Javascript
如何在vue中使用百度地图添加自定义覆盖物(水波纹)
2020/11/03 Javascript
JavaScript canvas实现雨滴特效
2021/01/10 Javascript
[01:08:00]Fnatic vs Winstrike 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
python概率计算器实例分析
2015/03/25 Python
使用Python快速制作可视化报表的方法
2019/02/03 Python
Python3 串口接收与发送16进制数据包的实例
2019/06/12 Python
灵活运用CSS3特性绘制简易版围棋效果
2016/09/28 HTML / CSS
定义一结构体数组表示分数,并求两个分数相加之和
2013/06/11 面试题
新员工培训个人的自我评价
2013/10/09 职场文书
点菜员岗位职责范本
2014/02/14 职场文书
2015年家长学校工作总结
2015/04/22 职场文书
让生命充满爱观后感
2015/06/08 职场文书
世界名著读书笔记
2015/06/25 职场文书
MySQL之DML语言
2021/04/05 MySQL
基于Golang 高并发问题的解决方案
2021/05/08 Golang
Golang 实现获取当前函数名称和文件行号等操作
2021/05/08 Golang