Ajax原理學習

版權聲明：本文為部落客原創文章，轉載注明出處http://blog.csdn.net/u013142781

ajax 是一種用于建立快速動态網頁的技術。

通過在背景與伺服器進行少量資料交換，ajax 可以使網頁實作異步更新。這意味着可以在不重新加載整個網頁的情況下，對網頁的某部分進行更新。傳統的網頁（不使用 ajax）如果需要更新内容，必須重載整個網頁頁面。ajax 技術的廣泛使用，對b/s模式應用慢慢取代了桌面軟體起到了很大的推動作用。

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

異步傳輸

具體來說，異步傳輸是将比特分成小組來進行傳送。一般每個小組是一個8位字元，在每個小組的頭部和尾部都有一個開始位和一個停止位，它在傳送過程中接收方和發送方的時鐘不要求一緻，也就是說，發送方可以在任何時刻發送這些小組，而接收方并不知道它什麼時候到達。

一個最明顯的例子就是計算機鍵盤和主機的通信，按下一個鍵的同時向主機發送一個8比特位的ascii代 碼，鍵盤可以在任何時刻發送代碼，這取決于使用者的輸入速度，内部的硬體必須能夠在任何時刻接收一個鍵入的字元。這是一個典型的異步傳輸過程。

異步傳輸存在 一個潛在的問題，即接收方并不知道資料會在什麼時候到達。在它檢測到資料并做出響應之前，第一個比特已經過去了。這就像有人出乎意料地從後面走上來跟你說 話，而你沒來得及反應過來，漏掉了最前面的幾個詞。是以，每次異步傳輸的資訊都以一個起始位開頭，它通知接收方資料已經到達了，這就給了接收方響應、接收 和緩存資料比特的時間；在傳輸結束時，一個停止位表示該次傳輸資訊的終止。按照慣例，空閑（沒有傳送資料）的線路實際攜帶着一個代表二進制1的信号。步傳輸的開始位使信号變成0，其他的比特位使信号随傳輸的資料資訊而變化。最後，停止位使信号重新變回1，該信号一直保持到下一個開始位到達。例如在鍵盤上數字“1”，按照8比特位的擴充ascii編碼，将發送“00110001”，同時需要在8比特位的前面加一個起始位，後面一個停止位。

同步傳輸

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

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

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

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

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

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

1.使用css和xhtml來表示。 

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

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

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

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

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

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

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

首先，我們先來看看xmlhttprequest這個對象的屬性。 

它的屬性有：

建立 xmlhttprequest 對象

所有現代浏覽器 (ie7+、firefox、chrome、safari 以及 opera) 都内建了 xmlhttprequest 對象。 

通過一行簡單的 javascript 代碼，我們就可以建立 xmlhttprequest 對象。 

建立 xmlhttprequest 對象的文法：

老版本的 internet explorer （ie5 和 ie6）使用 activex 對象：

執行個體一

執行結果：

注釋：onreadystatechange 是一個事件句柄。它的值 (state_change) 是一個函數的名稱，當 xmlhttprequest 對象的狀态發生改變時，會觸發此函數。狀态從 0 (uninitialized) 到 4 (complete) 進行變化。僅在狀态為 4 時，我們才執行代碼。 

為什麼使用 async=true ？ 

我們的執行個體在 open() 的第三個參數中使用了 “true”。 

該參數規定請求是否異步處理。 

true 表示腳本會在 send() 方法之後繼續執行，而不等待來自伺服器的響應。 

onreadystatechange 事件使代碼複雜化了。但是這是在沒有得到伺服器響應的情況下，防止代碼停止的最安全的方法。 

通過把該參數設定為 “false”，可以省去額外的 onreadystatechange 代碼。如果在請求失敗時是否執行其餘的代碼無關緊要，那麼可以使用這個參數。

xml / asp執行個體

您也可以把 xml 文檔打開并發送到伺服器上的 asp 頁面，分析此請求，然後傳回結果。

asp 頁面，由 vbscript 編寫：

通過使用 response.write 屬性把結果傳回用戶端。

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這些ajax架構是會破壞程式的異常機制的。關于這個問題，我曾經在開發過程中遇到過，但是查了一下網上幾乎沒有相關的介紹。後來我自己做了一次試驗，分别采用ajax和傳統的form送出的模式來删除一條資料……給我們的調試帶來了很大的困難。

5、另外，像其他方面的一些問題，比如說違背了url和資源定位的初衷。例如，我給你一個url位址，如果采用了ajax技術，也許你在該url位址下面看到的和我在這個url位址下看到的内容是不同的。這個和資源定位的初衷是相背離的。

6、一些手持裝置（如手機、pda等）現在還不能很好的支援ajax，比如說我們在手機的浏覽器上打開采用ajax技術的網站時，它目前是不支援的，當然，這個問題和我們沒太多關系。

注：”二、同步、異步傳輸的差別“、”三、ajax所包含的技術“和”五、ajax 的缺點“主要來自于文章： 

<a href="http://www.cnblogs.com/mingmingruyuedlut/archive/2011/10/18/2216553.html">http://www.cnblogs.com/mingmingruyuedlut/archive/2011/10/18/2216553.html</a>