How can I make an async call in Javascript onunload element?

I have a system where items are locked (with a flag in the database) when a user is vieiwing that item.

Currently the item is only unlocked when a user performs a certain action.

However, when a user leaves the page through any method, I'd like to make a call to a webservice / ashx page that will unlock the item, but not stop the page from changing.

From stackoverflow

• What you are describing is not possible. The JavaScript thread/runtime lives within the scope of the loaded page, so when the page unloads the JavaScript is unloaded as well. When the asynchronous call returns and the browser has moved away from the page, the user will get a JS error.

  You can make your web service/AJAX call synchronous and block until the server returns a response, but of course that means the page will wait for the response before unloading.

  ck : I don't need a response, so I was hoping I could make the call then let the thread die...?

  annakata : Yes, you can do that - fire-and-forget

  Rex M : @ck - if the user closes the browser window then everything should be fine, but they are just navigating to another page, when the response comes back they will get a JS error because the JS context the XmlHttpRequest callback was expecting no longer exists

  ck : @Rex M: I found this works without a JS error, both in IE7 and Firefox with Firebug

• What about using a "heartbeat" function to keep the lock alive while the page is loaded? Make a server call every, say, 15 seconds or so to renew the lock. Program your server-side code so that a lock will time out after 20 seconds if it hasn't heard the "heartbeat" from the page. When the user navigates away from the page, the heartbeat will stop, and the lock will be released a maximum of 20 seconds later.

  ck : That sounds like a lot of overhead

  Joshua Carmody : I wouldn't think it would be too bad. The average HTML page often generates dozens of HTTP requests. One advantage of a heartbeat is that if the user leaves and your function doesn't execute for some reason (example: the power went out, or the browser crashed), the lock wouldn't remain indefinitely.

• I think you should be able to do a synchronous XHR call to your server.

  If you're using jQuery:

  $.ajax({
    async:false,
    url:"your_page.html",
    data:"unlock=true",
    type:"POST"
  }).responseText;
  

  Because it's not async, in theory it should pause browser execution until the results of this call is returned.

• I managed to get this working in IE7 and Firefox 3 by using the body onbeforeunload event. I make a call using XmlHttpHandler to an asp.net http handler that unlocks the query. I had to set the state changed event handler to be null so there was no javascript error when it returned.

  The event fires and the page changes, not delaying the user.