完成了用户输入及结果输出的部分,就可以开始写最后的部分——客户端程序了。 首先是创建XMLHttpRequest对象,这部分代码不再多说,对AJAX稍有接触应该都看得懂这段代码,前篇教程中也有详细注释:
ajaxsearch.js(part1)
CODE: 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!"); }
接下来是发送搜索请求部分:
ajaxsearch.js(part2)
CODE: function AjaxSearch() { var searchword; // 获取搜索关键字,并且进行URLEncode 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>"; // 打开一个连接,采用POST xmlObj.open ("POST", "ajaxsearch.asp", true); // 设置请求头,表单内容格式为URLEncoded xmlObj.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); // 设置完成请求后响应函数 xmlObj.onreadystatechange=function() { // 完成响应 if(xmlObj.readyState==4) { // 状态正常 if(xmlObj.status==200) { // 设置xmlResult为搜索结果XML文档 xmlResult=xmlObj.responseXML; // 调用AjaxShowResult()显示搜索结果 AjaxShowResult(); } } } // 发送请求,内容为搜索的关键字 xmlObj.send("searchword="+searchword); }
最后是搜索结果的显示:
ajaxsearch.js(part3)
CODE: 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实例完成了。
几个经验:
- 页面使用UTF-8编码,这样可以省却很多烦恼
- 在获取搜索结果时,因为用的getElementsByTagName,返回的是一个集合,所以要在结果之后加上下标,如例子中的:
results[0].getElementsByTagName("logid")[0].firstChild.data
- 建议使用document.getElementById()来获取对象,而不要使用document.all这样的方法
实例中三个文件打包下载:ajaxsearch.rar
经典论坛讨论: http://bbs.blueidea.com/thread-2661871-1-1.html
出处:蓝色理想
责任编辑:moby
上一页 AJAX打造博客无刷新搜索 [1] 下一页
◎进入论坛网络编程版块参加讨论
|