How to Handle Ajax Errors (
Page 1 of 4 )
An Ajax request behaves like a JavaScript thread. While the request is going on, execution of the JavaScript code in the flow of the code carries on. How do you solve possible conflicts and the resulting errors?If you have an Ajax function in your web page, and it does not download the text you expected, can you solve the problem by clicking the Reload (Refresh) button on your browser? If yes, under what conditions does this work? If no, why not?
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.
