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 相关文章推荐
jquery JSON的解析方式
Jul 25 Javascript
JavaScript DOM事件(笔记)
Apr 08 Javascript
JS实现带鼠标效果的头像及文章列表代码
Sep 27 Javascript
正则表达式优化JSON字符串的技巧
Dec 24 Javascript
EasyUi combotree 实现动态加载树节点
Apr 01 Javascript
js中遍历Map对象的简单实例
Aug 08 Javascript
概述BootStrap中role=&quot;form&quot;及role作用角色
Dec 08 Javascript
vue使用vue-cli快速创建工程
Jul 28 Javascript
基于vue打包后字体和图片资源失效问题的解决方法
Mar 06 Javascript
vue中的适配px2rem示例代码
Nov 19 Javascript
Vue的Options用法说明
Aug 14 Javascript
vue代码分块和懒加载非必要资源文件
Apr 11 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
基于mysql的论坛(6)
2006/10/09 PHP
php抽象类使用要点与注意事项分析
2015/02/09 PHP
php实现的通用图片处理类
2015/03/24 PHP
载入jQuery库的最佳方法详细说明及实现代码
2012/12/28 Javascript
input输入框的自动匹配(原生代码)
2013/03/19 Javascript
html+css+js实现xp window界面及有关功能
2013/03/26 Javascript
javascript中加号(+)操作符的一些神奇作用
2014/06/06 Javascript
jquery的总体架构分析及实现示例详解
2014/11/08 Javascript
jQuery在页面加载时动态修改图片尺寸的方法
2015/03/20 Javascript
JavaScript生成SQL查询表单的方法
2015/08/13 Javascript
Bootstrap Modal遮罩弹出层代码分享
2016/11/21 Javascript
支持移动端原生js轮播图
2017/02/16 Javascript
angularjs+bootstrap实现自定义分页的实例代码
2017/06/19 Javascript
React 子组件向父组件传值的方法
2017/07/24 Javascript
vue2.0移除或更改的一些东西(移除index key)
2017/08/28 Javascript
js实现简单的无缝轮播效果
2020/09/05 Javascript
[35:26]DOTA2上海特级锦标赛B组小组赛#2 VG VS Fnatic第三局
2016/02/26 DOTA
Python 迭代器工具包【推荐】
2016/05/06 Python
Python3.6正式版新特性预览
2016/12/15 Python
Python基于plotly模块实现的画图操作示例
2019/01/23 Python
django模板加载静态文件的方法步骤
2019/03/01 Python
python 使用socket传输图片视频等文件的实现方式
2019/08/07 Python
使用python脚本自动创建pip.ini配置文件代码实例
2019/09/20 Python
Matplotlib使用Cursor实现UI定位的示例代码
2020/03/12 Python
浅谈python 类方法/静态方法
2020/09/18 Python
浅析Python中字符串的intern机制
2020/10/03 Python
Python实现Word文档转换Markdown的示例
2020/12/22 Python
利用python实现后端写网页(flask框架)
2021/02/28 Python
python 指定源路径来解决import问题的操作
2021/03/04 Python
纯css3制作的火影忍者写轮眼开眼至轮回眼及进化过程实例
2014/11/11 HTML / CSS
电子商务专业实习生自我鉴定
2013/09/24 职场文书
造型师求职自荐信
2013/09/27 职场文书
租赁协议书范本
2014/04/22 职场文书
工作失误检讨书范文
2015/01/26 职场文书
工作保证书怎么写
2015/02/28 职场文书
解决 redis 无法远程连接
2022/05/15 Redis