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>
검색 결과 출력 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)
%>
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>
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
}
몇 가지 경험 치:
인 스 턴 스 의 세 파일 압축 다운로드:ajaxsearch.rar
좋은 웹페이지 즐겨찾기
