SimpleAjax.js

SimpleAjax.js - vanilla JavaScript library, which designed to make simple ajax-requests

Usage

// GET request to specified URL without parameters
ajax(url);

// or
ajax(url, options);

// HTMLFormElement (<form>) could be a single argument
// if it has an `action` attribute, which will be used as `url`.
// Its `method` attribute will be used as `method`. 
ajax(form);

// or
ajax(form, options);

// or just
ajax(options);

Options

• url (string) - requested resource's url
• method (or type) (string) - request method (GET, POST, HEAD etc)
• data (or content) (object | HTMLFormElement | string) - object, form (or its selector)
• success (function(AjaxResult)) - callback on successful request completion
• error (function(AjaxResult)) - callback on request failure
• statusCode (object) - an object of numeric HTTP codes and functions to be called when the response has the corresponding code
• headers (object) - dictionary of request headers
• beforeSend (function(XMLHttpRequest)) - function for modifying a request before sending it
• beforeReturn (function(AjaxResult, XMLHttpRequest)) - function for modifying a response before returning it
• modifier (object) - object with properties beforeSend or/and beforeReturn (works the same as the functions above)

AjaxResult

• response
• value (object) - Object containing the response to the request, or null if the request was unsuccessful or it can't be parsed as JSON
• document (document) - Document containing the response to the request, or null if the request was unsuccessful or it can't be parsed as XML or HTML
• text (string) - DOMString that contains the response to the request as text
• url (string) - serialized URL of the response or the empty string if the URL is null
• type (string) - value that defines the response type
• status (number) - unsigned short with the status of the response of the request
• statusText (string) - DOMString containing the response string returned by the HTTP server
• hasError (boolean) - true if server returned an error code
• headers (object) - dictionary of response headers

Examples

ajax("https://api.nuget.org/v3/index.json", {
    statusCode: {
        200: function(response) {
            console.log("HTTP 200");
        }
    },
    success: function(response) {
        console.log("Success :)");
    },
    error: function(response) {
        console.log("Error :(");
    }
});

ajax({ url: "https://api.nuget.org/v3/index.json" })
    .then(response => console.log(response.hasError ? "Error :(" : "Success :)"));

let response = await ajax("https://api.nuget.org/v3/index.json");
console.log(response.value);

<form action="https://api.nuget.org/v3/index.json" method="get">
    <input name="version" placeholder="NuGet version" type="text" readonly>
    <input type="submit" value="Get NuGet version!">
</form>

<script>
    document.querySelector("form").addAjax(function ({ response }) {
        this["version"].value = response.value.version;
    },
    {
        // Pre-submit handler
        // If this function will return false,
        // request processing will be canceled
        confirmation: () => confirm("Are you shure?"),

        // The time (in ms) at which repeated requests are blocked
        interval: 500
    });
</script>

Install

Via npm:

npm i simple-ajax-vanilla

Via JSDelivr:

<script src="https://cdn.jsdelivr.net/npm/simple-ajax-vanilla/src/simpleAjax.min.js"></script>

Manually:

Simply download simpleAjax.min.js from the latest release and add it to your project