Started out of dissatisfaction with products like ReactJS, AngularJS and VueJS, Ajah is a fairly simple progressive Ajaxifier for your web application, adding Ajax-style requests and reload-less updates to your site without breaking compatibility with non-JS clients.
On a link or form button:
data-ajah-replace="<id of the node to inject>"
Ajah is free and open source (BSD-like license).
On a link, Ajah reads the href to fetch the HTML.
On a form button, Ajah reads the action/method attribute of the form,
submits the form and injects the resulting HTML from the redirected request,
this works with both GET/POST forms.
On buttons outside of forms, the form-attribute
will be respected.
You can only perform one AJAH-request at a time (the system will
lock itself), you can use the data-ajah-lock="locked" attribute in your CSS.
Hashes in URLs are also respected.
Ajah emits the following custom events for advanced uses:
| AJAHAttach | before attaching event listeners |
| AJAHLoadStart | before the HTTP request |
| AJAHLoadDone | after receiving HTTP status 200, before callback |
| AJAHLoadFinish | after callback |
| AJAHHTTPError | in case of HTTP error |
You can also manually call Ajah, for instance to implement progressive 'infinite scroll':
function load_more(node) {
if( node.scrollTop >=
(node.scrollHeight - node.offsetHeight)) {
var oldNode = document.getElementById(`page-${page++}`);
Ajah.load({
url: `?page=${page}`,
id: `page-${page}`,
node: oldNode,
apply: 'after' });
}
}