對Gmail中使用AJAX技術的研究

ajax
　　現在提起AJAX，大家都立刻會想起Gmail、google map這幾個經典的AJAX應用。Gmail的優良表現我們都看過了，那麼它的實現你研究過了嗎？它怎麼在幾個不同的瀏覽器上可以一致的實現xml非同步呼叫的呢？一起來看看吧。

　　首先，登入gmail以後我們會先進入這個頁面：

＜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＞。＜p＞
＜/font＞
＜/noscript＞
＜script＞
(編者註：原文如此)
＜/script＞
＜/html＞
　　這是主框架頁兼瀏覽器檢測頁。如果瀏覽器通過了檢測（支援javascript、cookie和xml控制項）則在頁面上寫一段架構代碼

　　要注意到的是google在這裡耍了一個小花招，那個叫做main的架構頁面裡面看來沒有多少東西，好東東都在那個叫js的架構裡面呢。

　　我們接著把這個js架構拉出來看看：

　　整整1500多行的javascript代碼！

　　這個頁面有240多k，幾乎全都是javascript代碼。有興趣分析的兄弟姐妹們請點這裡下載。

　　其實其中大部分都是老生常談的js代碼了，不過我們可以一窺google的編碼風格：儘可能壓縮資訊量，變數名能用一個字母的絕不用兩個，函數名一概都是兩個字母的，函數內的會車是沒有的，縮排也是沒有的。雖然代碼沒有特地加密，但是如此處理一番之後也就沒什麼可讀性了。還好系統的關鍵字是不能縮水的，順著xml控制項的名字我們可以揪出來跟AJAX非同步載入資料相關的幾個關鍵函數：

function vb()
{
　vara=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。