Implementing Full Text and Boolean Searches for a Search Engine Built with AJAX - Reviewing the core module
(Page 2 of 4 )
Prior to introducing the group of changes that I mentioned in the beginning of this article, I want to list the complete client-side code of this search engine, based on AJAX. This way, you can understand more clearly how these modifications are going to improve its overall functionality.
Given that, below you can see the full source code that corresponds to the client module of the AJAX-driven search application. Take a look at it, please:
<!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 >>
More JavaScript Articles
More By Alejandro Gervasio
/ 7 
