AJAX案例研究之詳細剖析Gmail應用

來源:互聯網
上載者:User
ajax

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

首先,登入gmail以後我們會先進入這個頁面:

<html><head><meta
content="text/html;
charset=UTF-8" http-equiv="content-type">
<title>Gmail</title><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、cookie和xml控制項)則在頁面上寫一段架構代碼。要注意到的是google在這裡耍了一個小花招,那個叫做main的架構頁面裡面看來沒有多少東西,好東東都在那個叫js的架構裡面呢。

我們接著把這個js架構拉出來看看:整整1500多行的javascript代碼!這個頁面有240多k,幾乎全都是javascript代碼。其實其中大部分都是老生常談的js代碼了,不過我們可以一窺google的編碼風格:儘可能壓縮資訊量,變數名能用一個字母的絕不用兩個,函數名一概都是兩個字母的,函數內的會車是沒有的,縮排也是沒有的。

雖然代碼沒有特地加密,但是如此處理一番之後也就沒什麼可讀性了。還好系統的關鍵字是不能縮水的,順著xml控制項的名字我們可以揪出來跟AJAX非同步載入資料相關的幾個關鍵函數:

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。今天先到這,下回再過來分析另一個完全不同的AJAX應用吧。



相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.