$.ajax call throws error when browsing to another page before the request is done

Question

This is a difficult question for me to Google, so here goes.

I've encountered a problem in Firefox (does not happen in IE) where my Javascript kicks off a call to a service, which may take a little time to load. If the user navigates to another page before the call finishes, the error method of the jQuery.ajax() object is called.

I am looking for a way to either:

1. Not have the error thrown when the user browses to another page when the request hasn't finishes, OR
2. Have the error method distinguish between "real" errors and this error.

My error method, not surprisingly, shows the user an error, and I do not want to do this when the error is caused by navigating to another page.

My simple test code involves the following Javascript and a service that sleeps for 20 seconds then returns a string.

<script type="text/javascript" language="javascript">
    $(document).ready(function ()
    {
        $('#testLink').click(function ()
        {
            $.ajax({
                type: "POST",
                url: "/Services/NU.Web.NUnet.Services.UserService.asmx/LongRunningService",
                data: "{}",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (data, textStatus, xhr)
                {
                    console.log(data);
                    console.log(textStatus);
                    console.log(xhr);
                },
                error: function (xhr, textStatus, errorThrown)
                {
                    console.log(xhr);
                    console.log(textStatus);
                    console.log(errorThrown);
                }
            });
        });
    });
</script> 

Answer 1

Try:

<script type="text/javascript" language="javascript">
    $(function() {
        $('#testLink').click(function() {
            $.ajax({
                type: "POST",
                url: "/Services/NU.Web.NUnet.Services.UserService.asmx/LongRunningService",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (data, textStatus, xhr){
                    console.log(data);
                    console.log(textStatus);
                    console.log(xhr);
                },
                error: function (xhr, textStatus, errorThrown) {
                    if (xhr.status === 500) {
                        console.log(xhr);
                        console.log(textStatus);
                        console.log(errorThrown);
                    }
                }
            });
        });
    });
</script>