Old school AJAX call that just works

Oct 22, 2007

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:


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


window.onunload = UnLoadHandler;
</script>

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. 

* Only $4.95/month ASP.NET & Windows 2008 + IIS 7 Hosting! FREE SQL Included

Comments (4) -

Josh Stodola
Josh Stodola United States
10/22/2007 3:44:33 PM #

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.

Mads Kristensen
Mads Kristensen Denmark
10/22/2007 3:47:44 PM #

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.

Josh Stodola
Josh Stodola United States
10/22/2007 4:03:45 PM #

Oh, duh.  That makes sense now.

Thank you, sir!

Miron
Miron Israel
10/23/2007 10:36:58 AM #

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.

Comments are closed

About the author

Mads Kristensen

Mads Kristensen
Program Manager at the Microsoft Web Platform team and founder of BlogEngine.NET.

More...

Month List

Disclaimer

The opinions expressed herein are my own personal opinions and do not represent my employer’s view in any way.