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);
}
js实现跨域的方法的更多相关文章
- JS访问或设置cookie的方法+跨域调用方法
无意中从163网站获取的JS访问或设置cookie的方法,Log到日志上以防遗忘 //COOKIE功能检查function fCheckCookie(){ if(!navigator.cooki ...
- js调用跨域
web aapi 初体验 解决js调用跨域问题 跨域界定 常见跨域: 同IP不同端口: http:IP:8001/api/user http:IP:8002/api/user 不同IP不同 ...
- js&jquery跨域详解jsonp,jquery并发大量请求丢失回调bug
URL 说明 是否允许通信 http://www.a.com/a.js http://www.a.com/b.js 同一域名下 允许 http://www.a.com/lab/a.js http:/ ...
- [转]vue跨域解决方法
vue跨域解决方法 vue项目中,前端与后台进行数据请求或者提交的时候,如果后台没有设置跨域,前端本地调试代码的时候就会报“No 'Access-Control-Allow-Origin' hea ...
- AJAX四种跨域处理方法
同源策略 同源策略 同源策略限制从一个源加载的文档或者脚本如何与来自另一个源的资源进行交互.这是一个用于隔离潜在恶意文件的关键的安全机制. 具体定义是:一段脚本向后台请求数据,只能读取属于同一协议名. ...
- JS JSOP跨域请求实例详解
JSONP(JSON with Padding)是JSON的一种“使用模式”,可用于解决主流浏览器的跨域数据访问的问题.这篇文章主要介绍了JS JSOP跨域请求实例详解的相关资料,需要的朋友可以参考下 ...
- 搞懂:前端跨域问题JS解决跨域问题VUE代理解决跨域问题原理
什么是跨域 跨域:一个域下的文档或脚本试图去请求另一个域下的资源 广义的跨域包含一下内容: 1.资源跳转(链接跳转,重定向跳转,表单提交) 2.资源请求(内部的引用,脚本script,图片img,fr ...
- js执行跨域请求
//js执行跨域请求 var _script = document.createElement('script'); _script.type = "text/javascript" ...
- react-native debug js remotely跨域问题
react-native debug js remotely跨域问题 我们在安卓真机上调试react-native时,启用debug js remotely的时候,会出现跨域问题.这个时候我们只需要一 ...
随机推荐
- Spring Boot2.0之 整合Redis事务
Redis事物 Redis 事务可以一次执行多个命令, 并且带有以下两个重要的保证: 事务是一个单独的隔离操作:事务中的所有命令都会序列化.按顺序地执行.事务在执行的过程中,不会被其他客户端发送来的命 ...
- YTU 2419: C语言习题 等长字符串排序
2419: C语言习题 等长字符串排序 时间限制: 1 Sec 内存限制: 128 MB 提交: 650 解决: 249 题目描述 在主函数中输入n(n<=10)个等长的字符串.用另一函数对 ...
- Android Studio下载安装
官方下载地址:https://developer.android.google.cn/studio#downloads 因为安卓自带的模拟器会比较慢一些,这里勾选去掉,我们使用夜神模拟器. 这里根据自 ...
- SPOJ:String Play (?)
String Play Milo has a string S of length L. Tutu picks a random prefix and Mota picks a random suff ...
- windows下编译调试nginx
typora-copy-images-to: image windows下编译调试nginx linux使用gdb跟踪代码效率不高,在通过跟踪代码进行源码分析,与定位复杂逻辑问题时,如果有一个简单易用 ...
- css画三角的原理
当我们设置一个div其width与height为100px,并且设置其四边框的宽度为100px,且分别设置其颜色后,我们可以看到如下的一张图片 此时如果设置这个div的height为0的话,其他不变, ...
- Meta标签中的format-detection属性及含义(转)
一.Meta标签中的format-detection属性及含义 意为:格式检测 或许你会有这样的经历:当你在制作手机端的页面中,点击了没有加任何链接的格式的数字时,这时手机会进行自动拔号提示操作! 禁 ...
- 【旧文章搬运】PspCidTable概述
原文发表于百度空间,2009-03-28========================================================================== PspCi ...
- 如何 Xcode 开发工具里安装一个空的项目末模板
很多朋友因为Xcode升级取消了空工程模板而发愁 今天给大家推荐一个简单方便的方法,导入空工程模板 对于 xcode7 来说可以使用下面的方法添加空模板.建议在升级的时候,不要下载beta版,最好下 ...
- NYOJ7——街区最短路径问题
街区最短路径问题 时间限制:3000 ms | 内存限制:65535 KB 难度:4 描述:一个街区有很多住户,街区的街道只能为东西.南北两种方向.住户只可以沿着街道行走.各个街道之间的间隔相等 ...