javascript实现跨域的方法汇总
由于同源策略的限制，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 跨域访问解决方案
这里分两类情况:一.基于同一父域的子域之间页面的访问:参见如下3个domain域:taobao.com.jipiao.taobao.com.promotion.taobao.com:它们有相同的父域taobao.com.二.基于不同父域页面之间的访问:参见如下3个domain域:taobao.com.baidu.com.sina.com.cn:它们具有不同的父域. 解决它们之间跨域的方案有:方案1:服务器Proxy域A的页面JS需要访问域B下的链接获取数据,该方案在域A的服务器端建立一个Prox
-
关于JavaScript跨域问题及实时刷新解决方案
在自己页面显示其他网站上面的数据,需要用Ajax,就涉及到跨域问题, 解决方案:jQuery.support.cors = true; (浏览器支持跨域访问), 实例: 复制代码 代码如下: //浏览器支持跨域访问 jQuery.support.cors = true; $.ajax({ url: "http://www.rj99999.com/Price/ListPrice.html", dataType: 'html', success: function (data, textS
-
AJAX javascript的跨域访问执行
突然感觉就是这里的问题,研究一下,搞定后其实觉得挺容易的,只是自己知识还是有些欠缺,解决方法如下: 阻塞的AJAX请求 我们先来证实一下请求的阻塞情况吧.我们使用如下的代码: 连续发起三个请求 复制代码 代码如下: function simpleRequest() { var request = new XMLHttpRequest(); request.open("POST", "Script.ashx"); request.sen
-
Javascript跨域请求的4种解决方式
什么情况下才会出现跨域? 假设域名是:http://www.example.com.cn/ 如果所请求的域名跟这个域名不致,这种情况就是跨域,由于跨域存在漏洞,所以一般来说正常的跨域请求方式是请求不到的. 解决方式: 一.window.name 1. 服务器返回 复制代码 代码如下: <script>window.name='{"id":"3", "name":"leisure"}';</script>
-
JavaScript使用HTML5的window.postMessage实现跨域通信例子
JavaScript由于同源策略的限制,跨域通信一直是棘手的问题.当然解决方案也有很多: 1.document.domain+iframe的设置,应用于主域相同而子域不同: 2.利用iframe和location.hash,数据直接暴露在了url中,数据容量和类型都有限 3.Flash LocalConnection, 对象可在一个 SWF 文件中或多个 SWF 文件间进行通信, 只要 在同一客户端就行,跨应用程序, 可以跨域. window.name 保存数据以及跨域 iframe 静态代理动
-
javascript实现跨域的方法汇总
由于同源策略的限制,XMLHttpRequest只允许请求当前源(包含域名.协议.端口)的资源. json与jsonp的区别: JSON是一种数据交换格式,而JSONP是一种依靠开发人员创造出的一种非官方跨域数据交互协议. script标签经常被用来加载不同域下的资源,可以绕过同源策略.(有src属性的都可以获取异域文件). 如果请求的这个远程数据本身就是一段可执行的js,那么这些js会被执行(相当于eval). 方法一: 利用script标签请求(<script src="http://
-
javascript跨域的方法汇总
此文章学习借鉴了一些其他前端同学的文章,自己做了个实践总结 以下的例子包含的文件均为为 http://www.a.com/a.html .http://www.a.com/c.html 与 http://www.b.com/b.html,要做的都是从a.html获取b.html里的数据 1.JSONP jsonp是利用script标签没有跨域限制的特性,通过在src的url的参数上附加回调函数名字,然后服务器接收回调函数名字并返回一个包含数据的回调函数 function doSomething(
-
5种处理js跨域问题方法汇总
前两天碰到一个跨域问题的处理,使用jsonp可以解决.(http://www.jb51.net/article/57889.htm) 最近再整理了一下: 1.jsonp. ajax请求,dataType为jsonp.这种形式需要请求在服务端调整为返回callback([json-object])的形式.如果服务端返回的是普通json对象.那么调试的时候,在chrome浏览器的控制台会报"Uncaught SyntaxError: Unexpected token"错误:在firefox
-
常见的javascript跨域通信方法
本文主要介绍几种常见的javascript跨域通信方法.首先讲解一下JSONP. 1.JSONP JSONP(JSON with Padding)是JSON的一种"使用模式",可用于解决主流浏览器的跨域数据访问的问题.由于同源策略,一般来说位于 server1.example.com 的网页无法与不是 server1.example.com的服务器沟通,而 HTML 的<script> 元素是一个例外.利用 <script> 元素的这个开放策略,网页可以得到从其
-
jquery ajax结合thinkphp的getjson实现跨域的方法
本文实例讲述了jquery ajax结合thinkphp的getjson实现跨域的方法.分享给大家供大家参考,具体如下: jquery中post的应该是不能跨域,网上说get的可以跨域,但是我试了一下也不行,然后就进行最后的拼搏getjson,结果成功,哈哈 js处写作: $.getJSON( "/index.php/Index/test", function(data){ alert(data.dd); } ); 语法: jQuery.getJSON(url,[data],[call
-
深入理解jquery跨域请求方法
项目中关于ajax jsonp的使用, 出现了问题:可以成功获得请求结果,但没有执行success方法 总算搞定了,记录一下 function TestAjax() { $.ajax({ type : "get", async : false, url : "ajaxHandler.ashx", //实际上访问时产生的地址为: ajax.ashx?callbackfun=jsonpCallback&id=10 data : {id : 10}, cache
-
js实现跨域的方法实例详解
本文实例讲述了js实现跨域的方法.分享给大家供大家参考.具体分析如下: 由于同源策略的限制,XMLHttpRequest只允许请求当前源(包含域名.协议.端口)的资源. json与jsonp的区别: JSON是一种数据交换格式,而JSONP是一种依靠开发人员创造出的一种非官方跨域数据交互协议. script标签经常被用来加载不同域下的资源,可以绕过同源策略.(有src属性的都可以获取异域文件). 如果请求的这个远程数据本身就是一段可执行的js,那么这些js会被执行(相当于eval). 方法一
-
Springmvc ajax跨域请求处理方法实例详解
上次给一个网站写网站 前后端分离 最后跪在ajax跨域上面了 自己在网上找了个方法 亲试可用 记录一下 写一个类 继承HandlerInterceptorAdapter package com.util; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import org.springframework.web.servlet.handler.Ha
-
vue跨域解决方法
vue项目中,前端与后台进行数据请求或者提交的时候,如果后台没有设置跨域,前端本地调试代码的时候就会报"No 'Access-Control-Allow-Origin' header is present on the requested resource." 这种跨域错误. 要想本地正常的调试,解决的办法有三个: 一.后台更改header header('Access-Control-Allow-Origin:*');//允许所有来源访问 header('Access-Control
-
JavaScript cookie 跨域访问之广告推广
在实际应用中, 跨域使用天气预报组件可以使用上面的方式实现,另外一种常用的就是显示某些电商的广告,此广告中会滚动您访问过的产品或者关联想推介给你的产品. 比如在某个A网页中显示了两种广告: 某东的广告,里面显示的东西,都是访问过滴,并且加推了相关的东西 某宝的广告,基本一样呈现方式. 当访问某东某宝的商品时,会把信息放到cookie中,呈现时会根据cookie中的商品信息进行呈现. 问题来了. A网页所在的站点和某东某宝的站点肯定是独立的两个域名,在A网页中访问某东某宝的cookie是拿不到滴,