海外邮件中继，海外退信中继，美国高速VPS，不限流量VPN，邮局维护和管理，邮件网关，EMOS邮件中继，POSTFIX邮件中继，Winwebmail邮件中继,Winmail邮件中继,DBMail邮件中继,JDMail邮件中继,Exchange邮件中继,MDaemon邮件中继 淘宝店：http://shantan.taobao.com 云邮科技官网：www.yunrelay.com

【字体设置：大 中 小】
目前博客非常流行，相信应该上网时间稍微长点的朋友都会在这或在那的有一个自己的博客。对于一些有一定能力的朋友，可能更喜欢自己去下载一个博客程式来架设一个自己的博客，而不是使用一些博客网站提供的服务。而大部分博客程式所带的搜索功能是提交查询关键字到搜索页面，然后在后台生成搜索结果，再呈现给用户，这过程之中浪费了一些带宽，如博客的侧边栏。要节约这一些带宽，我们能用AJAX来打造自己的无刷新日志搜索。

在本篇教程中，数据库的表名和日志查看页面以L-Blog为例，因为我的博客程式是从L-Blog修改而来。

本教程中的例子已通过实际测试，能直接在L-Blog或FBS中使用。当然，要真正应用的话还是需要做一些美化及完善的。

在数据库中日志内容数据表名为blog_Content，其中日志ID为log_ID，日志标题为log_Title，日志查看页面为blogview.asp，参数为日志logID。有了这些资料，就能开始创建搜索结果的XML文件模板了。在显示搜索结果时，需要显示日志的标题，及日志的ID来创建到查看日志的链接。

搜索结果模板sample.xml

CODE:
<?xml version="1.0" encoding="utf-8"?>
<blogsearch>
    <!-- 每一个reslut就是个搜索结果 -->
    <result>
        <!-- 日志的ID -->
        <logid>1</logid>
        <!-- 日志的标题 -->
        <logtitle>AJAX初体验之上手篇</logtitle>
    </result>
</blogsearch>

每个result就是个搜索结果，为了处理没有找到相关内容的情况，我定义了当搜索结果为空时logid为#。
在完成XML文件模板之后，就能用ASP来动态生成搜索结果需要的XML文件了。搜索的关键字采用POST方式来传递。

搜索结果输出ajaxsearch.asp

CODE:
<!-- #include file="commond.asp" -->
<!-- #include file="include/function.asp" -->
<%
’ commond.asp为数据库连接文件
’ function.asp中有要用到的函数CheckStr
Dim Search_Word,XML_Result,rsSearch,sqlSearch
Set rsSearch=Server.CreateObject("ADODB.RecordSet")
’ 获取搜索关键字
Search_Word=CheckStr(Trim(Request.Form("searchword")))
’ XML文件头
XML_Result="<?xml version=""1.0"" encoding=""utf-8""?><blogsearch>"
IF Search_Word<>Empty Then
    ’ 创建查询SQL语句
    sqlSearch="SELECT log_ID,log_Title,log_Content FROM blog_Content WHERE log_Title LIKE ’%"&Search_Word&"%’ AND log_IsShow=True ORDER BY log_ID DESC"　
    ’ 打开记录集
    rsSearch.open sqlSearch,Conn,1,1
    ’ 如果没有搜索结果就产生一个结果，logid为#，标志着没有搜索结果
    IF rsSearch.BOF AND rsSearch.EOF Then XML_Result=XML_Result&"<result><logid>#</logid><logtitle /></result>"　
    ’ 循环输出搜索结果
    Do While Not rsSearch.EOF
        ’ 循环输出每一个结果
        XML_Result=XML_Result&"<result><logid>"&rsSearch("log_ID")&"</logid><logtitle><![CDATA["&rsSearch("log_Title")&"]]></logtitle></result>"　  
        rsSearch.MoveNext
    Loop
Else
    ’ 关键字为空，则返回无搜索结果
    XML_Result=XML_Result&"<result><logid>#</logid><logtitle /></result>"
End IF
XML_Result=XML_Result&"</blogsearch>"
’ 设置MIME Type为XML文件
Response.ContentType = "application/xml"
’Response.CharSet = "utf-8"
’ 输出搜索结果
Response.Write(XML_Result)
%>

有了后台搜索结果输出的部分，就能开始写前台搜索的部分了。
首先需要的是给用户输入搜索关键字及显示搜索结果的地方，我用div来分别显示这两个部分：

ajaxsearch.htm

CODE:
<!-- 要用到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稍有接触应该都看得懂这段代码，前篇教程中也有周详注释：

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这样的方法

发表评论 - 不要忘了输入验证码哦！
作者：	用户：  密码：  我要注册 验证码：  为防止广告注册机程序,验证码不会自动显示,请点击此处显示或者(刷新)验证码!
评论： 禁止表情 禁止UBB 禁止图片 识别链接 识别关键字 确定发布？	最多可以输入200个字,目前你已经输入了0个字;你今日还可以发表10条评论!