How to use ajaxmanager with jquery ajax request? - ajax

Question

I'm trying to use the ajax blockmanager plugin to manage my jquery ajax requests, but I'm not sure how to implement it...
// Follow button click event
$('#loginBtn').click(function () {
var that = this;
var request = {
'username': $('#txtUsername').val(),
'password': $('#txtPassword').val()
};
var params = $.toJSON(request);
ajaxManager.add($.ajax({
type: "POST",
url: "ajax/Login.aspx/Login",
data: params,
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (result) {
if (result.d === true) {
window.location = "dashboard.aspx";
}
else {
$('#errorMessage').slideDown();
}
}
}));

Answer 1

I know it's a bit outdated question... But if anyone comes across this issue:
You are passing the already created/started request as a parameter to the manager.
You should only pass its options. The request will be created and handled by the manager.
ajaxManager.add({
type: "POST",
url: "ajax/Login.aspx/Login",
data: params,
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (result) {
if (result.d === true) {
window.location = "dashboard.aspx";
}
else {
$('#errorMessage').slideDown();
}
}
});

Answer 2

Do you have ajaxManager instantiated?
//create an ajaxmanager named cacheQueue
var ajaxManager = $.manageAjax.create('cacheQueue', {
queue: true,
cacheResponse: true
});

Answer 3

You first create the manager
this.ajaxManager = $.manageAjax.create("aiapi", {
queue: true,
cacheResponse: true,
maxRequests: 3,
abort: this.abortCallback
});
where the queue of calls is active, max concurrent requests are 3, and the caching is enabled. The common abortCallback is like
this.abortCallback = function (response) {
Logger.log("APIManager.abortCallback " + Utils.toString(response));
};
It's convenient to add the common ajaxSetup setup like
$.ajaxSetup({
cache: true,
timeout: 10 * 1000
});
Here you can see the response timeout in msec set to 10 sec.
You then do a GET like
this.DoGet = function (url, method, timeout) {
return new Promise((resolve, reject) => {
var options = {
type: 'GET',
url: url + method,
contentType: "application/json",
timeout: (15 * 1000) // sets timeout to 60 seconds
};
if (timeout) options.timeout = timeout;
const errorCallback = function (error) {
console.error(error);
return reject(error);
};
const successCallback = function (data) {
return resolve(data);
};
const completeCallback = function (data) {
return resolve(data);
};
options.error = errorCallback;
options.success = successCallback;
//options.complete= completeCallback;
$.manageAjax.add("default-queue", options);
/*$.ajax(options)
.done(function (data) {
return resolve(data);
})
.fail(function (error) {
console.error(error);
return reject(error);
})
.always(function () {
// called after done or fail
});*/
});
You can see in the comment the version without the ajax manager. And it the same way to POST is like
this.DoPost = function (url, method, body, timeout) {
try {
body = JSON.stringify(body);
} catch (error) {
console.error(body);
return reject(error);
}
return new Promise((resolve, reject) => {
var options = {
type: 'POST',
url: url + method,
data: body,
contentType: "application/json",
dataType: 'json',
timeout: (15 * 1000) // sets timeout to 60 seconds
};
if (timeout) options.timeout = timeout;
const errorCallback = function (error) {
console.error(error);
return reject(error);
};
const successCallback = function (data) {
return resolve(data);
};
options.error = errorCallback;
options.success = successCallback;
$.manageAjax.add("default-queue", options);
/*$.ajax(options)
.done(function (data) {
return resolve(data);
})
.fail(function (error) {
console.error(error);
return reject(error);
})
.always(function () {
// called after done or fail
});*/
});
}//DoPost
The important thing here is the name of the ajax queue when adding a new GET / POST request via the api
$.manageAjax.add("default-queue", options);
This means basically that you can have one or more queues, that improves your requests parallelism.