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.
Next: Putting the pieces together >>
More JavaScript Articles
More By Alejandro Gervasio
/ 15 
