New HTML5 Web Component – AcidJs-X-AJAX

Continuing my explorations in the amazing field of HTML5 Web Components, which I started last week, I am happy to present my new endeavor:

AcidJs-X-AJAX is a lightweight custom tag, capable of making asynchronous server calls with (almost) no coding client-side. Again, it is built on top of Mozilla’s X-Tags library, and looks like that:

[sourcecode language=”xml”]
<acidjs-xajax
    url="data/person.php"
    action="get"
    params='{"firstName": "Martin", "lastName": "Ivanov", "id": 1234567890}’
    datatype="json"
    id="ajax-panel-01"
    auto="true">
</acidjs-xajax>
[/sourcecode]

Unlike AcidJs.XCheckbox, AcidJsXAjax is not a visual component, but it’s applications are numerous for example – in MV* applications or just pure old AJAX rendering.

Apart from the standard HTML attributes like id, class, data-* etc, here are a few, which are specific to the tag itself:

• url – the request URL (optional)
• action – the HTTP method (optional, default is GET)
• params – query parameters in the form of a JSON object
• datatype – response type (default is text/plain)
• id – the ID of the panel
• auto – if set to “true”, the AJAX call will be executed right after the tag is added to the page.

These properties are also standard getters and setters, so you could do:

[sourcecode language=”javascript”]
document.querySelector("#ajax-panel-01").url;
document.querySelector("#ajax-panel-01").url = "path/to/resource/";
[/sourcecode]

AcidJsXAjax comes also with an easily extensible API and custom events:

• load()
• getResponseData()
• success
• error

The demo of the component and also it’s code and download link are available on this page.