ajax 非同步資料操作詳解(1/3)

ajax 非同步資料操作詳解

AJAX全稱為“Asynchronous JavaScript and XML”（非同步JavaScript和XML），是指一種建立互動式網頁應用的網頁開發技術。

主要包含了以下幾種技術：

Ajax（Asynchronous JavaScript + XML）的定義

基於web標準（standards-based presentation）XHTML+CSS的表示；

使用 DOM（Document Object Model）進行動態顯示及互動；

使用 XML 和 XSLT 進行資料交換及相關操作；

使用 XMLHttpRequest 進行非同步資料查詢、檢索；

使用 JavaScript 將所有的東西綁定在一起。英文參見Ajax的提出者Jesse James Garrett的原文a

類似於DHTML或LAMP，AJAX不是指一種單一的技術，而是有機地利用了一系列相關的技術。事實上，一些基於AJAX的“派生/合成”式（derivative/composite）的技術正在出現，如“AFLAX”。

AJAX的應用使用支援以上技術的web瀏覽器作為運行平台。這些瀏覽器目前包括：Mozilla、Firefox、Internet Explorer、Opera、Konqueror及Safari。但是Opera不支援XSL格式對象，也不支援XSLT。

與傳統的web應用比較

傳統的web應用允許使用者填寫表單(form)，當提交表單時就向web伺服器發送一個請求。伺服器接收並處理傳來的表單，然後返回一個新的網頁。這個做法浪費了許多頻寬，因為在前後兩個頁面中的大部分HTML代碼往往是相同的。由於每次應用的互動都需要向伺服器發送請求，應用的回應時間就依賴於伺服器的回應時間。這導致了使用者介面的響應比本地應用慢得多。

與此不同，AJAX應用可以僅向伺服器發送並取回必需的資料，它使用SOAP或其它一些基於XML的web service介面，並在用戶端採用JavaScript處理來自伺服器的響應。因為在伺服器和瀏覽器之間交換的資料大量減少，結果我們就能看到響應更快的應用。同時很多的處理工作可以在發出請求的用戶端機器上完成，所以Web伺服器的處理時間也減少了。

Ajax應用程式的優勢在於：

1. 通過非同步模式，提升了使用者體驗

2. 最佳化了瀏覽器和伺服器之間的傳輸，減少不必要的資料往返，減少了頻寬佔用

3. Ajax引擎在用戶端運行，承擔了一部分本來由伺服器承擔的工作，從而減少了大使用者量下的伺服器負載。

Ajax的工作原理

Ajax的核心是JavaScript對象XmlHttpRequest。該對象在Internet Explorer 5中首次引入，它是一種支援非同步請求的技術。簡而言之，XmlHttpRequest使您可以使用JavaScript向伺服器提出請求並處理響應，而不阻塞使用者。

在建立Web網站時，在用戶端執行螢幕更新為使用者提供了很大的靈活性。下面是使用Ajax可以完成的功能：

      動態更新購物車的物品總數，無需使用者單擊Update並等待伺服器重新發送整個頁面。

      提升網站的效能，這是通過減少從伺服器下載的資料量而實現的。例如，在某購物車頁面，當更新籃子中的一項物品的數量時，會重新載入整個頁面，這必須下載整個頁面的資料。如果使用Ajax計算新的總量，伺服器只會返回新的總量值，因此所需的頻寬僅為原來的百分之一。 消除了每次使用者輸入時的頁面重新整理。例如，在Ajax中，如果使用者在分頁列表上單擊Next，則伺服器資料只重新整理列表而不是整個頁面。
直接編輯表格式資料，而不是要求使用者導航到新的頁面來編輯資料。對於Ajax，當使用者單擊Edit時，可以將靜態表格重新整理為內容可編輯的表格。使用者單擊Done之後，就可以發出一個Ajax請求來補救伺服器，並重新整理表格，使其包含靜態、唯讀資料。

一切皆有可能！但願它能夠激發您開始開發自己的基於Ajax的網站。然而，在開始之前，讓我們介紹一個現有的Web網站，它遵循傳統的提交/等待/重新顯示的範例，我們還將討論Ajax如何提升使用者體驗。

Ajax的工作原理相當於在使用者和伺服器之間加了—個中介層，使使用者操作與伺服器響應非同步化。這樣把以前的一些伺服器負擔的工作轉嫁到用戶端，利於用戶端閑置的處理能力來處理，減輕伺服器和頻寬的負擔，從而達到節約ISP的空間及頻寬租用成本的目的。

我們以兩個驗證通行證帳號是否存在的例子來講述AJAX在實際中的應用：

(1)用文本字串的方式返回伺服器的響應來驗證網易通行證帳號是否存在；

(2)以XMLDocument對象方式返迴響應來驗證金山通行證帳號是否存在；

首先，我們需要用JavaScript來建立XMLHttpRequest 類向伺服器發送一個HTTP請求， XMLHttpRequest 類首先由Internet Explorer以ActiveX對象引入，被稱為XMLHTTP。 後來Mozilla?Netscape?Safari 和其他瀏覽器也提供了XMLHttpRequest類，不過它們建立XMLHttpRequest類的方法不同。

對於Internet Explorer瀏覽器，建立XMLHttpRequest 方法如下：

xmlhttp_request = new ActiveXObject("Msxml2.XMLHTTP.3.0"); //3.0或4.0, 5.0 xmlhttp_request = new ActiveXObject("Msxml2.XMLHTTP"); xmlhttp_request = new ActiveXObject("Microsoft.XMLHTTP"); 

首頁 1 2 3 末頁