JavaScript: visualizzare i tweet di Twitter senza jQuery

jQuery dispone già di un metodo $.getJSON(). Tuttavia se vogliamo imparare la programmazione web in JavaScript dobbiamo anche fare a meno di soluzioni già pronte. In questo articolo vedremo come reperire il nostro ultimo tweet da Twitter senza jQuery.

Dobbiamo usare l'oggetto XMLHttpRequest per eseguire una richiesta AJAX remota. Il problema è che l'oggetto JSON restituito da Twitter è di tipo JSONP (JSON with Padding). Questo tipo di risposta prevede che il parametro callback=? sia sostituito dal nome di una funzione globale che effettuerà il parsing della risposta, ossia al posto del punto interrogativo andrà il nome della nostra funzione.

Potremmo risolvere il problema in modo procedurale con funzioni globali, ma questo è l'approccio peggiore in JavaScript. Useremo invece un approccio OOP e legheremo il metodo di callback del nostro oggetto all'oggetto window in modo che possa funzionare con il parametro JSONP.

Definiamo il nostro oggetto in una sandbox e lo rendiamo accessibile legandolo all'oggetto window:


(function() {
    var Lib = {
        ajax: {
        	// qui il codice
        }
    };
    
    window.Lib = Lib; // ora l'oggetto è visibile
})()

Il nostro oggetto ajax avrà come primo membro un metodo che crea un'istanza dell'oggetto XMLHttpRequest:


ajax: {
	xhr: function() {
		var instance = new XMLHttpRequest();
		return instance;
	}	
}

Ora il metodo getJSON(). Si tratta di una normale richiesta AJAX, ma con un'importante eccezione: dobbiamo creare uno script locale nella pagina usando il file JSON remoto e quindi legare la funzione di callback del nostro metodo all'oggetto window in modo che sia accessibile:


getJSON: function(options, callback) {
	var xhttp = this.xhr(); // Istanza dell'oggetto XMLHttpRequest
    options.url = options.url || location.href; // URL della richiesta
    options.data = options.data || null; // Stringa di dati da inviare
    callback = callback || function() {}; // Callback
    options.type = options.type || 'json';
    var url = options.url;
    if (options.type == 'jsonp') {
        window.jsonCallback = callback; // Ora callback() è accessibile
        var $url = url.replace('callback=?', 'callback=jsonCallback');
        var script = document.createElement('script');
        script.src = $url;
        document.body.appendChild(script); // Script locale
     }
     xhttp.open('GET', options.url, true);
     xhttp.send(options.data);
     xhttp.onreadystatechange = function() {
     	if (xhttp.status == 200 && xhttp.readyState == 4) { // Richiesta completata?
         	callback(xhttp.responseText); // Parsing dell'oggetto JSON
        }
     };
}

Esempio d'uso:


Lib.ajax.getJSON({
        url: 'https://api.twitter.com/1/statuses/user_timeline.json?&screen_name=gabromanato&callback=?&count=1',
        type: 'jsonp'
    }, function(tweet) {
        document.querySelector('#tweet').innerHTML = tweet[0].text;
});
​
Torna su