How to Handle Ajax Errors

If there were a problem with the server, would it send an error message? If yes, does the error message come in place of the text you were expecting or there is some Ajax object method that handles this? If no, why not? If the server is dead, does the TCP/IP protocols send an error message? If yes, how do you handle it? If no, why not?  

I answer all of these questions in this article.

An Ajax Function without Error Checking  

This is a procedure for an Ajax request that does not have any error checking code:  

//variable to finally hold the Ajax downloaded text.

pageDoc = "";

var xmlHttp;

try

{

  // Firefox, Opera 8.0+, Safari

  xmlHttp = new XMLHttpRequest();

}

  catch (e)

{

  // Internet Explorer

try

{

  xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");

}

  catch (e)

{

  try

{

  xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");

}

  catch (e)

  {

  alert("Your browser does not support AJAX!");

  }

 }

}

  xmlHttp.onreadystatechange=function()

{

  if (xmlHttp.readyState == 4)

{

  pageDoc = xmlHttp.responseText;

}

}

  xmlHttp.open("GET","http://localhost/cgi-bin/sendPge2Str.pl",true);

   xmlHttp.send(null);

The first statement declares the variable that will hold the downloaded text. JavaScript needs an Ajax object to make the Ajax request. The next statement is an “integrated” try-catch block. This statement is long because different browsers and different Internet Explorer versions have different ways of instantiating the Ajax object. Here the name of the Ajax object is xmlHttp.  

The statement after that defines a method for the Ajax object. This method is called each time the state of the Ajax object changes. The final change of state occurs when the readyState is 4. When the readyState is 4, the method of the Ajax object defined is executed. At this point the text has been downloaded completely and is ready for use at the browser.  

The statement (xmlHttp.open()) that follows opens the connection for the request to be made. The statement after that makes the request. When all of the text has been downloaded, the readyState property becomes 4 and executes the defined object.

Clicking the Reload Button

This is the rule for any web page, including that with an Ajax function like the one above. When a web page is being displayed or after it has been displayed, and you realize that all of the HTML elements (recourses) have not been downloaded, you should click the Reload (Reload) button on the browser. When you do this, then all of the HTML elements (recourses) should be re-downloaded from the server. Solving an error problem like this works when there is an accident (temporary error) in the server or transmission line.  

Note: this works as long as the erroneous downloaded Ajax content is not cached by the browser. Many browsers will cache the Ajax downloaded text (content) by default; so, when you click Reload button, the downloaded Ajax text is taken from the browser cache. It is possible for you to make your downloaded Ajax content not be cached. You do this at the script at the server. That is, you do this at the script at the server that sends the Ajax text (content). PHP, the computer script language, has a good way of doing this. However, we shall not discuss that here.  

As I said above, clicking the Reload button on the browser to solve a download error Ajax problem should work when the problem was actually an accident from the server or from the line.

>>> More AJAX & Prototype Articles          >>> More By Chrysanthus Forcha

blog comments powered by Disqus