AJAX技術入門 第一節 走進AJAX

1.走進 AJAX

(1)使用XHTML和CSS的基於標準的表示技術

(2)使用DOM進行動態顯示和互動

(3)使用XML和XSLT進行資料交換和處理

(4)使用XMLHttpRequest進行非同步資料檢索

(5)使用Javascript將以上技術融合在一起

 

2.AJAX 優點

(1)改善表單驗證方式，不再需要開啟新頁面，也不再需要將整個頁面資料提交

(2)不需重新整理頁面就可改變頁面內容，減少使用者等待時間 。

(3)按需擷取資料，每次只從伺服器端擷取需要的資料 。

(4)讀取外部資料，進行資料處理整合 。

(5)非同步與伺服器進行互動，在互動過程中使用者無需等待，仍可繼續操作

 

3.AJAX 思維方式

最簡單的例子需求如下：使用者在頁面的文字框中輸入想註冊的使用者名稱，然後點擊校正按鈕，如果輸入的使用者名稱為“wangxingkui”，

則提示使用者名稱已經存在，請重新輸入，否則提示使用者名稱尚未存在，可以使用此使用者名稱進行註冊。

傳統方式：對於校正使用者名稱的需求，我們需要一個html頁面和一個servlet程式。Html頁面中包含文字框和提交按鈕，他們位於一個form表單中，

這個表單將請求提交給servlet程式，servlet程式判斷當前的使用者名稱是否是“wangxingkui”，並給出相應的提示，同時servlet中還產生一個連結，用於返回html頁面。

從這個例子我們可以看到，傳統Web開發思維模式的一個特點是通過form表單提交請求資訊，然後轉向一個新的頁面處理請求，並顯示伺服器端返回的資訊。

你可以嘗試運行一下這些代碼，你會發現作為使用者的你經曆了：在瀏覽器中輸入使用者名稱->點擊按鈕提交使用者名稱給Servlet->瀏覽器轉向Servlet的頁面

->等待Servlet處理->Servlet返迴響應資訊->瀏覽器中看到Servlet頁面的響應資訊，當然這其中有幾個過程可能時間短暫到你沒有注意，但這些過程是確實存在。

圖示：

 

AJAX方式：對於校正使用者名稱的需求，我們需要一個html頁面和一個servlet程式。

Html頁面中包含文字框和校正按鈕，點擊提交按鈕以後，我需要通過javascript擷取文字框中的資料，然後通過XMLHttprequest發送資料給servlet，

此外還需要準備用於接收響應的javascript函數，接收到servlet的提示資訊後，我需要將這些資訊動態寫在頁面上。

servlet程式判斷當前的使用者名稱是否是“wangxingkui”，並給出相應的提示。

注意，AJAX模式下問題分析的方式已經發生了變化：

servlet不需要返回html頁面的連結了，因為我們不需要跳轉到servlet表示的頁面中，我們只需要獲得servlet頁面產生的結果

html頁面中我不用表單提交資料了，我的資料通過javascript來擷取，然後通過一個叫做XMLHttprequest的對象發送個servlet。而且我沒有做頁面跳轉

我需要一個接收servlet響應資訊的javascript函數，我沒有進入servelt代表的頁面查看響應資訊，而是把servlet的響應資訊接收回來，再顯示在我當前的頁面上。

圖示：

 

對比：

 

4. AJAX 和 傳統的Web開發的不同之處