Ajax.abort（）不起作用

Question

I have read a lot of pages explaining how ajax.abort() should work but for some reason I cannot get this to work with my situation. Here is the code I have:

    <script type="text/javascript">
        $(document).ready(function () {

...

            function abortxhRequest() {
                xhRequest.abort();
            }

            var xhRequest
            function SendFileToServer(blob, fileName) {
                if (xhRequest) {
                    xhRequest.abort();
                }
                xhRequest = $.ajax({
                    xhr: function () {
                        var xhr = new window.XMLHttpRequest();
                        //Upload progress
                        xhr.upload.addEventListener("progress", function (evt) {
                            if (evt.lengthComputable) {
                                //Do something with upload progress
                                var percentLoaded = Math.round((evt.loaded / evt.total) * 100);
                                progressBar.css("width", percentLoaded + '%');
                                progressPercentage.text(percentLoaded + '%');
                            }
                        }, false);
                        //Download progress
                        xhr.addEventListener("progress", function (evt) {
                            if (evt.lengthComputable) {
                                //Do something with download progress
                                var percentLoaded = Math.round((evt.loaded / evt.total) * 100);
                                progressBar.css("width", percentLoaded + '%');
                                progressPercentage.text(percentLoaded + '%');
                            }
                        }, false);
                        return xhr;
                    },
                    type: "POST",
                    url: "myPage.aspx/SendFileToServer",
                    data: "{blob: \"" + blob + "\", fileName: \"" + fileName + "\"}",
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success: function (msg) {

                        // If there was no data show No Data display
                        if (msg.d == "success") {
                            $("#spManagePhoto").html("Complete!");
                            setTimeout(function () {
                                $("#divManagePhotoTakePhoto").show();
                                $("#divManagePhotoUploading").hide();
                            }, 2000);
                        }
                    },
                    error: function (xhr, status, thrownError) {      //Something went wrong on front side
                            alert(xhr.responseText);                      //You don't want to read all that, lol
                            //alert(thrownError);                         //Right down to the point
                    }
                });
            }
        });

...

    </script>
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
...
            <div id="divManagePhotoUploading">
                <center>
                    <div class="marginTop10"><span id="spManagePhoto" class="SubmittingText"></span></div>
                    <div class="marginTop20"><img src="Images/ajax-loader.gif" alt="Loading..." /></div>
                </center>
                <div id="divProgressBarShell" class="ui-corner-all">
                    <div style="margin:5px; position:relative">
                        <div id="progress_bar">
                            <table border="0" cellpadding="0" cellspacing="0" style="width:100%; height:100%"><tr align="center"><td valign="middle">
                                <div class="percent"></div>
                                <label class="PercentLabel">0%</label>
                            </td></tr></table>
                        </div>
                    </div>
                </div>
                <div>
                    <button onclick="abortxhRequest();" class="nav-button2" style="display:block">Cancel Upload</button>
                </div>
            </div>
...
</asp:Content>

When I click the Cancel Upload button, ajax throws an error. Status of the error is "error" and xhr.responseText is blank. What am I doing wrong? Any help with this is greatly appreciated.

Answer 1

Abort() triggers the error() in Ajax. This is JQuery's standard behavior.

Do this to detect error but not abort:

error: function (jqXHR, textStatus, errorThrown) {
   if (textStatus != "abort") { // aborting actually triggers error with textstatus = abort.
      alert(errorThrown.message);
   }
}

Here is a reference of this behavior: http://paulrademacher.com/blog/jquery-gotcha-error-callback-triggered-on-xhr-abort/