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 相关文章推荐
实现png图片和png背景透明(支持多浏览器)的方法
Sep 08 Javascript
新发现一个骗链接的方法(js读取cookies)
Jan 11 Javascript
JavaScript截取字符串的2个函数介绍
Aug 27 Javascript
jQuery实现统计输入文字个数的方法
Mar 11 Javascript
浅析Bootstrap验证控件的使用
Jun 23 Javascript
less简单入门(CSS 预处理语言)
Mar 08 Javascript
bootstrap 点击空白处popover弹出框隐藏实例
Jan 24 Javascript
Vue实现动态添加或者删除对象和对象数组的操作方法
Sep 21 Javascript
Vue编程式跳转的实例代码详解
Jul 10 Javascript
JS实现关闭小广告特效
Jan 29 Javascript
微信小程序 wx:for 与 wx:for-items 与 wx:key的正确用法
May 19 Javascript
React Native项目框架搭建的一些心得体会
May 28 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/08/08 PHP
php+ajax实现无刷新分页
2015/11/18 PHP
PHP文件操作实例总结
2016/09/27 PHP
PHP给源代码加密的几种方法汇总(推荐)
2018/02/06 PHP
Thinkphp5框架简单实现钩子(Hook)行为的方法示例
2019/09/03 PHP
jquery中常用的SET和GET
2009/01/13 Javascript
在JavaScript中,为什么要尽可能使用局部变量?
2009/04/06 Javascript
JQuery对checkbox操作 (循环获取)
2011/05/20 Javascript
jquery连缀语法如何实现
2012/11/29 Javascript
重构Javascript代码示例(重构前后对比)
2013/01/23 Javascript
js导出格式化的excel 实例方法
2013/07/17 Javascript
jquery操作checked属性以及disabled属性的多种方法
2014/06/20 Javascript
js时间日期格式化封装函数
2014/12/02 Javascript
jQuery中的siblings用法实例分析
2015/12/24 Javascript
jquery实现左右无缝轮播图
2020/07/31 Javascript
浅谈JS如何实现真正的对象常量
2017/06/25 Javascript
Angular 2 ngForm中的ngModel、[ngModel]和[(ngModel)]的写法
2017/06/29 Javascript
基于vue打包后字体和图片资源失效问题的解决方法
2018/03/06 Javascript
Vue + better-scroll 实现移动端字母索引导航功能
2018/05/07 Javascript
layui从数据库中获取复选框的值并默认选中方法
2018/08/15 Javascript
js定义类的方法示例【ES5与ES6】
2019/07/30 Javascript
微信小程序HTTP接口请求封装代码实例
2019/09/05 Javascript
利用webpack理解CommonJS和ES Modules的差异区别
2020/06/16 Javascript
python编程开发之类型转换convert实例分析
2015/11/13 Python
python 实现上传图片并预览的3种方法(推荐)
2017/07/14 Python
Python爬虫基础之XPath语法与lxml库的用法详解
2018/09/13 Python
使用pytorch完成kaggle猫狗图像识别方式
2020/01/10 Python
python yield和Generator函数用法详解
2020/02/10 Python
pycharm中leetcode插件使用图文详解
2020/12/07 Python
捷克玩具商店:Bambule
2019/02/23 全球购物
J2EE包括哪些技术
2016/11/25 面试题
艺术系大学生毕业个人自我评价
2013/09/19 职场文书
物业保安岗位职责
2014/07/02 职场文书
感动中国何玥观后感
2015/06/02 职场文书
简历上的自我评价,该怎么写呢?
2019/06/13 职场文书
springboot 多数据源配置不生效遇到的坑及解决
2021/11/17 Java/Android