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.