JAVASCRIPT

Building the Server-side Component of a Search Engine with AJAX

Are you one of those web developers wishing to find new and creative ways to use the power of AJAX? Then this set of tutorials might be what you’ve looking for! Welcome to the second installment of the series “Building a search engine with AJAX.” In three comprehensive articles, this series teaches you how to create an expansible search engine which displays results without having to reload the web page.

Author Info:

By: Alejandro Gervasio

Poor Best

Rating:

/ 4

November 21, 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;
}
#resultcontainer a,#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>

All right, as you can see, the complete client-side of this search application is really easy to grasp, since it doesn't present major problems with reference to its definition. Essentially, the above code listing is comprised of the set of JavaScript functions, which are tasked with performing the search process in the background, as well displaying the corresponding results back in the client. Of course, the remaining client code belongs specifically to the (X)HTML markup of the application, thus I won't bore you with irrelevant explanations about what it does.

So far, so good. As you might have guessed, developing the complete client module of this AJAX-driven search application is actually a direct process that can be achieved with minor troubles. However, the program in question is still incomplete. I've not demonstrated yet how to create the server module responsible for performing real searches against a selected database and displaying the corresponding results.

Indeed, it seems that there's hard work ahead of us, right? Well, to speak frankly, it's much simpler than you may think.

Want to learn how the server-side module of this application will be developed? Please click the link below and keep reading.

Next: Coding the search engine's server module >>