Old school AJAX call that just works

Today I was working on a web page that performs an AJAX call on unload, so when a person navigates away from the page, the AJAX call is triggered. The goal was to register that the visitor navigated away from the page so just a one-way call was needed.

I started out using a simple ASP.NET client callback and it worked – or so I thought. When the next page on the same website is loaded, a JavaScript error occurred because the __pendingcallback variable was null.

Then I made the callback asynchronous instead of synchronous but it didn’t help. Then a colleague suggested that I should use an ASP.NET AJAX script service call instead. That didn’t help. A JavaScript error still occurred though it was a different one but caused by the same issue.

So I started doing what I should have done from the beginning – do it old school. It’s faster, more reliable, uses GET, light weight and completely cross-browser supported. I created an HttpHandler that took a few URL parameters. I could have used the same page but for this scenario a handler was more appropriate and they are always faster.

Then I added this piece of code in the unload event handler in JavaScript:

[code:html]

<script type="text/javascript">
function UnLoadHandler()
{
  var img = new Image();
  img.src = "/handler.ashx?id=1234";
}

window.onunload = UnLoadHandler;
</script>

[/code]

The UnLoadHandler() method performs a GET request to the handler by preloading it into an Image object. This is of course not AJAX according to the definition, but it is asynchronous and uses JavaScript. I guess that makes it AJ.