ajax_search.js

ajax 入门小例. 实现仿 google 自动提示.

// =======================================
//   Function Name:getXmlHttpRequestObject()
//   Function:     Creat XMLHTTPRequest Object
// ======================================= 

function getXmlHttpRequestObject() {
	if (window.XMLHttpRequest) {//firefox opera
		return new XMLHttpRequest();
	} else {
		if (window.ActiveXObject) {//ie
			return new ActiveXObject("Microsoft.XMLHTTP");
		} else {
			alert("your brosower can't support XMLHTTP");
		}
	}
}
var searchReq = getXmlHttpRequestObject();
function searchSuggest() {
	var str = escape(document.getElementById("txtSearch").value);
	searchReq.open("GET", "searchSuggestServelt?searchStr=" + str, true);
	searchReq.onreadystatechange = handleSearchSuggest;
	
	searchReq.send(null);
}
//更新界面 
function handleSearchSuggest() {
	if (searchReq.readyState == 4) {
		if (searchReq.status == 200) {
			var ss = document.getElementById("search_suggest");
			var result = searchReq.responseXML;
			var nodes = result.getElementsByTagName("title");
			ss.innerHTML = "";
			for (i = 0; i < nodes.length; i++) {
				var suggest = "<div onmouseover =\"javascript:suggestOver(this);\"";
				suggest += "onmouseout = \"javascript:suggestOut(this)\"";
				suggest += "onclick = \"javascript:setSearch(this.innerText)\">";
				suggest += nodes[i].childNodes[0].nodeValue + "</div>";
				ss.innerHTML += suggest;
			}
		}
	}
}
//on mouse over
function suggestOver(div_value) {
	div_value.className = "suggest_link_over ";
}
//on mouse out
function suggestOut(div_value) {
	div_value.className = "suggest_link";
}
//mouse click
function setSearch(value) {
	document.getElementById("txtSearch").value = value;
	document.getElementById("search_suggest").innerHTML = "";
}