DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> AJAX入門 >> AJAX詳解 >> AJAX案例研究之Gmail
AJAX案例研究之Gmail
編輯: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應用吧。

推薦:AJax案例研究之google suggest

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved