Ajax Requests

The jSuites library includes a internal ajax requests abstraction layer. It is a basic vanilla implementation with a familiar syntax and few extra nice things on top.

  • 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://bossanova.uk/jsuites/v3/jsuites.js"></script>
<link rel="stylesheet" href="https://bossanova.uk/jsuites/v3/jsuites.css" type="text/css" />

</script>
document.querySelector('jsuites-color').addEventListener('onchange', function(a,b,c) {
    // Set the font color
    e.target.children[0].style.color = this.value;
    // Show on console
    console.log('New value:' + this.value);
});
</script>
</html>

Before send event

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

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');
    }
});

Ajax request queue

Create a queue of requests. A request happens only after the first one is completed.

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) {
            jSuites.notification(result);
        }
    });
}