Creating the Front End of a Search Engine with AJAX - Creating the application’s look and feel
(Page 3 of 5 )
In accordance with the concepts I explained in the previous section, in the next few lines I’ll list the complete (X)HTML markup that comprises the front-end of this search engine, along with the respective CSS rules. Naturally, what I’m doing here is simply recreating the previous screen shot by using some client-side code, something that you’ll understand perfectly.
That being said, here is the full structural markup that corresponds to the application, together with the group of CSS styles. Take a look at them, 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>
<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>
As you can appreciate, the above code listing is responsible for building some basic elements of the program, such as the search form, and a containing DIV as well, which will house the results returned by the search criteria.
In addition, the only detail worth stressing here is the specification of a “GET” method associated to the pertinent search form. It means that all the HTTP requests triggered with AJAX will be performed by using this method. Short and simple, isn’t it?
So far, so good. As you saw, creating the front-end of this search engine is in fact a straightforward process that can be accomplished with minor hassles. Considering this propitious scenario, let’s leap forward and see together how to define the set of JavaScript functions responsible for sending HTTP requests in the background and for displaying the corresponding search results.
To see how this will be done, visit the following section and keep reading.
Next: Programming the behavioral layer of the application >>
More JavaScript Articles
More By Alejandro Gervasio
/ 11 
