Cancel Ajax Request Using JQuery
> Here we consider how to Abort Ajax Request Using JQuery.
> Lets start with a simple example here.
> Following are the code for Jquery Ajax Request.
var request = $.ajax({
type: "POST",
async: "true",
url: "WebForm1.aspx/GetData",
contentType: "application/json; charset=utf-8",
success: function (data) {
alert('Success');
},
error: function () {
alert('Something went wrong. Please Try Again');
}
});
> The code behind is as follows.
[WebMethod]
public static void GetData()
{
// Execute Login Here.
}
});
> Now for aborting the Ajax Request we have to use abort() method.
> That means here we have to use request.abort() after Ajax Request.
request.abort();
var request = $.ajax({
type: "POST",
async: "true",
url: "WebForm1.aspx/GetData",
contentType: "application/json; charset=utf-8",
success: function (data) {
alert('Success');
},
error: function () {
alert('Something went wrong. Please Try Again');
}
});
request.abort();
> But there are some exceptions in this flow of exection.
> If request.abort() execute before sending Request, current HTTP request will get aborted.
> If request.abort() execute after sending Request, then HTTP request complete its task.
> But Ajax Success will not get triggered. Instead Ajax Error will get triggered.
> Please watch the video for demo example.
> Before starting any ajax call, validate whether the ajax request is null.
var request;
if (request != null){
request.abort();
request = null;
}
// Start Ajax Request Here....
Watch Video of this Content on Video Steaming