AJAX初体验之实战篇——打造博客无刷新搜索

function AjaxSearch() {
 var searchword;
 searchword=escape(document.getElementById("searchword").value);
 if(searchword=="") {
  document.getElementById("search_result").innerHTML="<ul><li>请输入关键字!</li></ul>";
  return;
 }
 document.getElementById("search_result").innerHTML="<ul><li>正在加载，请稍候</li></ul>";
 xmlObj.open ("POST", "ajaxsearch.asp", true);
 xmlObj.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
 xmlObj.onreadystatechange=function() {
  if(xmlObj.readyState==4) {
   if(xmlObj.status==200) {
    xmlResult=xmlObj.responseXML;
    AjaxShowResult();
   }
  }
 }
 xmlObj.send("searchword="+searchword);
}

function AjaxShowResult() {
 var results,i,strTemp;
 results=xmlResult.getElementsByTagName("result");
 strTemp="<ul>";
 if(results[0].getElementsByTagName("logid")[0].firstChild.data=="#")
  strTemp=strTemp+"<li>无搜索结果</li>";
 else
  for(i=0;i<results.length;i++)
   strTemp = strTemp + "<li><a href=''blogview.asp?logID=" + results[i].getElementsByTagName("logid")[0].firstChild.data + "''>" + results[i].getElementsByTagName("logtitle")[0].firstChild.data + "</a></li>";
 strTemp=strTemp+"</ul>";
 document.getElementById("search_result").innerHTML = strTemp
}

至此，一个完整的AJAX实例完成了。

几个经验：

1. 页面使用UTF-8编码，这样可以省却很多烦恼

2. 在获取搜索结果时，因为用的getElementsByTagName，返回的是一个集合，所以要在结果之后加上下标，如例子中的：

    results[i].getElementsByTagName("logid")[0].firstChild.data

3. 建议使用document.getElementById()来获取对象，而不要使用document.all这样的方法

参考资料：

1. 《AJAX初体验之上手篇》

2. 发布三个ajax相关的函数，包括无刷新提交表单等

实例中的三个文件打包下载