AJAX 블 로그 만 들 기 리 셋 없 음 검색

만약 당신 이 AJAX 에 대해 잘 모른다 면,먼저 이 강 좌 를 볼 수 있 습 니 다.<AJAX 초 체험 의 상편>.
현재 블 로그 가 유행 하고 있 습 니 다.인터넷 에 접속 해 야 할 시간 이 좀 긴 친구 들 은 모두 이곳 이나 그곳 에 자신의 블 로 그 를 가지 고 있 을 것 이 라 고 믿 습 니 다.일부 능력 이 있 는 친구 들 은 일부 블 로그 사이트 에서 제공 하 는 서 비 스 를 사용 하 는 것 이 아니 라 블 로그 프로그램 을 다운로드 하여 자신의 블 로 그 를 만 드 는 것 을 더 좋아 할 것 이다.대부분의 블 로그 프로그램 이 가지 고 있 는 검색 기능 은 검색 페이지 에 검색 키 워드 를 제출 한 다음 에 배경 에서 검색 결 과 를 생 성하 여 사용자 에 게 보 여 주 는 것 이다.이 과정 에서 블 로그 의 사 이 드 바 와 같은 대역 폭 을 낭비 했다.이 대역 폭 을 절약 하려 면 AJAX 로 리 셋 없 는 로그 검색 을 만 들 수 있 습 니 다.
이 튜 토리 얼 에서 데이터베이스 의 표 이름과 로그 조회 페이지 는 L-Blog 를 예 로 들 면 제 블 로그 프로그램 은 L-Blog 에서 수정 되 었 기 때 문 입 니 다.
본 튜 토리 얼 의 예 는 이미 실제 테스트 를 통 해 L-Blog 나 FBS 에서 직접 사용 할 수 있 습 니 다.물론 진정 으로 응용 하려 면 미화 와 보완 이 필요 하 다.
데이터베이스 에 로그 내용 데이터 시트 이름 은 blogContent,로그 ID 는 logID,로그 제목 은 logTitle,로그 보기 페이지 는 blogwiew.asp 이 고 매개 변 수 는 로그 logID 입 니 다.이 자료 들 이 있 으 면 검색 결과 의 XML 문서 템 플 릿 을 만 들 수 있 습 니 다.검색 결 과 를 표시 할 때 로그 의 제목 과 로그 의 ID 를 표시 하여 로 그 를 볼 수 있 는 링크 를 만들어 야 합 니 다.
검색 결과 템 플 릿 sample.xml

<?xml version="1.0" encoding="utf-8"?>
<blogsearch>
    <!--    reslut         -->
    <result>
        <!--    ID -->
        <logid>1</logid>
        <!--       -->
        <logtitle>AJAX       </logtitle>
    </result>
</blogsearch>

모든 result 는 하나의 검색 결과 입 니 다.관련 내용 을 찾 지 못 한 상황 을 처리 하기 위해 검색 결과 가 비어 있 을 때 logid 를\#로 정의 합 니 다.XML 문서 템 플 릿 을 완성 하면 검색 결과 에 필요 한 XML 문 서 를 ASP 로 동적 으로 생 성 할 수 있 습 니 다.검색 키 워드 는 POST 방식 으로 전 달 됩 니 다.
검색 결과 출력 ajax search.asp

<!-- #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

<!--    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>

사용자 의 입력 과 결과 출력 부분 을 완성 하면 마지막 부분 인 클 라 이언 트 프로그램 을 쓰기 시작 할 수 있 습 니 다.먼저 XML HttpRequest 대상 을 만 듭 니 다.이 부분 코드 는 더 이상 말 하지 않 습 니 다.AJAX 에 조금 만 접촉 하면 이 코드 를 알 수 있 을 것 입 니 다.전편 튜 토리 얼 에 도 상세 한 설명 이 있 습 니 다.
ajaxsearch.js(part1)

 
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)

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)

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 인 코딩 을 사용 하면 많은 고민 을 덜 수 있다.

검색 결 과 를 가 져 올 때 getElement sByTagName 을 사용 하여 집합 을 되 돌려 주기 때문에 결과 뒤에 아래 표 시 를 추가 해 야 합 니 다.예 를 들 어:    results[0].getElementsByTagName("logid")[0].firstChild.data

document.getElement ById()를 사용 하여 대상 을 가 져 오 는 것 을 권장 합 니 다.document.all 같은 방법

을 사용 하지 마 십시오.
인 스 턴 스 의 세 파일 압축 다운로드:ajaxsearch.rar