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. I've created a simple ColdFusion application that requires a login before using the site. You can view this demo here. The login form is prepopulated with the right username and password, but just in case it doesn't work, use "admin" and "paris". Once logged in, you can enter a simple string into the text box. Hit submit, and jQuery will do a quick AJAX call to a ColdFusion file that reverses the string. (Yes, this is overkill, and yes, you can do this in JavaScript, but I wanted something quick and dirty to test with.) 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 that I blogged about a few weeks ago 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:
<cfif not structKeyExists(session, "loggedin") and listLast(arguments.thePage,"/") neq "login.cfm">
<!--- is it jquery? --->
<cfset reqData = getHTTPRequestData()>
<cfif structKeyExists(reqData.headers,"X-Requested-With") and reqData.headers["X-Requested-With"] eq "XMLHttpRequest">
<cfoutput>session expired</cfoutput><cfabort>
<cfelse>
<cfinclude template="login.cfm">
<cfabort />
</cfif>
</cfif>
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$.ajaxSetup({
success:function(data,textstatus) {
data = $.trim(data)
if(data == 'session expired') {
alert('Sorry, your session has expired.')
window.location.reload(true)
}
}
})
$("#mainForm").submit(function() {
var str = $("#string").val()
console.log('will reverse '+str)
$("#response").load('reverse.cfm',{string:str})
return false
})
})
</script>
</head>
<body>
<h2>Ajax Test</h2>
<p>
Enter a string in the field and I'll make an AJAX request to reverse it.
</p>
<form id="mainForm">
<input type="text" name="string" id="string"> <input type="submit" value="Reverse">
</form>
<div id="response"></div>
</body>
</html>
<!--- is it jquery? --->
<cfset reqData = getHTTPRequestData()>
<cfif structKeyExists(reqData.headers,"X-Requested-With") and reqData.headers["X-Requested-With"] eq "XMLHttpRequest">
<cfheader name="sessionexpired" value="1">
<cfabort>
<cfelse>
<cfinclude template="login.cfm">
<cfabort />
</cfif>
$.ajaxSetup({
complete:function(req) {
if(req.getResponseHeader('sessionexpired') != null) {
alert('Sorry, your session has expired.')
window.location.reload(true)
}
}
})