1. 论坛系统升级为Xenforo,欢迎大家测试!
    排除公告

[转载]对Gmail中使用AJAX技术的研究

本帖由 srsman2006-05-24 发布。版面名称:前端开发

  1. srsman

    srsman Active Member

    注册:
    2005-11-08
    帖子:
    1,920
    赞:
    6
    现在提起AJAX,大家都立刻会想起Gmail、google map这几个经典的AJAX应用。Gmail的优良表现我们都看过了,那么它的实现你研究过了吗?它怎么在几个不同的浏览器上可以一致的实现xml异步调用的呢?一起来看看吧。

    首先,登录gmail以后我们会先进入这个页面:


    QUOTE:

    <html>
    <head>
    <meta content="text/html;
    charset=UTF-8"
    http-equiv="content-type">
    <title>Gmailtitle>
    <link rel="alternate"
    type="application/atom+xml"
    title="Gmail Atom Feed"
    href="feed/atom" />
    <script src="?view=page&name=
    browser&ver=c0d3d44c64799453">
    </script>
    head>
    <noscript>
    <font face=arial>





    应启用JavaScript,才能在标准视图中使用Gmail。然而,JavaScript似乎已被禁用,要么就是您的浏览器不支持JavaScript。要使用标准视图,请更改您的浏览器选项以启用 JavaScript,然后<a href="">重试<a>。<p>要使用 Gmail 的基本 HTML 视图(不需要 JavaScript),<a href="?ui=html&zy=n">请单击此处</a>。


    QUOTE:

    <p>
    </font>
    </noscript>
    <script>
    (编者注:原文如此)
    </script>
    </html>





    这是主框架网页兼浏览器检测页。如果浏览器通过了检测(支持javascript、cookie和xml控件)则在页面上写一段框架代码

    要注意到的是google在这里耍了一个小花招,那个叫做main的框架页面里面看来没有多少东西,好东东都在那个叫js的框架里面呢。我们接着把这个js框架拉出来看看:

    整整1500多行的javascript代码!这个页面有240多k,几乎全都是javascript代码。

    其实其中大部分都是老生常谈的js代码了,不过我们可以一窥google的编码风格:尽可能压缩信息量,变量名能用一个字母的绝不用两个,函数名一概都是两个字母的,函数内的会车是没有的,缩进也是没有的。

    虽然代码没有特地加密,但是如此处理一番之后也就没什么可读性了。还好系统的关键字是不能缩水的,顺着xml控件的名字我们可以揪出来跟AJAX异步加载数据相关的几个关键函数:


    QUOTE:

    function vb()
    {
     var a=null;
     if(r)
     {
      var b=fG?"Microsoft.XMLHTTP":
    "Msxml2.XMLHTTP";
      try{a=new ActiveXObject(b)
    }
      catch(c)
      {
       q(c);
       alert
    ("您需要启用活动脚本功能和activeX 控件。")
      }
     }else{
      a=new XMLHttpRequest();
      if(!a){;alert
    ("此浏览器不支持 XMLHttpRequest。")}
     }
     return a
    }
    //emu注释 构造XML控件并返回给调用者

    function ot(a,b){;
     try{
      a.send(b)
     }
     catch(c)
     {
      q(c);
      if(c.number==-2146697208)
    {
       alert("请确保
    Internet Explorer 的”语言”设置部分不是空白。")}
     }
    }

    //emu注释 执行发送数据操作
    a:XML控件 b:要发送的数据

    function Wf(a,b,c){
     Da(3);
     b=Ld(b);
     Hf(a,b,c)
    }

    //emu注释
    a:XML控件
    b:访问的url
    c:回调函数 Da是验证参数长度的函数
    //Ld是一个url转换加工的函数,
    主要处理url自带的CGI参数和翻页的页数等

    function Hf(a,b,c){
     Da(3);
     a.onreadystatechange=c;
     a.open("GET",b,true);
     ot(a,null)
    }
    //emu注释 不发送数据直接请求资源
    a:XML控件 b:访问的url c:回调函数

    function nt(a,b,c,d){
     Da(4);
     a.onreadystatechange=d;
     a.open("POST",b,true);
     ot(a,c)
    }





    //emu注释 发送数据并请求资源 a:XML控件 b:访问的url c:要发送的数据 d:回调函数

    发送http请求之后它又怎么处理返回的xml的呢?事实上他没有处理。他所处理的仅仅是最基本responseText,而cgi则直接生成js脚本到客户端回调(用eval运行),或者生成文本信息。这就是为什么gmail可以轻松跨域几个浏览器了。

    作为最受推崇的一个AJAX应用,却几乎没有用到xml。像这样用xml控件来收发文本信息后在页面上展现的技术,基本上就是现在AJAX最流行的应用方式了,不过这样也能叫AJAX吗?我宁可就叫它AJ,最多叫AJAH。