If you are not familiar with Ajax, you can take a look at this tutorial:"Ajax first experience above hand."
Now the blog is very popular, I believe that the Internet should be a little longer time friends will be here or there is a blog. For some friends who have some abilities, they may prefer to download a blog program to set up their own blog instead of using the services provided by some blog sites. And most of the blog program with the search function is to submit query keywords to the search page, and then generate search results in the background, and then presented to the user, the process of wasting some bandwidth, such as the sidebar of the blog. To conserve this bandwidth, we can use Ajax to build our own, no refresh log search.
In this tutorial, the table name and Log view page for the database is l-blog, because my blog program is modified from L-blog.
The examples in this tutorial have been tested in real life and can be used directly in L-blog or FBS. Of course, to really use the words still need to do some beautification and perfect.
The log content datasheet in the database is named Blog_content, where the log ID is log_id, the log title is Log_title, the Log View page is blogview.asp, and the parameter is log logid. With this information, you can start creating an XML document template for your search results. When you display search results, you need to display the title of the journal and the ID of the log to create a link to the view log.
Search Results Template Sample.xml
Copy Code code as follows:
<?xml version= "1.0" encoding= "Utf-8"?>
<blogsearch>
<!--every reslut is a search result-->
<result>
ID of the <!--log-->
<logid>1</logid>
< title of the!--log-->
<logtitle>ajax First Experience Hand </logtitle>
</result>
</blogsearch>
Each result is a search results, and in order to handle situations where the relevant content is not found, I define logid as # when the search results are empty.
After you complete the XML document template, you can use ASP to dynamically generate the XML documents needed for your search results. Search keywords are delivered by post.
Search Results Output ajaxsearch.asp
Copy Code code as follows:
<!--#include file= "commond.asp"-->
<!--#include file= "include/function.asp"-->
<%
' Commond.asp connect files to the database
' There are functions to be used in the function.asp checkstr
Dim Search_word,xml_result,rssearch,sqlsearch
Set rssearch=server.createobject ("ADODB. RecordSet ")
' Get search Keywords
Search_word=checkstr (Trim (Request.Form ("Searchword"))
' XML Document Header
xml_result= "<?xml version=" "1.0" "encoding=" "Utf-8" "?><blogsearch>"
IF Search_word<>empty Then
' Create a query SQL statement
Sqlsearch= "Select Log_id,log_title,log_content from Blog_content WHERE log_title like '%" &Search_Word& "%" Log_isshow=true ORDER by log_id DESC "
' Open recordset
Rssearch.open sqlsearch,conn,1,1
' If no search results produce a result, Logid is #, indicating no search results
IF Rssearch.bof and rssearch.eof Then xml_result=xml_result& "<result><logid>#</logid>< Logtitle/></result> "
' Loop output search results
Do as not rssearch.eof
' Loop output every result
xml_result=xml_result& "<result><logid>" &rssearch ("log_id") & "</logid><logtitle ><! [cdata["&rssearch" ("Log_title") & "]]></logtitle></result>"
Rssearch.movenext
Loop
Else
' keyword is empty, no search results are returned
xml_result=xml_result& "<result><logid>#</logid><logtitle/></result>"
End IF
xml_result=xml_result& "</blogsearch>"
' Set MIME type to XML document
Response.ContentType = "Application/xml"
' Response.Charset = ' utf-8 '
' Output search results
Response.Write (Xml_result)
%>
With the output of the background search results, you can start writing the part of the foreground search.
The first need is to give users input search keywords and display search results where, I use DIV to display these two parts:
Ajaxsearch.htm
Copy Code code as follows:
<!--to use JavaScript, external link to-->
<script type= "Text/javascript" src= "Ajaxsearch.js" ></script>
<!--user Input part-->
<div>
<!--the KeyDown event to process input because it is not using form. Search for--> After the user presses the carriage return
<input type= "text" id= "Searchword" onkeydown= "if (event.keycode==13) Ajaxsearch ();"/>
<!--search button-->
<input type= "button" onclick= "Ajaxsearch ();" value= "Search"/>
</div>
<!--search results show part-->
<div id= "Search_result" >
< prompts the user to enter the search keyword--> at the beginning of the!--
<ul><li> Please enter the keyword </li></ul>
</div>
Completes the user input and the result output part, can begin to write the final part--the client program.
The first is to create the XMLHttpRequest object, this part of the code no longer said that a little contact with Ajax should understand this code, the previous tutorial also has detailed comments:
Ajaxsearch.js (part1)
Copy Code code as follows:
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!");
}
The next step is to send the search request section:
Ajaxsearch.js (part2)
Copy Code code as follows:
function Ajaxsearch () {
var Searchword;
Get search keywords and perform urlencode
Searchword=escape (document.getElementById ("Searchword"). Value);
if (searchword== "") {
Prompts the user to enter a keyword if the keyword is empty
document.getElementById ("Search_result"). innerhtml= "<ul><li> Please enter the keyword!</li></ul>";
Return
}
Give a hint and are searching
document.getElementById ("Search_result"). Innerhtml= "<ul><li> loading, please wait </li></ul>";
Open a connection with post
Xmlobj.open ("POST", "ajaxsearch.asp", true);
Set the request header, the form content format is urlencoded
Xmlobj.setrequestheader ("Content-type", "application/x-www-form-urlencoded");
Set response function after completion request
Xmlobj.onreadystatechange=function () {
Complete the response
if (xmlobj.readystate==4) {
Status Normal
if (xmlobj.status==200) {
Set Xmlresult as search results XML document
Xmlresult=xmlobj.responsexml;
Call Ajaxshowresult () to display search results
Ajaxshowresult ();
}
}
}
Send request, content for search keywords
Xmlobj.send ("searchword=" +searchword);
}
The last is the display of the search results:
Ajaxsearch.js (PART3)
Copy Code code as follows:
function Ajaxshowresult () {
var results,i,strtemp;
Get a collection of search results
Results=xmlresult.getelementsbytagname ("result");
Display search results with unordered lists
strtemp= "<ul>";
First, determine if the search results are empty
if (Results[0].getelementsbytagname ("Logid") [0].firstchild.data== "#")
is empty, a search result that does not match is displayed
strtemp=strtemp+ "<li> No search results </li>";
Else
Loop output for each search result
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>";
Show search Results
document.getElementById ("Search_result"). InnerHTML = strtemp
}
At this point, a complete Ajax instance is complete.
Several experiences:
- The page uses UTF-8 encoding, which saves a lot of trouble
- When retrieving the search results, the getElementsByTagName returns a set, so add the subscript after the result, as in the example:
Results[0].getelementsbytagname ("Logid") [0].firstchild.data
- It is recommended that you use document.getElementById () to get the object instead of using the Document.all method
three files in an instance are packaged for download: Ajaxsearch.rar
