JAVASCRIPT

Implementing Full Text and Boolean Searches for a Search Engine Built with AJAX

Do you want to learn how to create a fully-functional AJAX-driven search engine in a few easy steps? Then read this group of instructive tutorials on the subject. Welcome to the final installment of the series “Building a search engine with AJAX.” In three articles, this series walks you through the process of developing a search application which utilizes HTTP requester objects to perform searches in the background.

Author Info:

By: Alejandro Gervasio

Poor Best

Rating:

/ 7

November 29, 2006

TABLE OF CONTENTS:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
<title>AJAX-BASED SEARCH ENGINE</title>
<script language="javascript">
// send http requests
function sendHttpRequest(url,callbackFunc,respXml){
    
var xmlobj=null;
  
try{
       
xmlobj=new XMLHttpRequest();
}
   
catch(e){
       
try{
xmlobj=new ActiveXObject("Microsoft.XMLHTTP");
        }
      
catch(e){
            
alert('AJAX is not supported by your 

browser!');
           
return false;
         }
}
  
xmlobj.onreadystatechange=function(){
       
if(xmlobj.readyState==4){
           
if(xmlobj.status==200){
               
respXml?eval

(callbackFunc+'(xmlobj.responseXML)'):eval(callbackFunc+'

(xmlobj.responseText)');
          
}
        }
}
// open socket connection
   
xmlobj.open('GET',url,true);
// send http header
  
xmlobj.setRequestHeader('Content-Type','text/html; 

charset=UTF-8');
// send http request
   
xmlobj.send(null);
}
// display search results
function displayResults(results){
var rescontainer=document.getElementById('resultcontainer');
   
if(!rescontainer){return};
   
rescontainer.innerHTML='';
   
rescontainer.innerHTML=results;
}
window.onload=function(){
 
if(document.getElementById&&document.

getElementsByTagName&&document.createElement){
        var searchbutton=document.getElementsByTagName

('form')[0].elements[1];
            if(searchbutton){
              
searchbutton.onclick=function(){
  
sendHttpRequest('search.php?searchterm='+document.

getElementsByTagName('form')[0].elements[0].value,'displayResults');
                 }
        }   
    }
}
</script>
<style type="text/css">
body{
            margin:0;
            padding:0;
            background:#fff;
}
h1{
            font:bold 28px Arial, Helvetica, sans-serif;
            color:#000;
            text-align:center;
}
h2{
            font:bold 12px Arial, Helvetica, sans-serif;
            color:#c00;
}
p{
            font:normal 12px Arial, Helvetica, sans-serif;
            color:#000;
}
#searchcontainer{
            width:600px;
            padding:5px 0 5px 0;
            margin-left:auto;
            margin-right:auto;
            background:#9c9;
            border:1px solid #000;
            text-align:center;
}
#resultcontainer{
            width:580px;
            height:500px;
            padding:10px;
            margin-left:auto;
            margin-right:auto;
            overflow:auto;
            background:#eee;
            border-left:1px solid #000;
            border-right:1px solid #000;
            border-bottom:1px solid #000;
}
#resultcontainer ul,li{
            display:block;
            list-style:none;
}
#resultcontainera,#resultcontainer a:visited{
            font:bold 12px Arial, Helvetica, sans-serif;
            text-decoration:underline;
            color:#039;       
}
#resultcontainer a:hover,#resultcontainer 

a:active,#resultcontainer a:focus{
            color:#c00;
}
.searchbox{
            width:200px;
            font:normal 12px Arial, Helvetica, sans-serif;
            color:#000;
}
.searchbutton{
            width:80px;
            font:bold 12px Arial, Helvetica, sans-serif;
            color:#000;       
}
</style>
</head>
<body>
<h1>AJAX-BASED SEARCH ENGINE</h1>
<div id="searchcontainer">
<form method="get">
<input type="text" name="searchterm" title="Enter your search
term here" class="searchbox" />
<input type="button" name="search" value="Search"
class="searchbutton" title="Search Now!" />
</form>
</div>
<div id="resultcontainer">
</div>
</body>
</html>

Now, with reference to the above code listing, I hope you find it familiar, more specifically if you’ve been reading my two previous tutorial of the series. Otherwise, if the above client-side code doesn’t ring any bells for you, let me tell you that it comprises what I call the “client module” of the search engine. It is logically responsible for rendering the corresponding user interface, as well as defining the JavaScript functions tasked with sending HTTP requests in the background and displaying search results.

Okay, after explaining the functionality of the previous client-side code, it’s time to move on and review (at lest very superficially) another core module of this search engine. In this case, I’m talking about the couple of MySQL processing classes charged with performing searches against a selected database, and returning the potential results to the client.

To see how this server-side module of the application was developed originally, please read the following section.

Next: A final look before introducing the changes >>