Ajax Requests

The jSuites.ajax is abstraction layer library to manage JavaScript AJAX requests. It is a vanilla implementation with familiar syntax and few extra useful things on top, such as:

Familiar syntax: similar to other libraries.
No dependencies: no external files.
Queue management: parallel or dependent requests.
Oncomplete method: multiple requests with on complete request event.
Data helpers: onbeforesend to overwrite the submittion.

Basic request example

<html>
<script src="https://jsuites.net/v4/jsuites.js"></script>
<link rel="stylesheet" href="https://jsuites.net/v4/jsuites.css" type="text/css" />

<script>
jSuites.ajax({
    url: url,
    method: 'POST',
    dataType: 'json',
    data: { data: JSON.stringify(data) },
    beforeSend: function(xhr) {
        if (token) {
            xhr.setRequestHeader("Authorization", "Bearer " + token);
        }
    },
    success: function(result) {
        // Result
        jSuites.notification(result);
    },
    error: function() {
        alert('disconected');
    }
});
</script>
</html>

Before send event

Intercept the request and add a authorization bearer to the request.

<html>
<script src="https://jsuites.net/v4/jsuites.js"></script>
<link rel="stylesheet" href="https://jsuites.net/v4/jsuites.css" type="text/css" />

<script>
jSuites.ajax({
    url: url,
    method: 'POST',
    dataType: 'json',
    data: { data: JSON.stringify(data) },
    beforeSend: function(xhr) {
        if (token) {
            xhr.setRequestHeader("Authorization", "Bearer " + token);
        }
    },
    success: function(result) {
        // Result
        jSuites.notification(result);
    },
    error: function() {
        alert('disconected');
    }
});
</script>
</html>

Ajax request queue

With the property queue: true a new ajax request only happens when the previous one is complete.

<html>
<script src="https://jsuites.net/v4/jsuites.js"></script>
<link rel="stylesheet" href="https://jsuites.net/v4/jsuites.css" type="text/css" />

<script>
for (var i = 0; i < 10; i++) {
    jSuites.ajax({
        url: url,
        method: 'POST',
        dataType: 'json',
        queue: true,
        data: { data: JSON.stringify(data) },
        success: function(result) {
        }
    });
}
</script>
</html>

Multiple requests with oncomplete

The following example will create one call a single event when all requests have been completed.

<html>
<script src="https://jsuites.net/v4/jsuites.js"></script>
<link rel="stylesheet" href="https://jsuites.net/v4/jsuites.css" type="text/css" />

<script>
var requests = [];
for (var i = 0; i < 10; i++) {
    requests.push({
        url: url,
        method: 'POST',
        dataType: 'json',
        success: function() {
        }
    });
}

jSuites.ajax(requests, function(result) {
    // All requests have been completed
    jSuites.notification(result);
});
</script>
</html>

Edit this page on GitHub