`
wangheid
  • 浏览: 36332 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

Ajax跨域访问问题-方法大全

    博客分类:
  • js
 
阅读更多

Case I. Web代理的方式 (on Server A)

 

即用户访问A网站时所产生的对B网站的跨域访问请求均提交到A网站的指定页面,由该页面代替用户页面完成交互,从而返回合适的结果。此方案可以解决现阶段所能够想到的多数跨域访问问题,但要求A网站提供Web代理的支持,因此A网站与B网站之间必须是紧密协作的,且每次交互过程,A网站的服务器负担增加,且无法代用户保存session状态。

 

Case II. on-Demand方式 (on Server A)

 

MYMSN的门户就用的这种方式,不过 MYMSN中不涉及跨域访问问题。在页面内动态生成新的<script>,将其src属性指向别的网站的网址,这个网址返回的内容必须是合法的Javascript脚本,常用的是JSON消息。此方案存在的缺陷是, script的src属性完成该调用时采取的方式时get方式,如果请求时传递的字符串过大时,可能会无法正常运行。不过此方案非常适合聚合类门户使用。

 

<html>
<head>
<script>
function loadContent()
{
var s=document.createElement('SCRIPT');
s.src='http://www.anotherdomain.com/TestCrossJS.aspx?f=setDivContent';
document.body.appendChild(s);
}

function setDivContent(v)
{
var dv = document.getElementById("dv");
dv.innerHTML = v; 
}
</script>
</head>
<body>
<div></div>

<input value="Click Me">
</body>
</html>

其中的www.anotherdomain.com/TestCrossJS.aspx是这样的,

<script runat="server">
void Page_Load(object sender, EventArgs e)
{
  string f = Request.QueryString["f"];
  Response.Clear();
  Response.ContentType = "application/x-javascript";
  Response.Write(String.Format(@"
                   {0}('{1}');", 
                   f,
                   DateTime.Now));
  Response.End();
}
</script>

点击“Click Me”按钮,生成一个新的script tag,下载对应的 Javascript 脚本,结束时回调其中的setDivContent(),从而更新网页上一个div的内容。

 

 

Case III. iframe方式 (on Server A)

 

查看过醒来在javaeye上的一篇关于跨域访问的帖子,他提到自己已经用iframe的方式解决了跨域访问问题。数据提交跟获取,采用iframe这种方式的确可以了,但由于父窗口与子窗口之间不能交互(跨域访问的情况下,这种交互被拒绝),因此无法完成对父窗口效果的影响。 

在页面内嵌或动态生成指向别的网站的IFRAME,然后这2个网页间可以通过改变对方的anchor hash fragment来传输消息。改变一个网页的anchor hash fragment并不会使浏览器重新装载网页,所以一个网页的状态得以保持,而网页本身则可以通过一个计时器(timer)来察觉自己anchor hash的变化,从而相应改变自己的状态。

 

1. http://domain1/TestCross.html:

<html>
<head>
<script>
var url = "http://domain2/TestCross.html"
var oldHash = null;
var timer = null;

function getHash() 
{
var hash = window.location.hash;
if ((hash.length >= 1) && (hash.charAt(0) == '#')) 
{
hash = hash.substring(1);
}

return hash;
}
function sendRequest()
{
var d = document;
var t = d.getElementById('request');
var f = d.getElementById('alienFrame');
f.src = url + "#" + t.value + "<br/>" + new Date();
}

function setDivHtml(v)
{
var d = document;
var dv = d.getElementById('response');
dv.innerHTML = v;
}

function idle()
{
var newHash = getHash();

if (newHash != oldHash)
{
setDivHtml(newHash);
oldHash = newHash;
}

timer = window.setTimeout(idle, 100);
}

function window.onload()
{
timer = window.setTimeout(idle, 100);
}
</script>
</head>
<body>

请求:<input> <input value="发送" /><br/>
回复:<div></div>

<iframe src="http://domain2/TestCross.html"></iframe>

</body>
</html>

2. http://domain2/TestCross.html:

<html>
<head>
<script>
var url = "http://domain1/TestCross.html"
var oldHash = null;
var timer = null;

function getHash() 
{
var hash = window.location.hash;
if ((hash.length >= 1) && (hash.charAt(0) == '#')) 
{
hash = hash.substring(1);
}

return hash;
}
function sendRequest()
{
var d = document;
var t = d.getElementById('request');
var f = parent;
//alert(f.document); //试着去掉这个注释,你会得到“Access is denied”
f.location.href = url + "#" + t.value + "<br/>" + new Date();
}

function setDivHtml(v)
{
var d = document;
var dv = d.getElementById('response');
dv.innerHTML = v;
}

function idle()
{
var newHash = getHash();

if (newHash != oldHash)
{
setDivHtml(newHash);
oldHash = newHash;
}

timer = window.setTimeout(idle, 100);
}

function window.onload()
{
timer = window.setTimeout(idle, 100);
}
</script>
</head>
<body>

请求:<input> <input value="发送" /><br/>
回复:<div></div>

</body>
</html>

两个网页基本相同,第一个网页内嵌一个IFRAME,在点击“发送”按钮后,会将文本框里的内容通过hash fragment传给IFRAME。点击IFRAME里的“发送”按钮后,它会将文本框里的内容通过hash fragment传给父窗口。因为是只改动了hash fragment,浏览器不会重新load网页内容,这里使用了一个计时器来检测URL变化,如果变化了,就更新其中一个div的内容 。 

 

Case IV. 用户本地转储方式 (local)

 

IE本身依附于windows平台的特性为我们提供了一种基于iframe,利用内存来“绕行”的方案,即两个window之间可以在客户端通过windows剪贴板的方式进行数据传输,只需要在接受数据的一方设置Interval进行轮询,获得结果后清除Interval即可。FF的平台独立性决定了它不支持剪贴板这种方式,而以往版本的FF中存在的插件漏洞又被fixed了,所以FF无法通过内存来完成暗渡陈仓。而由于文件操作FF 也没有提供支持(无法通过Cookie跨域完成数据传递),致使这种技巧性的方式只能在IE中使用。

 

 

Case V: (其实还是在服务端A用iframe解决了与服务器B通信的问题)

 

要解决的问题:发生在用户提交网页 URL (还包括 Tag, Notes 等)给 Bookmark 服务器时。

关于 URL 的提交至少可以有三种方式:

 

1.       登陆 Bookmark 服务器的提交页面,将要收藏的 URL 通过该页面提交给服务器。

2.       安装浏览器插件,通过插件将 URL 提交给服务器。

3.       从 Bookmark 服务器动态加载 javascript 小工具到当前页面,通过它来完成提交工作。

 

    第一种方式开发起来最简单,但对用户来讲比较麻烦,每次都需要先登陆 Bookmark 服务器才能完成提交;第二种方式我并不熟悉插件开发,而且用户也不喜欢太多的插件堆满自己的浏览器;第三种方式开发难度小,又避免了每次登陆服务器的麻烦,所以最终采用它。第三种方式中动态加载的 javascript 小工具除了需要生成 UI 供用户填写信息( URL , tag , notes 等),当用户点击提交的时候,还要完成与服务器通信的功能。

 

     跨域访问,简单来说就是 A 网站的 javascript 代码试图访问 B 网站,包括提交内容和获取内容。由于安全原因,跨域访问是被各大浏览器所默认禁止的。写过跨域访问 ajax 的朋友相信都遇到过被告知“没有权限”的情况。通过 XMLHttp 来发送数据给 Bookmark 服务器的尝试失败了。于是,看到网上的一些资料,我又开始尝试用 javascript 小工具在用户网页动态创建一个隐藏的 iframe, iframe 的 src 指向服务器的一个 servlet ,试图通过调用 iframe 中提供的 javascript 来完成与服务器的通信。但不幸的是,用户网页中的 javascript 代码访问 iframe 也被浏览器归为跨域访问(特指 iframe 的 src 指向其它网站的情形),尝试再次失败。

 

最终,在一篇文章中看到,与 iframe 不同,如果 A 网站从 B 网站加载 javascript , A 网站可以自由的访问该 javascript 的内容,并不会被浏览器认为是跨域访问。模仿刚才 iframe 的思路,当用户点击提交时,可以动态创建一个 javascript 对象,该对象的 src 指向 Bookmark 服务器的一个 servlet ,注意: URL 、 Tag 、 Notes 、 User 、Password 等信息被作为 src URL 参数传给服务器。请看下面的代码:

 

 

var url = "http://localhost:8080/Deeryard/BookmarkServlet?" +

           "url=" + url_source + "&" + "title=" + title + "&" +

"tag=" + tag + "&" + "notes=" + notes + "&" + "user=" + user + "&" + "password=" + password;

 

url = encodeURI(url);

 

//Submit to server with a trick

var js_obj = document.createElement( "script" );

js_obj.type = "text/javascript" ;

js_obj.setAttribute( "src" , url);

 

//Get response from server by appending it to document

document.body.appendChild(js_obj);

 

 

上面例子中, js_obj.setArrribute() 将信息作为 src 的 URL 参数提交给了 Bookmark servlet 。那么用户又如何取得服务器的响应信息呢?答案就是最末一行代码, servlet 的输出必须是 javascript 代码,它可以调用用户网页上的其他 javascript 函数,以及操作 dom 对象。下面的 servlet 代码生成了一个 javascript 函数调用:

 

out.write("onServerResponse(INADEQUATE_INFORMATION);");

 

document.body.appendChild(js_obj) 执行后 onServerResponse( INADEQUATE_INFORMATION) 就会得到执行,使客户网页响应服务器结果。这样一个完整的通信过程就完成了。

 

CaseVI:Tomcat + PHP + HTML(含JS)(on Server A)

 

服务器A上已经装好了Tomcat, 我们写一个test.html(含JS),再写一个PHP文件(由其来完成跨域通信要求)。

分享到:
评论

相关推荐

    怎样实现Ajax 跨域访问

    怎样实现Ajax 跨域访问的五种方法, 怎样实现Ajax 跨域访问的五种方法

    ajax 设置Access-Control-Allow-Origin实现跨域访问

    ajax跨域访问是一个老问题了,解决方法很多,比较常用的是JSONP方法,JSONP方法是一种非官方方法,而且这种方法只支持GET方式,不如POST方式安全。 即使使用jquery的jsonp方法,type设为POST,也会自动变为GET。如果...

    跨域访问---------

    现在的web工程越来也大,传统的开发模式已经显得捉襟见肘了,不仅开发人员在开发过程中很痛苦,后期维护的人员也更痛苦。...下面我们介绍一种测地解决前端跨域访问的方式,本地服务器请求转发的方式。

    Ajax跨域访问(ASP.NET Web)

    Ajax跨域访问的示例(ASP.NET Web)

    Ajax跨域访问解决方案.doc

    Ajax跨域访问解决方案,访问第三方网站的资源

    ajax跨域解决办法

    本资源主要介绍了AJAX跨域的解决办法,以及解决方案间的比较

    ajax跨域访问

    ajax跨域访问

    JAVA的AJAX跨域访问

    解决了在JSP中的AJAX不能跨域访问的问题

    ajax跨域访问案例.zip

    个人学习时编写的代码,该案例用于演示Ajax的跨域访问问题。!!!补充说明:导入工程时需要选择导入maven工程!上传仅为学习交流,也为自己下载方便!水平有限不喜勿喷。在README.txt中有对项目的详细说明!

    Ajax通过代理跨域访问

    Ajax通过代理来解决跨域访问获取数据,里面描述了两种跨域访问的解决方法

    Ajax跨域传输参数

    可以将book.aa.com用iframe添加到 www.aa.com的某个页面下,在www.aa.com和iframe里面都加上document.domain = "aa.com",这样就可以统一域了,可以实现跨域访问。就和平时同一个域中镶嵌iframe一样,直接调用里面的...

    Ajax跨域访问解决方案

    NULL 博文链接:https://exceptioneye.iteye.com/blog/1405495

    IE8、IE9 Ajax 跨域解决办法

    解决ie8、9Ajax跨域问题(前端):jsp引入此js,Jquery Ajax正常写

    JSONP实现Ajax跨域访问

    主要从三方面来通过jsonp来实现ajax跨域问题: 1.javascript方法 2.jquery $.ajax方法 3.jquery $.getJSON方法 不看会后悔的!

    AJAX的跨域访问-两种有效的解决方法介绍

    本篇文章是对AJAX的跨域访问-两种有效的解决方法进行了详细的分析介绍,需要的朋友参考下

    关于C#中ajax跨域访问问题

    最近做项目,需要跨域请求访问数据问题。下面通过本文给大家分享C#中ajax跨域访问代码详解,需要的朋友可以参考下

    JQury实现Ajax跨域访问

    NULL 博文链接:https://jacky68147527.iteye.com/blog/261877

    跨域访问解决方法-jsonp

    使用jsonp跨域获取json数据。Ajax获取JAVA服务器json数据。

    有关Ajax跨域问题的两种解决方法

    Ajax跨域是前端开发中常见的问题,本文描述了以Google浏览器Chrome作为客户端和以Tomcat作为Web服务器的情况下的解决办法。 问题现象 当出现跨域访问的时候ajax通常会报类似如下错误: XMLHttpRequest cannot load ...

Global site tag (gtag.js) - Google Analytics