Declarative AJAX Panel
X-Ajax is an easy to use HTML5 Web Component for handling AJAX calls, built on top of the exciting new technology called HTML5 Web Components. Usage is as simple as:
<acidjs-xajax
url="pages/x-ajax-html5-web-component/example/data/person.json"
action="get"
params='{"firstName": "Martin", "lastName": "Ivanov", "id": 1234567890}'
dataType="json"
id="ajax-panel-01"
auto="true">
</acidjs-xajax>
Demo
The examples on this page run in your browser's console, but of course the application scenarios are countless. Press F12 and reload the page. Check the documentation in AcidJs.XAjax/classes/XAjax.html to learn how to configure, use, utilize the API or further develop acidjs-xajax.
Register Mozilla's X-Tags
You need to do this just once, and add the directive either in the <head /> section or before the closing <body /> tag of the page.
<script src="AcidJs.XAjax/lib/x-tag-components.js"></script>
Register the Component on the Page via HTML5 @import
You need to do this just once, and add the directive either in the <head /> section or before the closing <body /> tag of the page.
<link rel="import" href="pages/x-ajax-html5-web-component/example/AcidJs.XAjax/classes/XAjax.html" />
HTML Attributes
Check the blogpost or the documentation in the distrubution file (the download link is at the top of the page).
JavaScript API: Methods, Getters and Setters
Check the blogpost or the documentation in the distrubution file (the download link is at the top of the page).
Usage and Code Insight
<p>The examples on this page run in your browser's console, but of
course the application scenarios are countless. Press F12
and reload the page. Check the documentation in AcidJs.XAjax/classes/XAjax.html
to learn how to configure, use, utilize the API or further develop acidjs-xajax.</p>
<acidjs-xajax
url="pages/x-ajax-html5-web-component/example/data/person.json"
action="get"
params='{"firstName": "Martin", "lastName": "Ivanov", "id": 1234567890}'
datatype="json"
id="ajax-panel-01"
auto="true">
</acidjs-xajax>
<acidjs-xajax
url="pages/x-ajax-html5-web-component/example/data/person.html"
action="get"
datatype="html"
params='{"firstName": "Martin", "lastName": "Ivanov", "id": 1234567890}'
id="ajax-panel-02"
auto="true">
</acidjs-xajax>
<acidjs-xajax
url="pages/x-ajax-html5-web-component/example/data/person.txt"
action="get"
datatype="text"
params='{"firstName": "Martin", "lastName": "Ivanov", "id": 1234567890}'
id="ajax-panel-04"
auto="true">
</acidjs-xajax>
(function() {
"use strict";
var
console = window.console;
// bind to the success and error events of acidjs-xajax#ajax-panel-01
$("#ajax-panel-01").on("success", function(event, response) {
console.log(event.type, event.target.dataType, response.person);
});
$("#ajax-panel-01").on("error", function(event, response) {
console.log(event.type, event.target.dataType, response);
});
// bind to the success and error events of acidjs-xajax#ajax-panel-02
$("#ajax-panel-02").on("success", function(event, response) {
console.log(event.type, event.target.dataType, response);
});
$("#ajax-panel-02").on("error", function(event, response) {
console.log(event.type, event.target.dataType, response);
});
// bind to the success and error events of acidjs-xajax#ajax-panel-04
$("#ajax-panel-04").on("success", function(event, response) {
console.log(event.type, event.target.dataType, response);
});
$("#ajax-panel-04").on("error", function(event, response) {
console.log(event.type, response);
});
})();