Request.JSON

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

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

new Request.JSON({
    url: '/echo/json/',
    data: {
        json: JSON.encode({
            map: 'planet earth',
            countries:
  [{
    "name": "WORLD",
    "population": 6916183000
  },
  {
    "name": "More developed regions",
    "population": 1240935000
  },
  {
    "name": "Less developed regions",
    "population": 5675249000
  }]
        }),
        delay: 3
    },
    onSuccess: function(response) {
        show_response(response, $('post'));
    }
}).send();

show_response = function(obj, result) {
    $H(obj).each(function(v, k) {
        if(typeof v === 'object')
            v.each(function(sv, sk) {
                if(typeof sv === 'object')
                    for(var fk in sv){
                        new Element('li', {
                            text: fk + ': ' + sv[fk]
                        }).inject(result);
                    }
                else
                    new Element('li', {
                        text: sk + ': ' + sv
                    }).inject(result);
            });
        else
            new Element('li', {
                text: k + ': ' + v
            }).inject(result);
    });
    result.highlight();
};