c# - Ajax.abort() not working -

c# - Ajax.abort() not working -

i have read lot of pages explaining how ajax.abort() should work reason cannot work situation. here code 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 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 download progress var percentloaded = math.round((evt.loaded / evt.total) * 100); progressbar.css("width", percentloaded + '%'); progresspercentage.text(percentloaded + '%'); } }, false); homecoming 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 no info show no info 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 end side alert(xhr.responsetext); //you don't want read that, lol //alert(thrownerror); //right downwards 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 click cancel upload button, ajax throws error. status of error "error" , xhr.responsetext blank. doing wrong? help appreciated.

abort() triggers error() in ajax. jquery's standard behavior.

do observe error not abort:

error: function (jqxhr, textstatus, errorthrown) { if (textstatus != "abort") { // aborting triggers error textstatus = abort. alert(errorthrown.message); } }

here reference of behavior: http://paulrademacher.com/blog/jquery-gotcha-error-callback-triggered-on-xhr-abort/

c# jquery asp.net ajax