New HTML5 Web Component – AcidJs-X-AJAX

HTML5, CSS3 and JavaScript

The Fine Art of Web Development by Martin Ivanov

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

x-ajax-html5-web-component

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:

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:

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

Categories and Tags
Links

© 2006 - 2023 Martin Ivanov