DIV CSS 佈局教程網

做一個表單驗證裡面最簡單的例子，檢查用戶名是否存在，使用AJax完成表單驗證的正常步驟應該是：

1. 客戶端收集表單信息。
2. 使用XMLHttpRequest對象提交到服務器。
3. 服務器完成驗證的邏輯，返回結果信息。
4. 浏覽器端根據服務器返回的信息對用戶做出一定的提示。

不過由於我的空間不支持任何服務器段語言，所以把本應在服務器的邏輯搬到了浏覽器，由JavaScript來做，服務器只負責提供一個用戶名的列表。最後的效果如下，試著輸入test，cainiao8這些用戶名，都會顯示已注冊。

JavaScript代碼分析

首先，當文檔載入完畢的時候，給表格設置change事件的響應函數AJaxValidate，代碼如下：

addEventSimple(window,'load',function(){
	var test = document.getElementById('username');
	addEventSimple(test,'change',AJaxValidate);
});

這樣，當用戶名文本框內的值改變之後，就會調用AJaxValidate函數，其代碼如下：

function AJaxValidate(){
	var options = {
		url:'ajax/AJaxUsernames.XML',
		listener:callback,
		method:'GET'
	}
	var request = createRequest(options);
	request.send(null);
}

它會使用之前介紹的createRequest函數初始化一個XMLHttpRequest對象，並且將它發送到服務器，請求AJaxUsernames.XML文件。

最後就是callback函數了：

function callback(){
	var xmlDoc = this.responseXML;
	var root = XMLDoc.getElementsByTagName('root')[0];
	var nodes = root.getElementsByTagName("username");
	var currentNode = null;
	var username = document.getElementById('username').value;
	for(var i = 0; i < nodes.length; i++) {
		currentNode = nodes[i];
		if(username == currentNode.childNodes[0].nodeValue){
			document.getElementById('test').innerHtml 
= '對不起!'+username+'已經被注冊。';
			return;
		}
	}
	document.getElementById('test').innerHtml = '用戶名' + username +'可以使用!';
}

callback函數在已經存在的用戶名搜索當前用戶輸入的名字，判斷是否已經存在。