本文實例講述了基于ajax的簡單搜索實現方法。，具體如下：

這里使用兩個.aspx文件，一個叫Default.aspx,一個叫AjaxOperations.aspx,第一個用來輸入搜索數據，后一個用來對搜索關鍵字進行處理。js文件夾下面還有一個testJs.js的文件，它就是ajax操作的核心部分。不錯，code is cheap。看代碼：

testJs.js

// 此函數等價于document.getElementById /document.allfunction $(s) { if (document.getElementById) { return eval('document.getElementById("' + s + '")'); } else { return eval('document.all.' + s); } }// 創建 XMLHttpRequest對象，以發送ajax請求 function createXMLHTTP() { var xmlHttp = false; var arrSignatures = ["MSXML2.XMLHTTP.5.0", "MSXML2.XMLHTTP.4.0",       "MSXML2.XMLHTTP.3.0", "MSXML2.XMLHTTP",       "Microsoft.XMLHTTP"]; for (var i = 0; i < arrSignatures.length; i++) {  try {   xmlHttp = new ActiveXObject(arrSignatures[i]);   return xmlHttp;  }  catch (oError) {   xmlHttp = false; //ignore  } } // throw new Error("MSXML is not installed on your system.");  if (!xmlHttp && typeof XMLHttpRequest != 'undefined') {  xmlHttp = new XMLHttpRequest(); } return xmlHttp;}function addAjaxSearch() { inputField = $("txtSearch"); completeTable = $("suggestTb"); completeDiv = $("popup"); completeBody = $("suggestBody"); var tempStr = inputField.value; // alert(tempStr); var keyWord = encodeURI(tempStr); if (tempStr == "")  return; var xmlReq = createXMLHTTP(); xmlReq.open("post", "AjaxOperations.aspx?searchKeyword=" + keyWord, true); xmlReq.onreadystatechange = function() {  if (xmlReq.readyState == 4) {   if (xmlReq.status == 200) {    //xmlReq.responseText為輸出的那段字符串    setNames(xmlReq.responseText);   }   else {    alert("Connect the server failed!");   }  } } xmlReq.send(null);}// 設置div中的表格數據function setNames(names) { if (names == "") {  clearNames();  return; } clearNames(); // 清空div中已有的的表格數據 setOffsets(); // 設置div到合適的位置 var row, cell, txtNode; var s = names.split("#"); for (var i = 0; i < s.length; i++) { // 顯示類似search下拉選擇項  var nextNode = s[i];  row = document.createElement("tr");  cell = document.createElement("td");  cell.onmouseout = function() { this.style.backgroundColor = ''; };  cell.onmouseover = function() { this.style.backgroundColor = '#E8F2FE'; };  cell.onclick = function() { completeField(this); }; // 搜索框設置為選擇的數據  cell.pop = "T";  txtNode = document.createTextNode(nextNode);  cell.appendChild(txtNode);  row.appendChild(cell);  $("suggestBody").appendChild(row); }}// 清空div中已有的的表格數據function clearNames() { completeBody = $("suggestBody"); var ind = completeBody.childNodes.length; for (var i = ind - 1; i >= 0; i--) {  completeBody.removeChild(completeBody.childNodes[i]); } completeDiv = $("popup"); completeDiv.style.border = "none";}// 設置div到合適的位置function setOffsets() { completeTable.style.width = inputField.offsetWidth; +"px"; var left = calculateOffset(inputField, "offsetLeft"); var top = calculateOffset(inputField, "offsetTop") + inputField.offsetHeight; completeDiv.style.border = "black 1px solid"; completeDiv.style.left = left + "px"; completeDiv.style.top = top + "px";}function calculateOffset(field, attr) { var offset = 0; while (field) {  offset += field[attr];  field = field.offsetParent; } return offset;}// 搜索框設置為選擇的數據function completeField(cell) { inputField.value = cell.firstChild.nodeValue; // 搜索框設置為選擇的數據 clearNames(); //清空div中已有的的表格數據}//用來設置當鼠標失去焦點后文本框的隱藏document.onmousedown = function() { if (!event.srcElement.pop)  clearNames();} //填寫輸入框