Ajax Session Management Timer
This page is a basic example of the Ajax Session Monitor Script written by Eric
Pascarello. (Note: The example script will display 30 seconds after the page has loaded.
Press "Confirm" to see it appear again (30 seconds later), Ignore to not display it
the request of the time on this page. The max idle time is set for 20 seconds. ) One of the things some developers have problem with is user's
sessions expiring due to them taking to long on a form, page, and so on and
loosing important data. One way around this problem is to warn the user that
there session is about to expire.
With Ajax, we are able to send a request to the server to see if the session is still active. If it is, the session is
updated and the user is notified. If the session expired the user is notified
of the problem. If you are a slow reader, you probably have noticed the script
running already. If not, it should be coming into view in a few moments. The
layer slides into the user's view informing them that their session is about to
expire and gives them the choice to update it. If they update the session, an
XMLHttpRequest is made to the server to update the session. When the response
is received back on the client, the timer is restarted.
The script also
monitors the length of the time the message is on the screen. If the user is
idle over the next set period of time, the message is changed to inform them
their session has most likely expired. The script has been made user
friendly(hopefully!) There are a couple of files needed and are available in
the zip file that you can download below.
The files:
-
net.js: This is one of the Ajax In
Action
files for making the Ajax request to the server.
-
AjaxSessionTimer.js:
The JavaScript code behind the Ajax Session timer.
-
AjaxSessionTimer.css:
The CSS for making the alert
-
bluegrad.jpg:
Image used in toolbar of alert (Does not have to be used!)
-
Your Server Side Code:
Code which the page needs to call and execute
-
Your Pages: The pages where the script needs to be included.
Adding the code to your project: Server Code: The zip file contains VB.NET
server side code at the moment. Hopefully I will get versions up in C#, Java,
and PHP in the near future with the help of some nice people. The server side
code is rather easy. On the page we need to do two things, return only the
string: "Session Updated - Server Time:" + THE SERVER DATE and set the content
type of the page to text/html. Very simple!
Your pages:
There are three external references you need to add the code to your pages inside the header
tags of your documents, you need all three or the code will not run!
<LINK REL="StyleSheet" HREF="AjaxSessionTimer.css" TYPE="text/css">
<script type="text/javascript" src="net.js"></script> <script
type="text/javascript" src="AjaxSessionTimer.js"></script>
Adjusting the timer and text properties in AjaxSessionTimer.js:
To make this easy to adapt to the
needs of your page, there are a couple of custom properties that you can
adjust. All of these properties are located at the end of the
AjaxSessionTimer.js file. Only two items are required, while all of the others
can be excluded. REQUIRED: The first line is the script initializing the custom
object. By default the timeout is 20 minutes. If the default time fits your
needs you can instantiate the object like this:
var ajaxTimer = new AjaxTimeoutTimer(); //default time 20 minutes
If you need to adapt the time to be shorter or longer, you need to include the
number of milliseconds to before the confirmation appears. In the example
below, we have a timeout of 15 minutes.
var ajaxTimer = new AjaxTimeoutTimer(15 * 60 * 1000); //Specify a
time length
Creating the AjaxTimeoutTimer object above is required along with the next line,
setting the server side page's URL. This is the page on the server that ouputs
"Session Updated - Server Time:" if the session is still active.
ajaxTimer.serverURL = "AjaxSessionUpdate.aspx";
OPTIONAL PROPERTIES:
|
Property
|
Code
|
Default Property Value
|
| The confirmation title |
ajaxTimer.title = "Your Title";
|
Timeout Notification |
| The confirmation message |
ajaxTimer.message = "Your session is ending!";
|
Your current session is about to expire.....(too long) |
| The Update Button Text |
ajaxTimer.confirm = "Update";
|
Confirm |
| The Cancel Button Text |
ajaxTimer.ignore = "Cancel";
|
Ignore |
| Max idle time |
ajaxTimer.maxWait = 1000 * 60 * 2;
|
5 Minutes |
| idle message |
ajaxTimer.extendedMessage = "You lost your data! "
|
Your session has most likely been expired..... |
THE FILES
With all of this said, you can grab the files by downloading this zip file: The Zip