Simple Ajax wrapper for Magento/Prototype.js

ajaxbackend.js

var AjaxBackend = Class.create();

AjaxBackend.prototype = {

    initialize: function(url) {

        this.url = url;

    },

    submit: function(){

        this.request({

            // build request here

        });

    },

    request: function(params){

        new Ajax.Request(this.url, {

            method: 'post',

            parameters: params,

            onSuccess: this.finished

        });

    },

    finished: function(response){

        // handle response here

    }

}

example.phtml

<input class="input-text" type="text" id="foo" />

<input class="input-text" type="text" id="bar" />

<button type="button" onclick="ajaxExample.submit()" class="button">
    <span><span>Submit</span></span>
</button>

<script type="text/javascript">
    //<![CDATA[
    var ajaxExample = new AjaxBackend('<?php echo Mage::getUrl('example/controller/action') ?>');
    
    ajaxExample.submit = function(){
    
        this.request({
            foo: $('foo').value,
            bar: $('bar').value
        });
    
    };
    
    ajaxExample.finished = function(response){

        console.log(response.responseText);

    };
    //]]>
</script>