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. 

Comments

Josh Stodola

Wow! I haven't seen that used for a grip of time! Thanks for the reminder. I'm curious as to why the modern methods were failing for you.

Josh Stodola

Mads Kristensen

They failed because both the client callback and script service methods returns back to the internal JavaScript implementation. When it returns, the page is not there anymore and variable set by ASP.NET on the page is now null.

Mads Kristensen

Miron

Very useful method, I'm using it to log the client movement in the site. Also it can be use register that the user close his browser by using the window.onbeforeunload event (Also cross browsers). It also different from regular Ajax callback because this callback is invisible to the client even with Firebug.

Miron

Comments are closed