Request.JSON

sending a JSON request to the jsFiddle backend. Later on parse and display the data.

by kentaromiura

HTML

<div class='wrapper'>
    <p>JSON will be received in 3 seconds</p>
    <ul id='post'></ul>
</div>

CSS

body {
    font-family: Helvetica, Sans, Arial;
}
p, ul {
    padding: 10px;
}
ul {
    margin: 5px;
    border: 2px dashed #999;
}

JavaScript

var EventHandler = new (new Class({Implements:[Events]}))();

var requestNumber = 2;
var Response = {};
new Request.JSON({
    url: '/echo/json/',
    data: {
        json: JSON.encode({
            text: 'some text',
            array: [1, 2, 'three']
        }),
        delay: 3
    },
    onSuccess: function(response) {
        EventHandler.fireEvent('success', {response:response});
    }
}).send();

new Request.JSON({
    url: '/echo/json/',
    data: {
        json: JSON.encode({
            object: {
                par1: 'another text',
                par2: [3, 2, 'one'],
                par3: {}
            }
        }),
        delay: 2
    },
    onSuccess: function(response) {
        EventHandler.fireEvent('success', {response:response});
    }
}).send();



show_response = function(obj, result) {
    Object.each(obj, function(v, k) {
        new Element('li', {
            text: k + ': ' + v
        }).inject(result);
    });
    result.highlight();
};


EventHandler.addEvent('success', function(event){
    Object.each(event.response,function(value, key){
       Response[key] = value;
    })
    requestNumber-=1;
    if(requestNumber == 0){
        EventHandler.fireEvent('load', {
            obj:Response,result:$('post')
        });
    }
});

EventHandler.addEvent('load', function(event){
    show_response(event.obj, event.result);
})