Home arrow JavaScript arrow Page 4 - 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 / 18
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

TOOLS YOU CAN USE

advertisement
Creating the Front End of a Search Engine with AJAX - Programming the behavioral layer of the application
(Page 4 of 5 )

After having defined the respective (X)HTML markup and CSS rules that make up the front-end of this AJAX-driven search engine, the next logical step that I’m going to take rests on creating the JavaScript functions which are tasked with sending HTTP requests in the background to perform the corresponding search, in addition to showing the eventual results in the browser.

the code listing below shows the two core JavaScript functions responsible for performing all the tasks that I mentioned before. Please examine their respective signatures:

// 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');            }         }       } }

If you felt inclined to think that triggering HTTP requests with AJAX, and displaying the corresponding server responses in the client was a hard process to accomplish, then the above code snippet demonstrates the opposite. As you can see, the first function, called “sendHttpRequest(),” is responsible for sending the search term inputted into the respective search box to the server. The second function simply displays the potential search results to the browser. I told you that all these tasks were easy to perform!

Okay, I guess that the two previously-defined functions are very easy to grasp, thus if you take some time to recapitulate the things learned until now, you’ll realize that both the presentational and behavioral layers of this search engine have been appropriately created.

Therefore, I suggest you go ahead and read the last section of this article to see the full client-side code that comprises the application.


blog comments powered by Disqus
JAVASCRIPT ARTICLES

- More Top jQuery Tutorials for Beginners
- More Top jQuery Plugins for Menus
- Top jQuery Tutorials for Beginners
- New UI Framework and SDK for JavaScript Rele...
- JavaScript OpenPGP Tool, Node.js 0.6.3 Avail...
- Yahoo Releases Cocktails Language and Develo...
- Customizing jQuery Slideshows: Dynamic Contr...
- Customizing jQuery Slideshows: the animate()...
- Customizing jQuery Slideshows: slideUp() and...
- Customizing jQuery Slideshows: hide() and sh...
- Web Workers: Performing Calculations in Para...
- More Top JavaScript Frameworks and Libraries
- More Dynamic jQuery Styling Techniques
- The Top JavaScript Libraries
- The Top JavaScript Frameworks

Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Weekly Newsletter
 
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 
Support 



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