Ajax.abort() not working

本文关键字：not working abort Ajax | 更新日期: 2023-09-27 18:10:03

我已经阅读了很多解释ajax.abort()应该如何工作的页面，但由于某种原因，我无法将其用于我的情况。下面是我的代码:

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

当我单击Cancel Upload按钮时，ajax抛出一个错误。错误状态为"error"和xhr。responseText为空。我做错了什么?

Ajax.abort() not working

Abort()触发Ajax中的error()。这是JQuery的标准行为。

这样做是为了检测错误而不是中止:

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

下面是这个行为的引用:http://paulrademacher.com/blog/jquery-gotcha-error-callback-triggered-on-xhr-abort/

相关文章：