Hello World
Spiga

挣脱浏览器的束缚(6) - AJAX也跨域名

2007-02-02 02:39 by 老赵, 7992 visits

标题有些唬人的成分,因为这里跨的只是子域名。

事情的经过是这样的,还是那个个人门户网站。其中有个功能就是RSS订阅,每个订阅作为一个模块出现在页面上。如果一个用户订阅了比较多的RSS,则在打开页面时所有的RSS模块就会开始加载,这时候可能就会需要十几秒甚至更长的时间才能加载完毕。这时,如果用户需要作别的AJAX操作——比如保存页面设置——那么长时间的等待就不可避免了,谁让浏览器对于相同域名只能同时存在两个连接呢?不过这可不是一个好的用户体验,那么我们需要怎么做呢?

第一种做法可能比较容易想到,我们可以自己编写代码维护一个Priority Queue,为每个请求附加一个“优先级”信息,这样我们就可以把重要的请求率先发出。这样就可以在一定程度上解决用户的等待问题。可惜这个方法还是无法突破两个连接的限制。于是第二种做法,我们就要设法突破两个连接的限制了。如果能够向别的域名发出AJAX请求,不也就能避免重要的请求被大量的请求所阻塞了吗?

我们还是从头看起,一点一点地来解决这个问题。

 

阻塞的AJAX请求

我们先来证实一下请求的阻塞情况吧。我们使用如下的代码:

function simpleRequest()
{
    var request = new XMLHttpRequest();
    request.open("POST", "Script.ashx");
    request.send(null);
}

function threeRequests()
{
    simpleRequest();
    simpleRequest();
    simpleRequest();
}

 

当执行threeRequests时就会连续发出3个相同域名的请求,还是通过统计图表来查看阻塞的效果(如图11):

图11:最后的请求被前两个请求阻塞

 

每个请求需要花费1.5秒的时间。很明显,第三个请求必须等到第一个请求结束之后才能执行,因此总共需要进行3秒多钟才能执行完毕。我们要改变的就是这个状况。

 

传统的跨域名异步请求解决方案

AJAX安全性的唯一保证,似乎就是对于跨域名(Cross-Domain)AJAX请求的限制。除非打开本地硬盘的网页,或者在IE中将跨域名传输数据的限制打开,否则向其他域名发出AJAX请求都会被禁止。而且对于跨域名的判断非常严格,不同的子域名,或者相同域名的不同端口,都会被认作是不同的域名,我们不能向它们的资源发出AJAX请求。

从表面上看起来似乎没有办法打破这个限制,还好我们有个救星,那就是iframe!

iframe虽然不在标准中出现,但是由于它实在有用,FireFox也“不得不”对它进行了支持(类似的还有innerHTML)。网上已经有一些跨域名发出异步请求的做法,但是它们实在做的不好。它们的简单工作原理如下:在另一个域名下放置一个特定的页面文件作为Proxy,主页面将异步请求的信息通过Query String传递入iframe里的Proxy页面,Proxy页面在AJAX请求执行完毕后将结果放在自己location的hash中,而主页面会对iframe的src的hash值进行轮询,一旦发现它出现了改变,则通过hash值得到需要的信息。

这个方法的实现比较复杂,而且功能有限。在IE和FireFox中,对于URL的长度大约可以支持2000个左右的字符。对于普通的需求它可能已经足够了,可惜如果真要传递大量的数据,这就远远不够了。与我们一会儿要提出的解决方案相比,可能它唯一的优势就是能够跨任意域名进行异步请求,而我们的解决方案只能突破子域名的限制。

那么现在来看看我们的做法!

 

优雅地突破子域名的限制

我们突破子域名限制的关键还是在于iframe。

iframe是的好东西,我们能够跨过子域名来访问iframe里的页面对象,例如window和DOM结构,包括调用JavaScript(通过window对象)——我们将内外页面的document.domain设为相同就可以了。然后在不同子域名的页面发起不同的请求,把结果通过JavaScript进行传递即可。唯一需要的也仅仅是一个简单的静态页面作为Proxy而已。

我们现在就来开始编写一个原形,虽然简单,但是可以说明问题。

首先,我们先来编写一个静态页面,作为放在iframe里的Proxy,如下:

<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Untitled Page</title>
    <script type="text/javascript" language="javascript">
        document.domain = "test.com";
        
        function sendRequest(method, url)
        {
            var request = new XMLHttpRequest();
            request.open(method, url);
            request.send(null);
        }
    </script>
</head>
<body>

</body>
</html>

 

然后我们再编写我们的主页面:

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Untitled Page</title>
    <script type="text/javascript" language="javascript">
        document.domain = "test.com";
    
        function simpleRequest()
        {
            var request = new XMLHttpRequest();
            request.open("POST", "Script.ashx");
            request.send(null);
        }
        
        function crossSubDomainRequest()
        {
            var proxy = document.getElementById("iframeProxy").contentWindow;
            proxy.sendRequest('POST', 'http://sub0.test.com/Script.ashx');
        }
        
        function threeRequests()
        {
            simpleRequest();
            simpleRequest();
            crossSubDomainRequest();
        }
    </script>
</head>
<body>
    <input type="button" value="Request" onclick="threeRequests()" />
    <iframe src="http://sub0.test.com/SubDomainProxy.html" style="display:none;" 
        id="iframeProxy"></iframe>
</body>
</html>

 

当执行threeRequests方法时,将会同时请求http://www.test.com以及http://sub0.test.com两个不同域名下的资源。很明显,最后一个请求已经不会受到前两个请求的阻塞了(如图12):

图12:不同域名的请求不会被阻塞

令人满意的结果!

虽说只能突破子域名,但是这已经足够了,不是吗?我们为什么要强求任意域名之间能够异步通讯呢?更何况我们的解决方案是多么的优雅!在下一篇文章中,我们将会为ASP.NET AJAX客户端实现一个完整的CrossSubDomainRequestExecutor,它会自动判断是否正在发出跨子域名的请求,并选择AJAX请求的方式。这样,客户端的异步通讯层就会对开发人员完全透明。世上还会有比这更令人愉快的事情吗?:)

 

注意事项

可能以下几点值得一提:

  • 我在出现这个想法之后也作了一些尝试,最后发现创建XMLHttpRequest对象,调用open方法和send方法都必须在iframe中的页面中执行才能够在IE和FireFox中成功发送AJAX请求。
  • 在上面的例子中,我们向子域名请求的的路径是http://sub0.test.com/Script.ashx。请注意,完整的子域名不可以省略,否则在FireFox下就会出现权限不够的错误,在调用open方法时就会抛出异常——似乎FireFox把它当作了父页面域名的资源了。
  • Windows Live Contacts Gadget使用了一种叫做Channel的技术,用于解决跨任意域名传递数据的问题,我相当佩服微软技术人员的创造力。Channel技术是一种优秀的解决跨域名异步请求问题的解决方案,而且如果将它封装成了组件,那么使用起来也会相当优雅(似乎微软已经准备这么做了)。不过它和我们现在需要解决的问题并不相同,如果有机会的话,我也会详细的解释一下Channel技术——但不是现在,因为我觉得我还没有完全理解这个技术本身。
Creative Commons License

本文基于署名 2.5 中国大陆许可协议发布,欢迎转载,演绎或用于商业目的,但是必须保留本文的署名赵劼(包含链接),具体操作方式可参考此处。如您有任何疑问或者授权方面的协商,请给我留言

Add your comment

35 条回复

  1. 沧桑雨迢迢
    *.*.*.*
    链接

    沧桑雨迢迢 2007-02-02 03:01:00

    传说中的夜猫子???

  2. 维生素C.NET
    *.*.*.*
    链接

    维生素C.NET 2007-02-02 03:09:00

    以后这么晚再跟您聊天绝对不碰烟了... ...同时也深深敬佩赵哥的工作和奉献精神

  3. 老赵
    admin
    链接

    老赵 2007-02-02 03:12:00

    @沧桑雨迢迢
    非常夜的猫子,不过白天也准时出没,hoho。

  4. 老赵
    admin
    链接

    老赵 2007-02-02 03:13:00

    @维生素C.NET
    其实还是早点睡比较好,舒服啊……

  5. 沧桑雨迢迢
    *.*.*.*
    链接

    沧桑雨迢迢 2007-02-02 06:43:00

    我睡了2小时又来啦~~~老赵还在吗??

  6. 水果阿生
    *.*.*.*
    链接

    水果阿生 2007-02-02 09:19:00

    不错不错,貌似是当年帮我写的那个的升级版本。

  7. 老赵
    admin
    链接

    老赵 2007-02-02 09:26:00

    @沧桑雨迢迢
    来了。:)

  8. 老赵
    admin
    链接

    老赵 2007-02-02 09:27:00

    @水果阿生
    帮你做的是第5片文章里谈的。:)

  9. BirdsHover
    *.*.*.*
    链接

    BirdsHover 2007-02-02 09:45:00

    好,不错

  10. 维生素C.NET
    *.*.*.*
    链接

    维生素C.NET 2007-02-02 09:48:00

    @Jeffrey Zhao
    回复的真及时..就比我晚1分钟..

    这是昨晚谈及的p3p header的几篇文章:
    http://www.p3pwriter.com/LRN_121.asp
    http://ewbi.blogs.com/develops/2004/07/ie_60_w3c_and_p.html
    http://www.dup2.org/node/384

  11. 老赵
    admin
    链接

    老赵 2007-02-02 09:49:00

    @维生素C.NET
    谢谢!

  12. 老赵
    admin
    链接

    老赵 2007-02-02 09:49:00

    @BirdsHover
    多谢支持。:)

  13. jailu
    *.*.*.*
    链接

    jailu 2007-02-02 09:49:00

    好文,学习ing,不知道能说些什么了

  14. 老赵
    admin
    链接

    老赵 2007-02-02 11:21:00

    @jailu
    :)

  15. 魏晋遗疯
    *.*.*.*
    链接

    魏晋遗疯 2007-02-02 11:36:00

    学习!顶

  16. 老赵
    admin
    链接

    老赵 2007-02-02 11:43:00

    @魏晋遗疯
    谢谢

  17. 在北京的湖南人
    *.*.*.*
    链接

    在北京的湖南人 2007-02-02 12:41:00

    问下老赵,部署asp.net ajax的网站,跟一般部署没两样吧?
    还有asp.net ajax的脚本好像很大,他们也是多脚本并发下载吗?

  18. 老赵
    admin
    链接

    老赵 2007-02-02 12:44:00

    @在北京的湖南人
    asp.net的网站其实部署都一样吧,asp.net ajax也只是提供了一个普通的程序集而已。脚本的并发下载是靠网页开发人员的编写方式决定的,和asp.net ajax无关。:)

  19. 在北京的湖南人
    *.*.*.*
    链接

    在北京的湖南人 2007-02-02 12:50:00

    哦,明白了,那我们有办法可以改进asp.net ajax js资源的请求模型吗?如果要是想用asp.net ajax ,却不得不牺牲用户第一次加载时的时间等待,好像很矛盾啊,ajax 提高用户体验,但是脚本加载却让客户在苦心等待

  20. 老赵
    admin
    链接

    老赵 2007-02-02 13:04:00

    @在北京的湖南人
    似乎没有办法改变一些主要的js文件的引入方式。
    不过其它的js文件引入都能够优化的。

  21. yukaizhao[未注册用户]
    *.*.*.*
    链接

    yukaizhao[未注册用户] 2007-02-02 13:10:00

    吓了一跳,还以为真的跨域名了。
    真的跨域名了,会带来安全上的问题,所以浏览器不可能同意的

  22. 老赵
    admin
    链接

    老赵 2007-02-02 13:40:00

    @yukaizhao
    呵呵,这是自然。

  23. firedlove[未注册用户]
    *.*.*.*
    链接

    firedlove[未注册用户] 2007-02-02 23:04:00

    很不错 又出新文章了 一直在看

  24. 老赵
    admin
    链接

    老赵 2007-02-02 23:11:00

    @firedlove
    多谢支持。:)

  25. 海纳百川
    *.*.*.*
    链接

    海纳百川 2007-02-11 15:13:00

    To Jeffrey Zhao,

    大哥的文章不错,说的非常明白。

    封装跨域的RSS:
    使用C# 中的WebRequest 对象,直接请求RSS源。在页面中用XmlHttpRequest 访问封装的东东,获得要显示的数据,然后利用 DOM 对象的innerHTML就可以了。

    http://site.fenlei.cn 中注册一个用户,进入后使用“订阅新闻”模块,体验一把。

  26. 老赵
    admin
    链接

    老赵 2007-02-11 15:31:00

    @海纳百川
    这其实就是使用服务器端作为代理了,呵呵。

  27. 我不是一只鹿
    *.*.*.*
    链接

    我不是一只鹿 2008-03-25 17:24:00

    ..........
    表示同情

  28. Robbie Wu[未注册用户]
    *.*.*.*
    链接

    Robbie Wu[未注册用户] 2008-04-19 09:34:00

    问下老赵,我在一个网站有三个不同的页面要同时处理Ajax的定时通讯,这样会不会造成阻塞?

  29. Robbie Wu[未注册用户]
    *.*.*.*
    链接

    Robbie Wu[未注册用户] 2008-04-19 09:43:00

    再补充下我现在出现的问题: 就是我使用一个按钮来调用window.open打开一个页面,如果多次打开关闭这个新窗口,会出现窗口空白的情况。 请问这是不是上面的阻塞造成的? 希望赵哥能帮小弟解答一下。 Thanks in advance!

  30. 老赵
    admin
    链接

    老赵 2008-04-20 00:10:00

    @Robbie Wu
    三个不同页面,就是指三个浏览器窗口吗?那么就不会造成阻塞的。

  31. Robbie Wu[未注册用户]
    *.*.*.*
    链接

    Robbie Wu[未注册用户] 2008-04-21 12:07:00

    @Jeffrey Zhao
    这样,那我得找找其他原因了。不过还是谢谢你的帮忙。

  32. Zork[未注册用户]
    *.*.*.*
    链接

    Zork[未注册用户] 2008-07-01 14:39:00

    希望能够介绍:Windows Live Contacts Gadget 中的 Channel技术,
    万分期待……

  33. wengnet
    *.*.*.*
    链接

    wengnet 2009-10-23 12:59:00

    呵呵,一般情况下这样没有问题,但是.......

  34. chenleinet
    *.*.*.*
    链接

    chenleinet 2010-01-03 13:56:00

    现在已经可以用jsonp解决了

  35. jason
    61.135.165.*
    链接

    jason 2011-12-07 10:17:23

    hi,帅哥,我遇到是的是hang住的问题,请问有什么解决办法吗? 就是3个ajax连接,其中第一个连接特别慢,把后面的hang住了,刚好,后面的想体现出来的是第一个连接长时间执行后的日志滚动效果。

    我使用了iframe里面嵌入一个页面调用ajax来刷新父页面的内容的方法,刷新是能成功,但是hang住了,他们是在同一个页面的,请问有什么办法解决吗?

发表回复

登录 / 登录并记住我 ,登陆后便可删除或修改已发表的评论 (请注意保留评论内容)

昵称:(必填)

邮箱:(必填,仅用于Gavatar

主页:(可选)

评论内容(大于5个字符):

  1. Your Name yyyy-MM-dd HH:mm:ss

使用Live Messenger联系我