HTML5, CSS3 & JS Experiments

By Martin Ivanov

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);
    });
})();