<!-- 要用到JavaScript，外部链入 -->
<script type="text/javascript" src="ajaxsearch.js"></script>
<!-- 用户输入部分 -->
<div>
<!-- 因为没有用form，所以要处理input的keydown事件。在用户按下回车后搜索 -->
<input type="text" id="searchword" onkeydown="if(event.keyCode==13) AjaxSearch();" />
<!-- 搜索按钮 -->
<input type="button" onclick="AjaxSearch();" value="搜索" />
</div>
<!-- 搜索结果显示部分 -->
<div id="search_result">
<!-- 初始时提示用户输入搜索关键字 -->
<ul><li>请输入关键字</li></ul>
</div>
完成了用户输入及结果输出的部分，就可以开始写最后的部分——客户端程序了。
首先是创建XMLHttpRequest对象，这部分代码不再多说，对AJAX稍有接触应该都看得懂这段代码，前篇教程中也有详细注释：
复制代码 代码如下:
var xmlObj = false;
var xmlResult;
try {
xmlObj=new XMLHttpRequest;
}
catch(e) {
try {
xmlObj=new ActiveXObject("MSXML2.XMLHTTP");
}
catch(e2) {
try {
xmlObj=new ActiveXObject("Microsoft.XMLHTTP");
}
catch(e3) {
xmlObj=false;
}
}
}
if (!xmlObj) {
alert("XMLHttpRequest init Failed!");
}
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这样的方法
参考资料：