Handling Session timeout & other server http errors in AJAX

AJAX has really changed the way we build web applications.When I surf internet today, I find almost all the websites Ajaxified in some way. Writing an AJAX application is as simple as writing simple JavaScript methods and some server side code.

I have been writing AJAX codes since a long time now and believe me tge most difficult part is to handle errors and exceptions. Session timeout is one of the most trivial error that one needs to consider while creating an AJAX enabled application.

Normally, we use AJAX to deliever HTML content that we put in a DIV or SPAN tag and display it on screen. But suppose the request that we sent using AJAX was generated an error due to session timeout then the session timeout screen will be shown in DIV tag. Any error generated by server let say http 404 error or http 505 can lead to display such error in our display DIV.

Handle Session timeout errors

One solution that you can use to handle the session timeout errors is using JSON or XML format as output for your AJAX requests. You have to check for session in your script, say for example if you are using JSP then probably you can do something like this:

if(null == session || session.getAttribute("SOME_ATTR_THAT_I_PLACED_IN_SESSION")) {
	isSessionNull = true;
}
...
{
	<%
	if(isSessionNull) {
		out.println("status: error");
	}
	else {
		out.println("status: success");
	}
	%>
}

In short, create a status field in your JSON script or a status tag in your XML which will describe the status of the request.

I am looking for some more ways of checking session timeouts in AJAX. Kindly let me know if you have a good solution.

Handle Server HTTP errors in AJAX

HTTP errors like 404, 503 are sometimes tedious to handle using AJAX. There is a simple trick to solve this problem. First let us see simple AJAX handler function that we use to get response XML/text through AJAX.

xhr.open("GET", "http://someurl", true);
xhr.onreadystatechange = handleHttpResponse;
xhr.send(null);
...
...
function handleHttpResponse() {
	if (xhr.readyState == 4) {
		//handle response your way
		spanBodyContent.innerHTML = xhr.responseText;
	}
}

Normal AJAX handlers has a if to check readyState and if it is 4 (response arrived state) then we get the response from xhr.responseText or xhr.responseXML.

AJAX’s XMLHttpRequest object has attributes to check the status of your http request. You can use two attributes: status and statusText for knowing this.

xhr.status
..
xhr.statusText

Thus by checking status attribute from your AJAX xhr object can solve your problem.

xhr.open("GET", "http://someurl", true);
xhr.onreadystatechange = handleHttpResponse;
xhr.send(null);
...
...
function handleHttpResponse() {
	if (xhr.readyState == 4) {
		try {
		if(xhr.status == 200) {
			//handle response your way
			spanBodyContent.innerHTML = xhr.responseText;
		}
		}catch(e) {//error}
	}
}

Thus, if status is not 200, you may not want to update your DOM with the ajax result and display some error message on your web page.

Get our Articles via Email. Enter your email address.

You may also like...

7 Comments

  1. Vats Thakur says:

    Really nice, thanks..

    • Viral Patel says:

      @Vats – You welcome. I hope you also liked other articles as well.

  2. really nice ……….. this code and instructions are very helpful for me .

    Thanks.

    • Viral Patel says:

      @Abhishek – Thanks a lot :-)

  3. ravisankar says:

    i want ajax code in order to refresh portion of the content in web page with new webpage when we click on command button in jsf can anyone help out me

  4. Rajendra Lella says:

    Hi Viral,

    I have small suggestion but I am not sure over here whether it fits or not,
    based on the received response, If I can submit a form which will re-direct to the login page
    will that work?

    Thanks

  5. Ami says:

    Hi Viral,
    Thanks for posting this article.
    About ‘Handle Session timeout errors’ , the code you posted doesn’t seem to work. As you are checking session (server side code) in Javascript, this won’t be invoked everytime you make an Ajax call.
    What I’d suggest is, send some prefix back from server for each Ajax call you make, eg, when response comes back, it should be prefixed with word ‘Status: ……’. While handling Ajax response you check if response start with word ‘Status:’, if yes then it is a genuine response otherwise session is expired or any other error occurred which stopped processing your request. There might be other better solution but this one worked for me.

    Hope that helps.

    Cheers

Leave a Reply

Your email address will not be published. Required fields are marked *