DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> AJAX入門 >> AJAX基礎知識 >> 對Gmail中使用AJAX技術的研究
對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。

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