Skip to content

Vanilla JavaScript library, which designed to make simple ajax-requests

License

Notifications You must be signed in to change notification settings

Kir-Antipov/SimpleAjax

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

30 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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