MooTools Demos - Request.JSON

Request.JSON

Request is the basic XHR request class in MooTools. While not extremely useful on its own, it provides the basic functionality for both Request.HTML and Request.JSON.

// This is our JSON data which the server will return
// We will send this data to the server which our demo runner and jsfiddle will return
var data = {"previews":[
	{"name":"Blue Earth", "src":"earth-blue.jpg", "description":"A blue version of Earth.", "views":200},
	{"name":"User Profile", "src":"user.jpg", "description":"A chubby user guy.", "views":0},
	{"name":"Mouse", "src":"mouse.jpg", "description":"Standard mouse icon.", "views":99},
	{"name":"Gold Earth", "src":"earth-gold.jpg", "description":"A gold version of Earth.", "views":7855},
	{"name":"Page and Pencil", "src":"edit.jpg", "description":"A piece of paper and a pencil.", "views":5},
	{"name":"Speaker", "src":"speaker.jpg", "description":"A speaker.", "views":16},
	{"name":"Orange Monitor", "src":"monitor.jpg", "description":"A yellow, glowing monitor.", "views":355},
	{"name":"Software Box", "src":"package.jpg", "description":"A nice wrapped package in a box.", "views":23452},
	{"name":"FIRE!!!!", "src":"fire.jpg", "description":"Orange flame.", "views":395},
	{"name":"Screwdriver Paper", "src":"setting.jpg", "description":"An always useful screwdriver.", "views":42}
]};

window.addEvent('domready', function() {

var images_path = 'demos/Request.JSON/images/';
	var gallery = $('gallery');

var addImages = function(images){
		images.each(function(image){
			var el = new Element('div.preview'),
				name = new Element('h3', {'html': image.name}).inject(el),
				desc = new Element('span', {'html': image.description}).inject(name, 'after'),
				img = new Element('img', {'src': images_path + image.src}).inject(desc, 'after'),
				footer = new Element('span').inject(img, 'after');

if (image.views > 50 && image.views < 250) footer.set({'html': 'popular', 'class': 'popular'});
			else if (image.views > 250) footer.set({'html': 'SUPERpopular', 'class': 'SUPERpopular'});
			else footer.set({'html': 'normal', 'class': 'normal'});

el.inject(gallery);
		});
	};

$('loadJSON').addEvent('click', function(e){
		e.stop();

var request = new Request.JSON({

url: '/echo/json/',

onRequest: function(){
				gallery.set('text', 'Loading...');
			},

onComplete: function(jsonObj) {
				gallery.empty();
				addImages(jsonObj.previews);
			},

data: { // our demo runner and jsfiddle will return this exact data as a JSON string
				json: JSON.encode(data)
			}

}).send();
	});

$('clearJSON').addEvent('click', function(e){
		e.stop();
		gallery.empty();
	});

});

Demo
Docs
CSS
HTML
JavaScript

Use a JSON request when you have complex data which you would like to send in a JavaScript-readable format to a handling method on the client side. The first method passed to a Request.JSON onComplete method is the data object represented in the JSON code which was returned by the server. For more information on the JSON format, see json.org.

load JSON Data | clear JSON Data

Documentation References:

Request.JSON

window.addEvent('domready', function() {

var images_path = 'demos/Request.JSON/images/';
	var gallery = $('gallery');

el.inject(gallery);
		});
	};

$('loadJSON').addEvent('click', function(e){
		e.stop();

var request = new Request.JSON({

url: '/echo/json/',

onRequest: function(){
				gallery.set('text', 'Loading...');
			},

onComplete: function(jsonObj) {
				gallery.empty();
				addImages(jsonObj.previews);
			},

data: { // our demo runner and jsfiddle will return this exact data as a JSON string
				json: JSON.encode(data)
			}

}).send();
	});

$('clearJSON').addEvent('click', function(e){
		e.stop();
		gallery.empty();
	});

});

MooTools

Demos

Slick

Drag and Drop

Effects

Events

Request

Plugins

Request.JSON

Documentation References: