Simple AJAX JavaScript Function ...

AJAX is all the rage, all employers want knowledge of it, all developers want to use it. Something I have found is that most of the places I have worked in, and web sites I have worked on don truly use "AJAX", which, be definition is Asynchronous JavaScript and XML.

The theory with AJAX is basic; something on a web site triggers a JavaScript function, whether an button, link, or other action. That JavaScript function checks the browser to determine which XMLHTTP object is available (if any), then uses that object to retrieve the contents of another file (which is presumably XML or HTML) for display inside of a DIV on the original web site without refreshing the entire page. If the browser has no supporting object, and error must be gracefully handled.

While there are very sophisticated mechanisms available for doing all this, I really subscribe to the keeping it simple method. I wrote a simple JavaScript function that accepts two parameters, the first is the URL of the file you are wanting to retrieve (including querystrings and whatnot) the second is the ID of the div you want the results populated in. If the script encounters an error in the process, it will pop up a JavaScript dialog saying so, in a typical, cryptic JavaScript debugging code.

function ajaxRequest(Url,DivId)
{
 var AJAX;
 try
 {  
  AJAX = new XMLHttpRequest(); 
 }
 catch(e)
 {  
  try
  {    
   AJAX = new ActiveXObject("Msxml2.XMLHTTP");    
  }
  catch(e)
  {    
   try
   {
    AJAX = new ActiveXObject("Microsoft.XMLHTTP");      
   }
   catch(e)
   {      
    alert("Your browser does not support AJAX.");      
    return false;      
   }    
  }  
 }
 AJAX.onreadystatechange = function()
 {
  if(AJAX.readyState == 4)
  {
   if(AJAX.status == 200)
   {
    document.getElementById(DivId).innerHTML = AJAX.responseText;  
   }
   else
   {
    alert("Error: "+ AJAX.statusText +" "+ AJAX.status);
   }
  }  
 }
 AJAX.open("get", Url, true);
 AJAX.send(null);
}

That is the function which is called just like any other JavaScript function, passing in those two required parameters. The only other requirement is to make sure you have a div with the ID you are passing in the function call.

AJAX, for being all the rage, is really just that simple at it is most basic level. You can use the incredibly complex Yahoo UI libraries that are available on their developer site, or any of the others available, but, at the end of the day, this does the job for me, and, is incredibly small, lightweight, functional and easy to use.

If you are one of those developers that worries more about being the most sophisticated coder guru, you may not like this, but, if you are a developer that simply wants to get the job done, and is worried more about the application working, regardless of being the most high tech or not, this will do the trick with most needs, at least, it has for me, and it is worked in .Net, Classic ASP and PHP without a problem.

Just remember, AJAX does have it is down sides, so consider all the consequences before using it. Generally AJAX driven divs are not seen by search engine crawlers, if all your data shown in your main div without every refreshing the page, crawlers may never even see your content, visitors may have a hard time bookmarking their favorite pages, and you will have a harder time deep linking straight to some of your own content. Use it wisely, however, it can be incredibly effective.

source: successontheweb

 Original Source: