前谷歌设计师,同时也是现 Dropbox 设计副总裁 Nicholas Jitkoff
创造了一种“仅存在于 URL 中的网站”  itty
bitty。

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

可以先点击这里进去感受一下该网站的特点。

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

澳门新葡亰 1

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

据介绍,这是一种自包含微型网站,与传统网站最大的区别在于,它不需要服务器对网站进行托管,而是将网页内容压缩、编码到
URL 中,通过该 URL 在用户间(“客户端”间)传播数据。

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

具体来讲,该机制可以拆分为以下几个步骤:

<html>
<head>
<script language="javascript" type="text/javascript">
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>


<div id=dv></div>

<input onclick=loadContent() type=button value="Click Me">
  • itty bitty 使用可以显著减小 HTML
    体积的 Lempel–Ziv–Markov 链算法对网页内容进行压缩。

  • 压缩之后,itty bitty
    对压缩后的内容进行 base64 编码,将其从二进制数据转换为可以安全存储在
    URL 中的字母和数字字符串。

  • 转化的结果被称为 URL
    片段(fragment),此时
    itty bitty 会将该 URL 片段作为后缀附着在
    URL,其中
    Name 表示该页面的 title。

  • 生成的 URL 通过复制或者直接分享到 Twitter
    等方式进行传播,接收者访问该 URL时,Web 浏览器会加载 itty.bitty.site
    以逆转上述过程,从而获取最初的 HTML
    页面内容。值得一提的是,因为没有服务器存在,那么用户访问该 URL
    的时候,其网络请求并不会发往所谓的”服务器“,而是借助于 URL fragment
    的特性“跳转到页面上的某个位置”。

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

itty
bitty 已开源,地址:
不应该用于传输数据,这一点在 GET/POST 的设计上早就有警示。

<script language="C#" 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 的内容。

澳门新葡亰,(文/开源中国)    

编者注:如果 Ajax 的 js 内容由 B 提供,则 A
可以利用 B 提供的 js 方便地访问 B 的资源。比如 A 中的 js 代码:

<script type="text/javascript" src="B/core.js"></script>

Case III. iframe 方式 (on Server A)

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

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

  1. :





    请求:

    回复:


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

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

网站地图xml地图