Home arrow JavaScript arrow Page 5 - Creating the Front End of a Search Engine with AJAX
JAVASCRIPT

Creating the Front End of a Search Engine with AJAX


Welcome to the first part of a three-part series that will show you how to create a search engine that fetches content from a database. We will use PHP and AJAX to create this engine. This article will focus on creating the search engine's front end.

Author Info:
By: Alejandro Gervasio
Rating: 4 stars4 stars4 stars4 stars4 stars / 20
November 15, 2006
TABLE OF CONTENTS:
  1. · Creating the Front End of a Search Engine with AJAX
  2. · Creating the search engine’s user interface
  3. · Creating the application’s look and feel
  4. · Programming the behavioral layer of the application
  5. · Putting the pieces together

print this article
SEARCH DEVARTICLES

Creating the Front End of a Search Engine with AJAX - Putting the pieces together
(Page 5 of 5 )

As I said before, below I put at your disposal the full client-side of this search application. You can copy and paste it for testing purposes. Here it is:

<!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>

After showing you the complete source code that comprises the client module of this AJAX-driven search engine, I hope you’ll have enough time to tweak it and introduce your own improvements and changes.

Wrapping up

We’ve come to the end of this article. In this first tutorial of the series, I showed you in a friendly fashion how to create the front-end of an AJAX-based search engine. Logically, there are still more topics to cover, such the development of the application’s server module, which will be created with PHP 5.

Therefore, I’m afraid you’ll have to read the next article to learn how this will be done. I'll see you then!


DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware.

blog comments powered by Disqus
JAVASCRIPT ARTICLES

- Project Nashorn to Make Java, JavaScript Wor...
- JavaScript Virus Attacks Tumblr Blogs
- Google Releases Stable Dart Version, JavaScr...
- Khan Academy Unveils New JavaScript Learning...
- Accessing Nitro? There`s an App for That
- JQuery 2.0 Leaving Older IE Versions Behind
- Fastest JavaScript Engine Might Surprise You
- Microsoft Adjusting Chakra for IE 10
- Brendan Eich: We Don`t Need Google Native Cl...
- An Overview of JavaScript Statements
- An Overview of JavaScript Operators
- Overview of JavaScript Variables
- More of the Top jQuery Social Plugins
- The Top jQuery Social Plugins
- More of the Top jQuery Slider Plugins

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
 
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 
Support 

Developer Shed Affiliates

 




© 2003-2014 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials