By: James Harvey
With AJAX applications giving us a lot more power than an "old school" web 1.0 page, it isn't unusual for someone to just sit on one page and fire off various operations that use HTTP to fetch and present data. This works fine until you leave the site alone for too long and your session times out. (I'm assuming most folks use a time based session, much like how ColdFusion works.) The question is - what happens in your current AJAX based application when a user's session times out? For a site that requires authentication, the results can be unexpected. If your working with JSON, then a response that contains the HTML of a login form certainly will not be a valid result. Even if you are working with simple HTML strings back and forth, it's going to be a bit wonky if all of a sudden a login form appears in the middle of a div tag that is supposed to show other results. Let's look at a simple example of this.
The session is set to timeout after one minute, so if you wait a good 60 seconds and try to search again, you will see something weird...
The login screen is now embedded in the page itself. While it may actually work in there, it probably isn't desirable. So how can we go about handling this? My first attempt was to use a method I saw used in the Spry AJAX framework. They have support for looking for a particular string response from the server. If that response occurs, then it is assumed that a session has ended, and you can register an event handler to support that. What's cool is - we can use another jQuery feature to detect an AJAX based response. The following code is ColdFusion, but could obviously be done in other server side languages as well. It runs with the Application.cfc/onRequestStart context, which basically means before every request:
This code basically says the following: If we need to login, check and see if the jQuery request header, "X-Requested-With", exists and is the right value. If so, output "session expired" and kill the request. Otherwise, respond with a login form. Now we can handle expired sessions coming from both 'normal' and Ajax-based requests, and both will securely be aborted.
Let's look at the front end code:
Obviously you can ignore the vanllia HTML stuff, as well as the submit handler. It just calls my ColdFusion code to handle the reverse operation. But pay attention to the ajaxSetup call. I've defined a success function that will run when the AJAX request successfully completes. If the response is "session expired", then we alert the user and reload the entire page. (Alerts are evil - normally I'd use a jQuery UI Dialog.) Again, you want to login with admin/paris, play with the reverser a bit, and then sit idle for a good minute or two. Two things bug me about this though. One, it is certainly possible someone may want to reverse the reverse of session expired. Who would? Probably me. Secondly, you do actually see 'session expired' in the result for a split second before the page reloads. All together it just feels hackish.
I did some more digging and it occurred to me - I'm using the presence of a header on the server side to detect a jQuery call. Why not use a header to detect a session expired response? I modified my ColdFusion code to do just that:
Again, even if you aren't a ColdFusion person, you can probably read that well enough to see that for jQuery responses that have timed out, we now respond with a custom header and no text at all.
On the front end, I have a slighly modified ajaxSetup call:
I'm using the complete method to look for the sessionexpired response header. If it exists, I fire off the alert and do the page reload.
I hope this Helps.
About This Tutorial
Author: James Harvey
Total Views: 18,503
Submission Date: August 17, 2010
Last Update Date: August 17, 2010
All Tutorials By This Autor: 12
Skill Level: Beginner
Platforms Tested: CF8,CF9Total Views: 18,503
Submission Date: August 17, 2010
Last Update Date: August 17, 2010
All Tutorials By This Autor: 12
Discuss This Tutorial
Advertisement
