天天看點

AJAX 介紹

1、ajax技術的背景

      不可否認,ajax技術的流行得益于google的大力推廣,正是由于google earth、google suggest以及gmail等對ajax技術的廣泛應用,催生了ajax的流行。而這也讓微軟感到無比的尴尬,因為早在97年,微軟便已經發明了ajax中的關鍵技術,并且在99年IE5推出之時,它便開始支援XmlHttpRequest對象,并且微軟之前已經開始在它的一些産品中應用ajax,比如說MSDN網站菜單中的一些應用。遺憾的是,不知道出于什麼想法,當時微軟發明了ajax的核心技術之後,并沒有看到它的潛力而加以發展和推廣,而是将它擱置起來。對于這一點來說,我個人是覺得非常奇怪的,因為以微軟的資源和它的戰略眼光來說,應該不會看不到ajax技術的前景,唯一的解釋也許就是因為當時它的主要競争對手Netscape的消失反而使它變得麻痹和遲鈍,畢竟巨人也有打盹的時候,比如IBM曾經在對微軟戰略上的失誤。正是這一次的失誤,成就了它現在的競争對手google在ajax方面的領先地位,而事實上google目前在ajax技術方面的領先是微軟所無法達到的,這一點在後面我講述ajax缺陷的時候也會提到。現在微軟也意識到了這個問題,是以它也開始在ajax領域奮起直追,比如說推出它自己的ajax架構atlas,并且在.NET2.0也提供了一個用來實作異步回調的接口,即ICallBack接口。那麼微軟為什麼對自己在ajax方面的落後如此緊張呢?現在就讓我們來分析一下ajax技術後面隐藏的深刻意義。

2、ajax技術的意義

     我們在平時的開發中都多多少少的接觸或者應用到了ajax,談到ajax技術的意義,我們關注得最多的毫無疑問是提升使用者的體驗。但是,如果我們結合将來電腦和網際網路的發展趨勢,我們會發現ajax技術在某些方面正好代表了這種趨勢。為什麼這樣說呢?我們知道,自從電腦出現以來,一直是桌面軟體占據着絕對主導的地位,但是網際網路的出現和成功使這一切開始發生着微妙的變化。相當一部分的人都相信,遲早有一天,資料和電腦軟體将會從桌面轉移到網際網路。也就是說,将來的電腦有可能抛棄笨重的硬碟,而直接從網際網路來擷取資料和服務,我記得我念大學的時候,有位教授給我們上課的時候,曾經設想過這樣一種情景,也許在将來的電腦桌面上,沒有任何多餘的軟體和程式,而僅僅隻有一個IE,雖然現在看起來我們距離這一天還很遙遠,并且這其中還有很多的問題需要解決,但是我覺得這個并非夢想,而是遲早将實作的現實。那麼,這其中的主要問題就是網際網路的連接配接不穩定,誰也不願意看着自己的電腦從伺服器一點一滴的下載下傳資料,那麼,ajax是不是解決了這個問題呢,說實話,與其說ajax解決了這個問題,倒不如它隻是掩蓋了這個問題,它隻是在伺服器和用戶端之間充當了一個緩沖器,讓使用者誤以為服務沒有中斷。精确的說,ajax并不能提高從伺服器端下載下傳資料的速度,而隻是使這個等待不那麼令人沮喪。但是正是這一點就足以産生巨大的影響和震動,它實際上也對桌面軟體産生了巨大的沖擊。這一點我用一個例子來說明,我們可以比較一下Outlook Express和Gmail,前者是典型的桌面軟體,後者是ajax所實作的B/S模式,實際上後者目前已經在慢慢取代前者了,Gmail在收發郵件的時候已經和Outlook Express的功能幾乎沒有差别了,而且它不需要安裝用戶端程式。這就是為什麼微軟對ajax所帶來的沖擊有着如此的恐懼心理,并且在它前不久所進行的調查之中,将google看做他們未來十年内的主要競争對手的主要原因之一。當然,這種變化也并不會将桌面軟體全部淘汰,現有的浏覽器還沒有一個能像PhotoShop等桌面程式那樣處理複雜的圖像。但是我們也不能忽視它帶來的影響和沖擊。

3、關于ajax的名字

    ajax 的全稱是Asynchronous JavaScript and XML,其中,Asynchronous 是異步的意思,它有别于傳統web開發中采用的同步的方式。

4、關于同步和異步

異步傳輸是面向字元的傳輸,它的機關是字元;而同步傳輸是面向比特的傳輸,它的機關是桢,它傳輸的時候要求接受方和發送方的時鐘是保持一緻的。

具體來說,異步傳輸是将比特分成小組來進行傳送。一般每個小組是一個8位字元,在每個小組的頭部和尾部都有一個開始位和一個停止位,它在傳送過程中接收方和發送方的時鐘不要求一緻,也就是說,發送方可以在任何時刻發送這些小組,而接收方并不知道它什麼時候到達。一個最明顯的例子就是計算機鍵盤和主機的通信,按下一個鍵的同時向主機發送一個8比特位的ASCII代碼,鍵盤可以在任何時刻發送代碼,這取決于使用者的輸入速度,内部的硬體必須能夠在任何時刻接收一個鍵入的字元。這是一個典型的異步傳輸過程。異步傳輸存在一個潛在的問題,即接收方并不知道資料會在什麼時候到達。在它檢測到資料并做出響應之前,第一個比特已經過去了。這就像有人出乎意料地從後面走上來跟你說話,而你沒來得及反應過來,漏掉了最前面的幾個詞。是以,每次異步傳輸的資訊都以一個起始位開頭,它通知接收方資料已經到達了,這就給了接收方響應、接收和緩存資料比特的時間;在傳輸結束時,一個停止位表示該次傳輸資訊的終止。按照慣例,空閑(沒有傳送資料)的線路實際攜帶着一個代表二進制1的信号。步傳輸的開始位使信号變成0,其他的比特位使信号随傳輸的資料資訊而變化。最後,停止位使信号重新變回1,該信号一直保持到下一個開始位到達。例如在鍵盤上數字“1”,按照8比特位的擴充ASCII編碼,将發送“00110001”,同時需要在8比特位的前面加一個起始位,後面一個停止位。

同步傳輸的比特分組要大得多。它不是獨立地發送每個字元,每個字元都有自己的開始位和停止位,而是把它們組合起來一起發送。我們将這些組合稱為資料幀,或簡稱為幀。

  資料幀的第一部分包含一組同步字元,它是一個獨特的比特組合,類似于前面提到的起始位,用于通知接收方一個幀已經到達,但它同時還能確定接收方的采樣速度和比特的到達速度保持一緻,使收發雙方進入同步。

  幀的最後一部分是一個幀結束标記。與同步字元一樣,它也是一個獨特的比特串,類似于前面提到的停止位,用于表示在下一幀開始之前沒有别的即将到達的資料了。

  同步傳輸通常要比異步傳輸快速得多。接收方不必對每個字元進行開始和停止的操作。一旦檢測到幀同步字元,它就在接下來的資料到達時接收它們。另外,同步傳輸的開銷也比較少。例如,一個典型的幀可能有500位元組(即4000比特)的資料,其中可能隻包含100比特的開銷。這時,增加的比特位使傳輸的比特總數增加2.5%,這與異步傳輸中25 %的增值要小得多。随着資料幀中實際資料比特位的增加,開銷比特所占的百分比将相應地減少。但是,資料比特位越長,緩存資料所需要的緩沖區也越大,這就限制了一個幀的大小。另外,幀越大,它占據傳輸媒體的連續時間也越長。在極端的情況下,這将導緻其他使用者等得太久。

        了解了同步和異步的概念之後,大家應該對ajax為什麼可以提升使用者體驗應該比較清晰了,它是利用異步請求方式的。打個比方,如果現在你家裡所在的小區因某種情況而面臨停水,現在有關部門公布了兩種方案,一是完全停水8個小時,在這8個小時内完全停水,8個小時後恢複正常。二是不完全停水10 個小時,在這10個小時内水沒有完全斷,隻是流量比原來小了很多,在10個小時後恢複正常流量,那麼,如果是你你會選擇哪種方式呢?顯然是後者。

5、ajax所包含的技術

    大家都知道ajax并非一種新的技術,而是幾種原有技術的結合體。它由下列技術組合而成。

   1.使用CSS和XHTML來表示。

   2. 使用DOM模型來互動和動态顯示。

   3.使用XMLHttpRequest來和伺服器進行異步通信。

   4.使用javascript來綁定和調用。

在上面幾中技術中,除了XmlHttpRequest對象以外,其它所有的技術都是基于web标準并且已經得到了廣泛使用的,XMLHttpRequest雖然目前還沒有被W3C所采納,但是它已經是一個事實的标準,因為目前幾乎所有的主流浏覽器都支援它。

6、ajax原理和XmlHttpRequest對象

  Ajax的原理簡單來說通過XmlHttpRequest對象來向伺服器發異步請求,從伺服器獲得資料,然後用javascript來操作DOM而更新頁面。這其中最關鍵的一步就是從伺服器獲得請求資料。要清楚這個過程和原理,我們必須對 XMLHttpRequest有所了解。

XMLHttpRequest是ajax的核心機制,它是在IE5中首先引入的,是一種支援異步請求的技術。簡單的說,也就是javascript可以及時向伺服器提出請求和處理響應,而不阻塞使用者。達到無重新整理的效果。

  是以我們先從XMLHttpRequest講起,來看看它的工作原理。

  首先,我們先來看看XMLHttpRequest這個對象的屬性。

  它的屬性有:

  onreadystatechange  每次狀态改變所觸發事件的事件處理程式。

  responseText     從伺服器程序傳回資料的字元串形式。

  responseXML    從伺服器程序傳回的DOM相容的文檔資料對象。

  status           從伺服器傳回的數字代碼,比如常見的404(未找到)和200(已就緒)

  status Text       伴随狀态碼的字元串資訊

  readyState       對象狀态值

0 (未初始化) 對象已建立,但是尚未初始化(尚未調用open方法)

1 (初始化) 對象已建立,尚未調用send方法

2 (發送資料) send方法已調用,但是目前的狀态及http頭未知

3 (資料傳送中) 已接收部分資料,因為響應及http頭不全,這時通過responseBody和responseText擷取部分資料會出現錯誤,

4 (完成) 資料接收完畢,此時可以通過通過responseXml和responseText擷取完整的回應資料

  但是,由于各浏覽器之間存在差異,是以建立一個XMLHttpRequest對象可能需要不同的方法。這個差異主要展現在IE和其它浏覽器之間。下面是一個比較标準的建立XMLHttpRequest對象的方法。

   function CreateXmlHttp()

   {

   //非IE浏覽器建立XmlHttpRequest對象

    if(window.XmlHttpRequest)

    {

     xmlhttp=new XmlHttpRequest();

    }

    //IE浏覽器建立XmlHttpRequest對象

     if(window.ActiveXObject)

    try

     xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");    

    catch(e)

    try{

     xmlhttp=new ActiveXObject("msxml2.XMLHTTP");

     }

     catch(ex){}

   } 

function Ustbwuyi()

    var data=document.getElementById("username").value;  

        CreateXmlHttp();

        if(!xmlhttp)

        {

         alert("建立xmlhttp對象異常!");

         return false;

        }      

        xmlhttp.open("POST",url,false);

        xmlhttp.onreadystatechange=function()

        {  

         if(xmlhttp.readyState==4)

           {

           document.getElementById("user1").innerHTML="資料正在加載...";

             if(xmlhttp.status==200)

             {

              document.write(xmlhttp.responseText);

             }     

           }

         }

        xmlhttp.send();

   }

如上所示,函數首先檢查XMLHttpRequest的整體狀态并且保證它已經完成(readyStatus=4),即資料已經發送完畢。然後根據伺服器的設定詢問請求狀态,如果一切已經就緒(status=200),那麼就執行下面需要的操作。

對于XmlHttpRequest的兩個方法,open和send,其中open方法指定了:

a、向伺服器送出資料的類型,即post還是get。

b、請求的url位址和傳遞的參數。

c、傳輸方式,false為同步,true為異步。預設為true。如果是異步通信方式(true),客戶機就不等待伺服器的響應;如果是同步方式(false),客戶機就要等到伺服器傳回消息後才去執行其他操作。我們需要根據實際需要來指定同步方式,在某些頁面中,可能會發出多個請求,甚至是有組織有計劃有隊形大規模的高強度的request,而後一個是會覆寫前一個的,這個時候當然要指定同步方式。

    Send方法用來發送請求。

  知道了XMLHttpRequest的工作流程,我們可以看出,XMLHttpRequest是完全用來向伺服器發出一個請求的,它的作用也局限于此,但它的作用是整個ajax實作的關鍵,因為ajax無非是兩個過程,送出請求和響應請求。并且它完全是一種用戶端的技術。而XMLHttpRequest正是處理了伺服器端和用戶端通信的問題是以才會如此的重要。

  現在,我們對ajax的原理大概可以有一個了解了。我們可以把伺服器端看成一個資料接口,它傳回的是一個純文字流,當然,這個文本流可以是XML格式,可以是Html,可以是Javascript代碼,也可以隻是一個字元串。這時候,XMLHttpRequest向伺服器端請求這個頁面,伺服器端将文本的結果寫入頁面,這和普通的web開發流程是一樣的,不同的是,用戶端在異步擷取這個結果後,不是直接顯示在頁面,而是先由javascript來處理,然後再顯示在頁面。至于現在流行的很多ajax控件,比如magicajax等,可以傳回DataSet等其它資料類型,隻是将這個過程封裝了的結果,本質上他們并沒有什麼太大的差別。

7、ajax的優點

   Ajax的給我們帶來的好處大家基本上都深有體會,在這裡我隻簡單的講幾點:

   1、最大的一點是頁面無重新整理,在頁面内與伺服器通信,給使用者的體驗非常好。

  2、使用異步方式與伺服器通信,不需要打斷使用者的操作,具有更加迅速的響應能力。

  3、可以把以前一些伺服器負擔的工作轉嫁到用戶端,利用用戶端閑置的能力來處理,減輕伺服器和帶寬的負擔,節約空間和寬帶租用成本。并且減輕伺服器的負擔,ajax的原則是“按需取資料”,可以最大程度的減少備援請求,和響應對伺服器造成的負擔。

  4、基于标準化的并被廣泛支援的技術,不需要下載下傳插件或者小程式。

8、ajax的缺點

  下面我着重講一講ajax的缺陷,因為平時我們大多注意的都是ajax給我們所帶來的好處諸如使用者體驗的提升。而對ajax所帶來的缺陷有所忽視。

  下面所闡述的ajax的缺陷都是它先天所産生的。

   1、ajax幹掉了back按鈕,即對浏覽器後退機制的破壞。後退按鈕是一個标準的web站點的重要功能,但是它沒法和js進行很好的合作。這是ajax所帶來的一個比較嚴重的問題,因為使用者往往是希望能夠通過後退來取消前一次操作的。那麼對于這個問題有沒有辦法?答案是肯定的,用過Gmail的知道,Gmail下面采用的ajax技術解決了這個問題,在Gmail下面是可以後退的,但是,它也并不能改變ajax的機制,它隻是采用的一個比較笨但是有效的辦法,即使用者單擊後退按鈕通路曆史記錄時,通過建立或使用一個隐藏的IFRAME來重制頁面上的變更。(例如,當使用者在Google Maps中單擊後退時,它在一個隐藏的IFRAME中進行搜尋,然後将搜尋結果反映到Ajax元素上,以便将應用程式狀态恢複到當時的狀态。)

但是,雖然說這個問題是可以解決的,但是它所帶來的開發成本是非常高的,和ajax架構所要求的快速開發是相背離的。這是ajax所帶來的一個非常嚴重的問題。

 2、安全問題

技術同時也對IT企業帶來了新的安全威脅,ajax技術就如同對企業資料建立了一個直接通道。這使得開發者在不經意間會暴露比以前更多的資料和伺服器邏輯。ajax的邏輯可以對用戶端的安全掃描技術隐藏起來,允許黑客從遠端伺服器上建立新的攻擊。還有ajax也難以避免一些已知的安全弱點,諸如跨站點腳步攻擊、SQL注入攻擊和基于credentials的安全漏洞等。

  3、對搜尋引擎的支援比較弱。

  4、破壞了程式的異常機制。至少從目前看來,像ajax.dll,ajaxpro.dll這些 lan

繼續閱讀