Old school AJAX call that just works

by Mads Kristensen 23. October 2007 00:28

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

Tags: ,

ASP.NET | Client-side

Comments

10/23/2007 12:44:33 AM #

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 United States |

10/23/2007 12:47:44 AM #

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 Denmark |

10/23/2007 1:03:45 AM #

Josh Stodola

Oh, duh.  That makes sense now.

Thank you, sir!

Josh Stodola United States |

10/23/2007 7:36:58 PM #

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 Israel |

Comments are closed

About the slave

Mads Kristensen Mads Kristensen
Web developer at ZYB and founder of BlogEngine.NET. More...

LinkedIn ZYB Facebook Last.fm Twitter View Mads Kristensen's profile on Technorati

The Lounge

Disclaimer

The opinions expressed herein are my own personal opinions and do not represent my employer's view in anyway.

© Copyright 2008