Making JavaScript Applications Degrade Gracefully with AJAX and MySQL

As I stated in the previous section, the next step consists of creating an AJAX-based script which will allow us to display the full contents of a specific article on the same web page that shows the articles' titles and authors (remember that this information is fetched earlier from a MySQL database table with PHP 5).

That being explained, here's the signature of the aforementioned AJAX-based script. Have a look at it, please:

// 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);
}
function showDetails(results){
   if(results){
     var divid=results.split('|')[0];
     var result=results.split('|')[1];
     var artdiv=document.getElementById('article'+divid);
     if(divid){
       var div=document.createElement('div');
       div.appendChild(document.createTextNode(result));
       artdiv.appendChild(div);
     }
   }
}
var artcont=document.getElementById('articlecontainer');
if(artcont){
   var links=artcont.getElementsByTagName('a');
   if(links){
     for(var i=0;i<links.length;i++){
       links[i].onclick=function(){
         sendHttpRequest('showdetail.php?id='+this.href.split
('?')[1].substring(3),'showDetails');
         this.href='#';
       }
     }
   }
}

While the source code that corresponds to the above JavaScript snippet seems to be rather complex, actually it's very easy to grasp. In general terms, the snippet in question first uses the "sendHttpRequest()" function for fetching the "showdetails.php" file on the server via AJAX, and then uses another one, called "showDetails()," which is tasked with displaying on the browser the full details of a specific article.

In this case, you may have noticed that each article's content is wrapped by a containing DIV identified as "articlecontainer." This characteristic is used by the aforementioned "showDetails()" function to insert the details of a concrete article into the appropriate DIV element.

The previous JavaScript snippet finishes its execution by attaching the "sendHttpRequest()" function to all the links that were initially created to display the full contents of a specific article, and turns these links off by assigning a "#" character to their "href" property.

A final note before I finish explaining how this AJAX-based script works: please notice that the "showDetails()" function splits the corresponding server response into two different strings using a ("|") character. We do this because the server will send an ID value along with the corresponding article's contents, which will be used by this function to insert these contents into the correct DIV. Sounds pretty simple, right?

So far, so good. At this stage I built a JavaScript application that shows the corresponding details of a specific article on the same web page via an AJAX-based HTTP request. However, the functionality of the original PHP application, which is responsible for fetching the respective database records from MySQL remains nearly the same.

This condition speaks for itself about the versatility of the approach that I used here to develop JavaScript functions that degrade gracefully when scripting is disabled on the browser.

And speaking of fetching article data from MySQL with AJAX, in the last section of this tutorial I'm going to list the full source code corresponding to this database-driven application, so you can see more clearly how its different modules are linked with each other.

Jump ahead and read the next few lines. I'll be there, waiting for you.