simple-ajax-vanilla

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