AJax 世界中的請求/響應
現在我們介紹了 AJax,對XMLHttpRequest對象以及如何創建它也有了基本的了解。如果閱讀得很仔細,您可能已經知道與服務器上的 Web 應用程序打交道的是 JavaScript 技術,而不是直接提交給那個應用程序的 Html 表單。
還缺少什麼呢?到底如何使用XMLHttpRequest。因為這段代碼非常重要,您編寫的每個 Ajax 應用程序都要以某種形式使用它,先看看 AJax 的基本請求/響應模型是什麼樣吧。
發出請求
您已經有了一個嶄新的XMLHttpRequest對象,現在讓它干點活兒吧。首先需要一個 Web 頁面能夠調用的 JavaScript 方法(比如當用戶輸入文本或者從菜單中選擇一項時)。接下來就是在所有 AJax 應用程序中基本都雷同的流程:
1. 從 Web 表單中獲取需要的數據。
2. 建立要連接的 URL。
3. 打開到服務器的連接。
4. 設置服務器在完成後要運行的函數。
5. 發送請求。
清單 5 中的示例 AJax 方法就是按照這個順序組織的:
清單 5. 發出 AJax 請求
function callServer() {
// Get the city and state from the web form
var city = document.getElementById("city").value;
var state = document.getElementById("state").value;
// Only go on if there are values for both fIElds
if ((city == null) || (city == "")) return;
if ((state == null) || (state == "")) return;
// Build the URL to connect to
var url = "/scripts/getZipCode.PHP?city=" + escape(city) + "&state=" + escape(state);
// Open a connection to the server
XMLHttp.open("GET", url, true);
// Setup a function for the server to run when it's done
XMLHttp.onreadystatechange = updatePage;
// Send the request
XMLHttp.send(null);
}
其中大部分代碼意義都很明確。開始的代碼使用基本 JavaScript 代碼獲取幾個表單字段的值。然後設置一個 PHP 腳本作為鏈接的目標。要注意腳本 URL 的指定方式,city 和 state(來自表單)使用簡單的 GET 參數附加在 URL 之後。
然後打開一個連接,這是您第一次看到使用XMLHttpRequest。其中指定了連接方法(GET)和要連接的 URL。最後一個參數如果設為true,那麼將請求一個異步連接(這就是 AJax 的由來)。如果使用false,那麼代碼發出請求後將等待服務器返回的響應。如果設為true,當服務器在後台處理請求的時候用戶仍然可以使用表單(甚至調用其他 JavaScript 方法)。
xmlHttp(要記住,這是XMLHttpRequest對象實例)的onreadystatechange屬性可以告訴服務器在運行完成後(可能要用五分鐘或者五個小時)做什麼。因為代碼沒有等待服務器,必須讓服務器知道怎麼做以便您能作出響應。在這個示例中,如果服務器處理完了請求,一個特殊的名為updatePage()的方法將被觸發。
最後,使用值null調用send()。因為已經在請求 URL 中添加了要發送給服務器的數據(city 和 state),所以請求中不需要發送任何數據。這樣就發出了請求,服務器按照您的要求工作。
如果沒有發現任何新鮮的東西,您應該體會到這是多麼簡單明了!除了牢牢記住 Ajax 的異步特性外,這些內容都相當簡單。應該感激 AJax 使您能夠專心編寫漂亮的應用程序和界面,而不用擔心復雜的 HTTP 請求/響應代碼。
清單 5 中的代碼說明了 AJax 的易用性。數據是簡單的文本,可以作為請求 URL 的一部分。用 GET 而不是更復雜的 POST 發送請求。沒有 XML 和要添加的內容頭部,請求體中沒有要發送的數據;換句話說,這就是 AJax 的烏托邦。