Ajax全面剖析XMLHttpRequest對象(三)

四、 發送請求

　　在AJAX中，許多使用XMLHttpRequest的請求都是從一個HTML事件（例如一個調用JavaScript函數的按鈕點選(onclick)或一個按鍵(onkeypress)）中被初始化的。AJAX支援包括表單校驗在内的各種應用程式。有時，在填充表單的其它内容之前要求校驗一個唯一的表單域。例如要求使用一個唯一的UserID來系統資料庫單。如果不是使用AJAX技術來校驗這個UserID域，那麼整個表單都必須被填充和送出。如果該UserID不是有效的，這個表單必須被重新送出。例如，一個相應于一個要求必須在伺服器端進行校驗的Catalog ID的表單域可能按下列形式指定：

＜form name="validationForm" action="validateForm" method="post"＞

＜table＞

　＜tr＞＜td＞Catalog Id:＜/td＞

　　＜td＞

　　　＜input type="text" size="20" id="catalogId" name="catalogId" autocomplete="off" οnkeyup="sendRequest()"＞

　　＜/td＞

　　＜td＞＜div id="validationMessage"＞＜/div＞＜/td＞

　＜/tr＞

＜/table＞＜/form＞

　　前面的HTML使用validationMessage div來顯示相應于這個輸入域Catalog Id的一個校驗消息。onkeyup事件調用一個JavaScript sendRequest()函數。這個sendRequest()函數建立一個XMLHttpRequest對象。建立一個XMLHttpRequest對象的過程因浏覽器實作的不同而有所差別。如果浏覽器支援XMLHttpRequest對象作為一個視窗屬性(所有普通的浏覽器都是這樣的，除了IE 5和IE 6之外)，那麼，代碼可以調用XMLHttpRequest的構造器。如果浏覽器把XMLHttpRequest對象實作為一個ActiveXObject對象(就象在IE 5和IE 6中一樣)，那麼，代碼可以使用ActiveXObject的構造器。下面的函數将調用一個init()函數，它負責檢查并決定要使用的适當的建立方法-在建立和傳回對象之前。

＜script type="text/javascript"＞

function sendRequest(){

　var xmlHttpReq=init();

　function init(){

　　if (window.XMLHttpRequest) {

　　　return new XMLHttpRequest();

　　}

　else if (window.ActiveXObject) {

　　return new ActiveXObject("Microsoft.XMLHTTP");

　}

}

＜/script＞

　　接下來，你需要使用Open()方法初始化XMLHttpRequest對象-指定HTTP方法和要使用的伺服器URL。

var catalogId=encodeURIComponent(document.getElementById("catalogId").value);

xmlHttpReq.open("GET"， "validateForm?catalogId=" + catalogId， true);

　　預設情況下，使用XMLHttpRequest發送的HTTP請求是異步進行的，但是你可以顯式地把async參數設定為true，如上面所展示的。

在這種情況下，對URL validateForm的調用将激活伺服器端的一個servlet，但是你應該能夠注意到伺服器端技術不是根本性的；實際上，該URL可能是一個ASP，ASP.NET或PHP頁面或一個Web服務-這無關緊要，隻要該頁面能夠傳回一個響應-訓示CatalogID值是否是有效的-即可。因為你在作一個異步調用，是以你需要注冊一個XMLHttpRequest對象将調用的回調事件處理器-當它的readyState值改變時調用。記住，readyState值的改變将會激發一個readystatechange事件。你可以使用onreadystatechange屬性來注冊該回調事件處理器。

xmlHttpReq.onreadystatechange=processRequest;

　　然後，我們需要使用send()方法發送該請求。因為這個請求使用的是HTTP GET方法，是以，你可以在不指定參數或使用null參數的情況下調用send()方法。

xmlHttpReq.send(null);