This is a helper function for making AJAX requests.
To use this function, call it with an options object. The options object should contain any or all of the following properties:
url
(optional, default: current page) - The URL to send the request to.type
(optional, default: GET) - The HTTP method to use for the request.async
(optional, default: true) - Whether to perform the request asynchronously.data
(optional) - Data to be sent to the server. If the HTTP method is one that cannot have an entity body, such as GET, the data is appended to the URL.headers
(optional) - HTTP headers to be sent with the request.beforeSend
(optional) - A function to be called before the request is sent.progress
(optional) - A function to be called periodically while the request is in progress.success
(optional) - A function to be called when the request is successful.failure
(optional) - A function to be called when the request fails.complete
(optional) - A function to be called when the request is complete (whether it succeeded or failed).error
(optional) - A function to be called when the request couldn’t be made. E.g., network failure, cross-origin accessabort
(optional) - A function to be called if the request is aborted.timeout
(optional) - The local timeout (in milliseconds) for the request.ontimeout
(optional) - A function to be called if the request times out.
Here are a few examples showing how to use this function:
ajax({
// url Specifies the URL to send the request to. Default is the current page
url: "http://localhost/",
type: 'GET',
async: true, // default: true
// Data to be sent to the server. If the HTTP method is one that cannot have an entity body, such as GET, the data is appended to the URL.
data: {
'foo': 'bar',
},
headers: {},
beforeSend: () => {
// Returning false in the beforeSend function will cancel the request.
// return false;
},
progress: (xhr, loaded, total) => {
console.log('progress');
// Triggered periodically until the response is fully downloaded.
// Using this event, we can track how much data is downloaded from the server.
if (total) {
console.log(`${loaded} of ${total}`);
} else {
console.log(`${loaded} downloaded`);
}
},
success: (xhr, data) => {
console.log('success', data);
},
failure: (xhr, data) => {
console.log('failure', data);
},
// The load event is triggered when an XMLHttpRequest is completed successfully
// (even if HTTP status is 400 or 500) and the response is fully downloaded.
complete: (xhr) => {
// A function to be called when the request finishes (after success and error/failure callbacks are executed).
console.log('complete');
},
// When the request couldn’t be made. E.g., network failure, cross-origin access
error: (xhr, error) => {
console.log('Unable to make request');
},
abort: (xhr) => {
console.log('abort');
},
timeout: null, // timeout The local timeout (in milliseconds) for the request
ontimeout: (xhr) => {
console.log('ontimeout');
},
});
ajax({
url: "http://localhost/",
data: {
'foo': 'bar',
},
beforeSend: () => {},
progress: (xhr, loaded, total) => {
if (total) {
console.log(`${loaded} of ${total}`);
} else {
console.log(`${loaded} downloaded`);
}
},
success: (xhr, data) => console.log('success', data),
failure: (xhr, data) => console.log('failure', data),
complete: (xhr) => console.log("Response from server = ", xhr.responseText),
error: (xhr, error) => console.log('Unable to make request'),
});
ajax({
url: 'http://localhost/',
complete: (xhr) => console.log("Response from server = ", xhr.responseText),
});