Ajax initial experience of the actual combat article-create a blog without refreshing search _ajax related

If you don't know much about Ajax, you can take a look at the first part of this tutorial, "the first Ajax experience."

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 of the database and the Log View page are L-blog, as my blog program is ^_^ from L-blog modification.

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& "% ' and 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>"

End IF

' Loop output search results

Do as not rssearch.eof

xml_result=xml_result& "<result><logid>" &rssearch ("log_id") & "</logid><logtitle ><! [cdata[] &rssearch ("Log_title") & "]]></logtitle></result>" cycles output each 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:

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!");
}

function Ajaxsearch () {
 var searchword;
 searchword=escape (document.getElementById ("Searchword"). Value);
 if (searchword== "") {
  document.getelementbyid ("Search_result"). Innerhtml= "<ul> <li> Please enter the keyword!</li></ul> ";
  return;
 }
 document.getelementbyid ("Search_result"). Innerhtml= "<ul><li> loading, please wait </li></ul > ";
 xmlobj.open ("POST", "ajaxsearch.asp", true);
 xmlobj.setrequestheader ("Content-type", "application/x-www-form-urlencoded");
 xmlobj.onreadystatechange=function () {
  if (xmlobj.readystate==4) {
    if (xmlobj.status==200) {
    xmlresult=xmlobj.responsexml;
    ajaxshowresult ();
   }
  }
 }
 xmlobj.send ("searchword=" +searchword);
}

function Ajaxshowresult () {
var results,i,strtemp;
Results=xmlresult.getelementsbytagname ("result");
strtemp= "<ul>";
if (Results[0].getelementsbytagname ("Logid") [0].firstchild.data== "#")
strtemp=strtemp+ "<li> No search results </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
}

At this point, a complete Ajax instance is complete.

Several experiences:

1. The page uses UTF-8 code, this can save a lot of trouble

2. When obtaining a search result, a collection is returned because of the getelementsbytagname used, so add the subscript after the result, as in the example:

Results[i].getelementsbytagname ("Logid")[0]. firstchild.data

3. It is recommended that you use document.getElementById () to get objects instead of using the Document.all method

Resources:

1. The first experience of Ajax hand Chapter

2. Publish three AJAX-related functions, including no refresh submission form, etc.

Three files in an instance package download