Mission Data Blog » javascript

Handling Session Timeouts (and other errors) using Ajax

steveny — Fri, 11 Jan 2008 20:18:11 +0000

Ajax can bring a much more responsive and intuitive feel to web applications. However, many times developers overlook error cases when using Ajax. What if the request fails? In one particular case a user’s session may have timed out before they made an Ajax call. This post describes one such way of handling this in a somewhat friendly way.

Handling session timeouts on non-Ajax requests

The first step to handing session timeouts with AJAX is to handle them for non-Ajax requests first. One way of doing this is trapping the URL the user is attempting to access (but not authenticated to), redirecting them to a login page, and upon success, redirecting them back to their original request.

If they aren’t authenticated, send them to the login page:

if(!loggedIn())
{
  response.sendRedirect("/login.jsp?uri=" + URLEncoder.encode(fullURI, "UTF8"));
}

Hide the original request in the page:



">
  ID:

  Password:

…and after a successful signup, send them back to where they wanted to go:

if(authenticated())
{
  response.sendRedirect(request.getParameter("uri"));
}

Handling Session Timeouts for Ajax Requests

The first thing we need to know is if it is an ajax request or not. Since I am going to use prototype for all my ajax calls it is as straight forward as looking for the special header prototype sends on each request:

private boolean isXMLHttpRequest(HttpServletRequest request)
{
  return request.getHeader("x-requested-with") != null && request.getHeader("x-requested-with").equals("XMLHttpRequest");
}

Once we know the request type, we will send a non-200 HTTP status code if their is an authentication error. From the standards, the most appropriate status code is a 401 (Unauthorized). This code, however, comes with some baggage. On a non-ajax HTTP request all browsers will respond by displaying an authentication dialog. Most browsers don’t do this on ajax calls. Most. Safari decided that it should pop up the authentication dialog on ajax requests. Without going too deeply into how this is probably correct and we should be using HTTP to its full advantage and using HTTP authentication instead of a custom authentication scheme, I don’t want this behavior. I landed on using the much less appropriate 403 (Forbidden).

So, if the user isn’t authenticated (such as with an expired session), send the 403 response back to the browser:

if(isXMLHttpRequest(request))
{
  response.sendError(403);
}

Now we handle the 403 on the browser side of things:

new Ajax.Request('/search',
     {asynchronous:true,
       evalScripts:true,
       onException: function(req,exception) {
         alert('An exception "' + exception + '" was thrown accessing "' + request.url + '"' )
         return true
       },
       on403: function(t) {
         alert('Your session appears to have expired.  You will asked to log in again and returned here.')
         window.location.reload()
         return true
       },
       onFailure: function(request) {
         alert('An unhandled error occured ' + t.status + ': ' + t.statusText);
         return true
       },
       onLoading:function(request){Element.show('loading')},
       onComplete:function(request){Element.hide('loading')},
       onSuccess: function(t) {
         //do something with the results
       },
       parameters:Form.serialize(this)
     })

The interesting bit of this call is the on403 method. Prototype will call onXXX() where XXX is a non-200 HTTP response code. When a 403 is returned, I simply reload the current page. Since we handled the scenario of authenticating and returning to the requested page for the non-Ajax call, this ‘just works’. You may wish to do something else here, including some nifty ajax widget that authenticates in-line and makes the call again.

Now that we have an Ajax request that suits our needs, we will want to use it throughout our project. Instead of repeating the same code over and over again, let’s DRY it up.

Creating a Wrapper Class

Since I am going to use this scheme for Ajax.Request and Ajax.Updater I created two wrapper classes that use a common function for setting the options. This scheme allows you to override any of the default options I use in the wrapper:

Ajax.MyRequest = Class.create(Ajax.Request, {
  initialize: function($super, url, options) {
    $super(url,_options(options));
  }
})

Ajax.MyUpdater = Class.create(Ajax.Updater, {
  initialize: function($super, container, url, options) {
    $super({success:container},url,_options(options));
  }
})

function _options(options) {
  return Object.extend({
     asynchronous:true,
     evalScripts:true,
     onException: function(request,exception) {
       Element.hide('loading')
       alert('An exception "' + exception + '" was thrown accessing "' + request.url + '"' )
       return true
     },
     on403: function(t) {
       Element.hide('loading')
       alert('Your session appears to have expired.  You will asked to log in again and returned here.')
       window.location.reload()
       return true
     },
     onFailure: function(t) {
       Element.hide('loading')
       alert('An unhandled error occured ' + t.status + ': ' + t.statusText);
     },
     onLoading:function(request){Element.show('loading')},
     onComplete:function(request){window.setTimeout('Element.hide("loading");', 100);}
  }, options || {});
}

AJAX file upload progress for Java using commons fileupload and prototype

carsonm — Sun, 02 Apr 2006 21:15:15 +0000

This has been done before with PHP (AJAX upload progress meter for PHP) etc but I needed something a little different because I wanted to upload a file and then have it loaded into a database. I looked around and found that someone had already made something that used the commons file upload package to do the upload part (AJAX Upload progress monitor for Commons-FileUpload Example). It wasn’t exactly what I was looking for but it a good start.

To understand the way this works I think it is easiest to break it down into parts:

A file upload extention that counts bytes as they are uploaded
An interface that monitors the progress of something running on the server
AJAX to pull the monitoring into the current screen

Counting bytes when files are uploaded

This was taken from the example listed above. It extends and wraps parts of the commons File Upload classes so that you can count the bytes as they are uploaded to the server. You can download the source with build file or the binary. You will also need the commons file upload, commons io and commons logging. If you download the source put the commons jars in the lib directory before building.

The code is fairly simple to follow. MonitoredDiskFileItemFactory replaces DiskFileItemFactory and the construction of a MonitoredDiskFileItemFactory takes a OutputStreamListener that will be passed on down the chain. The new factory creates MonitoredDiskFileItems instead of DiskFileItems for each file uploaded. When the file needs to be written to disk a MonitoredOutputStream is given back instead of a normal OutputStream. The MonitoredOutputStream calls the OutputStreamListener methods as the bytes are written and with that you now have a way to monitor the byte count as the file is created on the server.

Now to test this all out we can just have an OutputStreamListener that writes its progress out to a logfile or something.

public class FileUploadListener implements OutputStreamListener
{
  private long totalFileSize;
  private long currentFileRead;

  public FileUploadListener(long totalFileSize)
  {
    this.totalFileSize = totalFileSize;
    this.currentFileRead = 0;
  }

  public void start()
  {
    log.debug("Upload started. Total file size: " + totalFileSize);
  }

  public void bytesRead(int byteCount)
  {
    log.debug("Read bytes. Currently " + byteCount + " out of " + totalFileSize + " bytes.");
    currentFileRead+=byteCount;
  }

  public void error(String error)
  {
    log.debug("Hit an error: " + error);
  }

  public void done()
  {
    log.debug("Upload done.");
  }

  public long getTotalRead()
  {
    return currentFileRead;
  }

  public long getTotalSize()
  {
    return totalFileSize;
  }
}

Now we try it out. You can put this in a servlet or jsp so I’m only going to list the parts that matter.

  FileUploadListener listener = new FileUploadListener(request.getContentLength());
  session.setAttribute("LISTENER", listener);
  FileItemFactory factory = new MonitoredDiskFileItemFactory(listener);
  ServletFileUpload upload = new ServletFileUpload(factory);
  List items = upload.parseRequest(request);
  for (Iterator i = items.iterator(); i.hasNext();)
  {
    FileItem fileItem = (FileItem) i.next();
    if (!fileItem.isFormField())
    {
       // code here to process the file
     }
   }

I’m going to assume you can find the correct way to do the actual form upload part.

Note: One issue that you will face at some point is where the upload post goes to becuase when you get to the AJAXy part of things you want the post to stay on the same page. You can use a hidden iframe and the form’s “target” parameter to do this (I have an example later). This is one thing the Java examples I found didn’t have but the PHP examples did and I’m not sure exactly how the Java examples work without it.

Monitoring progress on the server

The next step is to monitor the progress of the upload on the server. What you are monitoring on the server doesn’t even need to be the upload. For the work I was doing the upload goes fairly quickly but what happens to the file after the upload takes a little longer. I wanted to monitor both and that is one reason I think it helps to break this up into parts because you aren’t limited to just monitoring file uploads.

The main thing to keep in mind here is that the application server is multithreaded and you can make more than one request to the server at the same time. You probably know that you can open a tab in firefox or another window in ie and use the same session from the current webapp you are using. Knowing that you can create a page that monitors the status of things as they are running on the server.

From the example above you could toss the listener into the users session. Then insead of logging you just add a couple variables to keep track of the number of bytes that have been uploaded. Then create a simple jsp that pulls the Listener out of the session and dumps its data to a page. Open two windows, one to the upload page and another one to the status page. Start the upload and then start refreshing the status. You should see that the values change as the file is uploaded.

<%@page%>
<%
  FileUploadListener listener = (FileUploadListener)session.getAttribute("LISTENER");
%>
Total size: <%=listener.getTotalSize()%>

Read count: <%=listener.getTotalRead()%>

Of course you will probably want more than just the total size and bytes read as well as more formating like a little progress bar or something but I’ll leave that up to you.

AJAX integration with prototype

You have the major parts to the upload progress done and now all you need is the AJAX part. To do this I chose to use prototype because it cuts right to what you want to do. One call is all you need to use: Ajax.PeriodicalUpdater.

The Ajax.PeriodicalUpdater call will update a container (in my case a div) on a set interval. Here is an example of how to have it update a div with an id of “status” every second.

    new Ajax.PeriodicalUpdater(
                                'status',
                                'status.jsp',
                                {asynchronous:true, frequency:1, method:'get'});

The first argument is the id of the div, the second is the jsp that contains the data to stick into the div every second and the 3rd arguement is a set of options. There are more options availabe if you need them.

You would want to kick the update off whenever the form is posted. When the post is complete the iframe used as a place to post to will load with the results of the servlet or jsp that you posted to. If you return some javascript as a result for the iframe you will be able to create a final “finished” message on the page to let the user know the upload has completed and stop the processing of the AJAX updater.

So there you have it. The basics of setting up an upload progress bar using java and AJAX. I have left out a good bit but you should have enough to at least get you started.

By request I have created a simple example that pulls everything together. The source contains everything you need to create a war file including all source and an ant build file.

Example Source

Smooth scrolling image list

carsonm — Thu, 16 Feb 2006 02:26:03 +0000

I had someone ask me about fitting more images in a small area and the way flickr does their image scrolling came to mind. I wanted to see how hard it was to do and as it turns out it isn’t hard to do at all thanks to script.aculo.us.

I’m making this as simple as I can to illustrate just how nice the new tools like script.aculo.us are.

Step 1. You need a box and some images. You will also need to know the size of the images or at least the size of the largest one. In an attempt to keep this simple I’m going to assume all the images are the same size.

Notice from this code that we have an outer box and an inner box. We will next want to make the outer box smaller than the inner box so that only a few of the images can be seen at one time.

Step 2. To hide the extra images we give the outer box a set width, in this case I want to show only 2 images at a time and each image is 180px wide so I make the outer box 360px wide. Notice that the overflow is hidden. The hidden overflow is what keeps the images that are in the inner box but not within the outer box’s width hidden.

I’m using floats to lay the images out one next to the other. Because of this we need to give the inside box a large width so that it will not wrap the floated images.

Step 3. Now for the magic. You need the latest version of script.aculo.us because I use the Effects.Move function and they have changed Effects.MoveBy to Effects.Move only recently.

We now create two functions to move the images ether one step to the right or one step to the left. Each step is the size of a single image so the when one is hit it moves one image out of thew view and another image into view. As you can see from the following code this is extremely easy using the script.aculo.us library.

Step 4. The only thing that remains is to connect everything together. We add a couple links to move call the next and previous functions defined above.

< a href="javascript:void(0);" href="javascript:void(0);" onclick="moveToPrevious(); return true;">
< a href="javascript:void(0);" href="javascript:void(0);" onclick="moveToNext(); return true;">

And that is all there is to it. See it in action!

No javascript detection

carsonm — Wed, 15 Feb 2006 20:08:44 +0000

Have you ever wondered what you can do if someone doesn’t have javascript turned on and it is needed on the page they are sitting at? Well here is the answer:


  
    
  
  
    A javascript test.

If the user doesn’t have javascript turned on they will be redirected to the page nojscript.html. It doesn’t work as well as having a page in between that does the detection but if you have to do it on the page you need the javascript on this is the way to go.