AJAX 初探

之前用過一次AJAX，太久忘光了，最近找工作拿起來複習一下。AJAX的英文全程爲Asynchronous JavaScript and XML，即異步的javascript 和 xml 結合。這種技術已經用了很多年，舉一個例子就是註冊用戶名時，用ajax技術去訪問後臺數據庫，查看用戶名是否已被註冊，然後在文本框後面或者下面給出提示，少去了跳轉頁面的步驟，增加了交互性。在此我們就可以用這個例子來練練手：
在用戶名屬性哪裏設置

onblur = "validate()"

,即當用戶名的文本框失去焦點時觸發這個事件。
接下來就用js來實現validate()函數：

 <script type="text/javascript">
	var req;
	function validate() {
		var idField = document.getElementById("userid");//取得文本框裏用戶名

		var url = "validate.jsp?id=" + escape(idField.value);//設置待會跳轉的URL，並把用戶名傳進過去
		//alert(url);
		if(window.XMLHttpRequest) { //判斷是否爲IE7+, Firefox, Chrome, Opera, Safari瀏覽器
			req = new XMLHttpRequest()//瀏覽器內部的對象-XMLHttpRequest-用來實現發送和接收HTTP請求與響應信息
		} else if (window.ActiveXObject) {//ie5， ie6
			req = new ActiveXObject("Microsoft.XMLHTTP");
		}
		req.open("GET", url, true);//用get方式打開剛纔設置的url,true設置爲異步
		req.onreadystatechange = callback; //req調完open後，readystate的值爲1，當state的狀態改調用callback()
		req.send(null);
	}

	function callback() {
		if(req.readyState == 4) { //readystate爲4表示已把xml數據加載完畢
			if(req.status == 200) { //http協議中server反饋給客戶端時，status=200表示正常，404表示不正常
				//alert(req.responseText);
				var msg = req.responseXML.getElementsByTagName("msg")[0];//接收標籤爲msg的內容
				//alert(msg);
		        setMsg(msg.childNodes[0].nodeValue);//調用setmsg函數
			}
		}
	}

	function setMsg(msg) {

		mdiv = document.getElementById("usermsg");

		if(msg == "invalid") {
			mdiv.innerHTML = "<font color='red'>用戶名已經存在</font>";//判斷xml中傳來的數據，如果用戶名已被註冊，既提示“用戶名已存在”
		} else {
			mdiv.innerHTML = "<font color='green'>恭喜你，此用戶名可以註冊！</font>";//否則提示可以註冊
		}
	}


</script>

XM裏面的部分內容：

   <%@page import="com.User" pageEncoding="ISO-8859-1"%>

<%

	response.setContentType("text/xml");
	response.setHeader("Cache-Control", "no-store"); //HTTP1.1
	response.setHeader("Pragma", "no-cache"); //HTTP1.0
	response.setDateHeader("Expires", 0); //prevents catching at proxy server
	//前面四句是設置返回的頭文件名

	//下面是到後臺查數據庫，然後用<msg>標籤返回不同的結果
	String name = request.getParameter("id");
	//System.out.println(name);
	if(name != null && !name.trim().equals("")) {
		boolean isExist = User.idExist(name);

		if(isExist) {
			response.getWriter().write("<msg>invalid</msg>");
		} else {
			response.getWriter().write("<msg>valid</msg>");
		}
	}

%>

這就是一個簡單的Ajax例子。