Building the Server-side Component of a Search Engine with AJAX - The search engine's client module
(Page 2 of 4 )
Naturally, before I start developing the actual core module of this search engine, I'd like you to take a quick look at its complete client-side code. Doing so, you'll understand much better how all the different components that comprise this application fit together.
Therefore, I listed the full client-code of this AJAX-based search engine below, ready to copy and paste. Please, have a look at it:
<!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 >>
More JavaScript Articles
More By Alejandro Gervasio
