瞭解基礎Ajax

標籤：style   http   color   使用   java   strong   for   資料   2014   

ajax 的全稱是Asynchronous JavaScript and XML，其中，Asynchronous 是非同步意思，它有別於傳統web開發中採用的同步的方式。

例圖：Ajax工作原理圖與web工作原理圖

1、關於同步和非同步

同步需要等待返回結果才能繼續，非同步不必等待，一般需要監聽非同步結果同步是在一條直線上的隊列，非同步不在一個隊列上 各走各的；

摘資料：

非同步傳輸是面向字元的傳輸，它的單位是字元；而同步傳輸是面向位元的傳輸，它的單位是楨，它傳輸的時候要求接受方和發送方的時鐘是保持一致的。

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

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

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

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

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

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

2、ajax所包含的技術

   1.使用CSS和XHTML來表示。

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

   3.使用XMLHttpRequest來和伺服器進行非同步通訊。

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

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

3、ajax原理和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擷取完整的回應資料

4、ajax的優點

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

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

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

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

    4、基於標準化的並被廣泛支援的技術，不需要下載外掛程式或者小程式。

5、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