日期:2014-05-16  浏览次数:20692 次

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

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