MooTools Ajax: come effettuare richieste Ajax con MooTools

Nell’articolo “jQuery Ajax: come effettuare richieste Ajax tramite jQuery” abbiamo visto come poter effettuare delle chiamate Ajax utilizzando il noto framework JavaScript jQuery. Oggi vedremo come interagire con l’oggetto XMLHttpRequest utilizzando un altro famoso framework JS: MooTools.

Come sempre, vi invito a visionare la documentazione ufficiale sull’oggetto Request dove sono elencati e descritti i metodi che si possono utilizzare per costruire chiamate Ajax.

Nell’esempio, che vi illustro di seguito, troverete un div con identificatore univoco “output” dove visualizzeremo il risultato della chiamata che sarà una riga di testo o un paragrafo “lorem ipsum“. Tramite un pulsante con identificatore univoco “bttRequest” richiameremo una pagina PHP (request.php), tramite l’oggetto request, per ottenere in risposta il testo o il paragrafo a seconda di quello che invieremo come parametro “id“.

Se id contiene 1 otterremo in risposta la riga di testo, se contiene 2 otterremo, invece, il paragrafo lorem ipsum. Possiamo decidere cosa ottenere in risposta selezionando il valore comodamente da una select.

Diamo una rapida occhiata al codice HTML:

<div id="output">Status: ok</div>
<select id="choose" name="choose">
<option value="1" selected="selected">Text</option>
<option value="2">Lorem Ipsum</option>
</select>
<input type="button" id="bttRequest" value="Ajax Request" />

Visualizziamo ora il codice MooTools:

<script type="text/javascript" src="mootools.js"></script>
<script type="text/javascript">
 
window.addEvent('domready', function() {
 
		$('bttRequest').addEvent('click', function(event) {
 
		var value = $('choose').get('value');
 
				var myRequest = new Request({
					url: 'request.php',
					method: 'get',
 
					onRequest: function(){
						$('output').set('text', 'loading...');
					},
 
					onSuccess: function(responseText){
						$('output').set('text', responseText);
					},
 
					onFailure: function(responseText){
						$('output').set('text', 'Errore nella richiesta!');
					}
 
				});
				myRequest.send('id=' + value);
		});
 
});
 
</script>

Questo è il codice della pagina PHP:

<?php
 
if ($_GET["id"]==1) {
echo "This is the text";
}
 
if ($_GET["id"]==2) {
echo "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.";
}
 
?>

Potete vedere il codice in azione a questo indirizzo e scaricare i files sorgenti qui sotto

download: MooTools Ajax (39.01KB) added: 20/06/2011 clicks: 248 description: Come effettuare richieste Ajax con MooTools.

RightJS: un ottimo framework JavaScript

Di framework JS ne esistono davvero tanti, molti dei quali, estremamente validi (Dojo, MooTools, Prototype, Script.aculo.us, ExtJS). Il più famoso, utilizzato e “amato” dai web developer è sicuramente jQuery, framework, che io stesso utilizzo in tutti i miei progetti. L’aver trovato il framework “ideale” non placa, però, la mia curiosità e la mia voglia di “guardarmi intorno” alla ricerca di alternative e novità.

Ultimamente mi sono “imbattuto” in un ottimo framework JS rilasciato sotto licenza MIT License; si chiama RightJS e lo trovi alla seguente URL: rightjs.org

L’utilizzo è davvero semplice, chi ha già familiarità con la sintassi di jQuery non avrà alcuna difficoltà ad utilizzare immediatamente RightJS. Ecco un esempio di animazione di tipo Fade:

document.onReady(function() {
new Fx.Fade('elem').start('out');
new Fx.Fade('elem').start('in');
});

Ed un esempio di innerHTML avviato da un click:

$('button').on('click', function() {
$('element').replace('testo inserito tramite rightjs');
});

RightJS supporta la programmazione OOP, Ajax e non manca di una ricca sezione di UI costituita dagli immancabili:

- Autocompleter
- Calendar
- Colorpicker
- Lightbox
- Slider
- Tabs
- Uploader

Anche se non riesci a fare a meno del tuo framework preferito, vale comunque la pena di dargli un’occhiata. Fammi sapere cosa ne pensi

jQTouch: applicazioni per iPhone con un plugin jQuery

Gli sviluppatori web, che realizzano applicazioni per il mobile, hanno finalmente trovato un alleato con cui sviluppare applicazioni per iPhone: jQTouch. Non sto parlando di Objective C/Cocoa ma di un potente plugin per jQuery che permette a chi ha familiarità con HTML/CSS/JavaScript di realizzare applicazioni che si presentano come “native” dell’iPhone, quindi, con grafica, animazioni e funzionalità identiche a quelle delle applicazioni native iPhone.

Per “ricreare” grafica e animazioni tipiche delle applicazioni native iPhone con HTML/CSS/JS si passerebbe obbligatoriamente per un duro lavoro di scrittura del codice mentre, con l’utilizzo di jQTouch, con poche righe di codice e un pò di Ajax si possono realizzare applicazioni identiche in tutto e per tutto a quelle native. Un notevole risparmio di tempo durante la scrittura dell’applicazione ed un vantaggio notevole: in caso di problemi con AppStore o in caso di lunghe attese per la pubblicazione dell’applicazione (o di un suo aggiornamento), è possibile predisporre l’applicazione via web trattandosi infatti di una web application!

Inoltre, realizzare un’applicazione iPhone basata su una web app, permette lo sviluppo della stessa tramite gli ide e software preferiti, non bisogna obbligatoriamente utilizzare MAC e si può utilizzare l’applicazione da qualunque dispositivo dotato di browser web.

Si, ma la pubblicazione dell’applicazione su AppStore?

Esistono strumenti di sviluppo come PhoneGap che convertono applicazioni realizzate con HTML/CSS/JS in applicazioni pronte per essere inviate ad AppStore. Non ho mai utilizzato tale strumento ma, con una veloce googlata, si può vedere che in rete se ne parla molto bene.

jQTouch è opera di David Kaneda. Sotto potete visualizzare un video che mostra il plugin e questo è il canale ufficiale Vimeo di David: davidkaneda.

Se ti interessa jQTouch e lo sviluppo di applicazioni iPhone tramite HTML/CSS/JS iscriviti al feed RSS perchè in futuro parleremo ancora di questi argomenti

jQuery, json e le Twitter API: un esempio pratico

In questo mini tutorial vedremo come è semplice ricavare informazioni dalle API di Twitter utilizzando jQuery, Ajax e il formato Json. In pratica, ricaveremo il parametro “description” dalla API relativa alle informazioni dell’utente (user/show) di cui vogliamo l’informazione. Visualizzeremo il valore description in un div con ID univoco uguale ad “output“. L’unico parametro da inviare è l’username dell’utente Twitter di cui vogliamo conoscere la descrizione.

Per prima cosa scarichiamo jQuery ed includiamo la libreria nella nostra pagina web. Ora inseriamo il seguente codice jQuery modificando il valore “tua_username” con la username dell’utente twitter:

<script type="text/javascript">
 
$(document).ready(function() {
 
jQuery.ajax({
		url: "http://api.twitter.com/1/users/show.json?screen_name=tua_username",
		type: 'GET',
		dataType: 'jsonp',
		timeout: 1000,
		error: function(){ jQuery("#output").html("ERROR!"); },
		success: function(json){
			$('#output').html(json.description);
		}	
	});
 
});
 
</script>

Per ottenere altre informazioni, come ad esempio il numero di followers dell’utente, basterà leggere il relativo parametro. In questo caso utilizzando json.followers_count invece di json.description.

jQuery Ajax: come effettuare richieste Ajax tramite jQuery

Oggi vediamo come effettuare chiamate Ajax utilizzando il famoso framework jQuery. Per prima cosa scarichiamo jQuery dal sito ufficiale e includiamo il file nella nostra pagina web:

<script type="text/javascript" src="jquery.js"></script>

Ora diamo un’occhiata al file PHP al quale faremo la richiesta con Ajax. Il file PHP riceverà un ID integer e ci restituirà una risposta in formato testo, risposta, che visualizzeremo nel div con ID univoco “output“:

<?php
(int)$id = $_GET["id"];
if ($id==1) echo "Chiamata numero 1";
if ($id==2) echo "Chiamata numero 2";
if ($id==3) echo "Chiamata numero 3";
if ($id!=1 && $id!=2 && $id!=3) echo "Parametro non valido!";
?>

Ecco che, con poche righe jQuery, possiamo effettuare la richiesta:

<script type="text/javascript">
$.ajax({
type: "GET",
url: "test.php",
data: "id=1",
success: function(response){
$("#output").html(response);
}
});
</script>

Modificando il valore del parametro id in data, magari inserendo dati in input tramite un form, visualizzeremo il messaggio opportuno a seconda del parametro inviato, in questo caso, un numero intero (1,2 o 3). La risposta testuale fornita dal file PHP è contenuta nel parametro response e la visualizziamo nel div output tramite la riga:

$("#output").html(response);

Questo è un semplice esempio ma, con altrettanta semplicità, potremo realizzare applicazioni complesse senza scrivere un’infinità di righe di codice grazie a un potente framework come jQuery

Ecco 8 errori comuni nella programmazione Ajax da tenere sempre presenti

Nello sviluppo di applicazioni Ajax spesso si commettono errori molto comuni che, invece, si possono evitare tenendoli a mente in fase di progettazione. Ecco una lista di otto errori comuni da tenere sempre a mente:

01) Pagina aggiunta ai bookmarks/segnalibri, che fare?

In una pagina Ajax possono esserci molte quantità di contenuti dinamici restituiti in base alla richiesta dell’utente. Cosa succede se si vuole salvare in un segnalibro un particolare contenuto piuttosto che un altro? Il salvataggio della URL non servirebbe a nulla. Questo è un grosso problema, può essere parzialmente risolto in fase di progettazione prevedendo link permanenti ai vari stati della pagina.

02) Non informare l’utente sullo stato delle richieste

In una pagina Ajax, per ogni interazione o richiesta dell’utente, bisogna informare lo stesso su quello che sta accadendo dopo la sua richiesta visto che la pagina non cambia e rimane sempre la stessa. Per evitare che l’utente pensi che non stia accadendo nulla bisogna presentargli output temporanei come un messaggio testuale o una gif animata che simula un loader.

03) Non prevedere contenuto alternativo ad Ajax/Javascript

In una pagina che utilizza javascript o Ajax bisogna verificare che tali tecnologie siano supportate dal browser usato dall’utente. Se non supportate, gli utenti, devono essere reindirizzati su un’alternativa non Javascript/Ajax o almeno informarlo che deve attivare javascript o utilizzare un browser che supporta tali tecnologie.

04) Dimenticarsi degli Spider

Prima di realizzare un’applicazione Ajax bisogna ricordare che gli spider dei motori di ricerca potrebbero non avere accesso ai contenuti dinamici e, quindi, ovviare prevedendo una sitemap o una pagina statica che contenga i contenuti altrimenti non indicizzabili.

05) Dimenticarsi della cache

Fare diverse richieste GET alla stessa URL spesso può portare a una risposta proveniente dalla cache del browser invece che dal server. Questo problema può essere risolto aggiungendo un numero casuale alla URL a cui si invia la richiesta.

06) Trascurare una cosa importantissima come la sicurezza

Le applicazioni Ajax contengono una grossa quantità di codice lato client. Questa parte di codice può essere visualizzata senza difficoltà da chiunque è quindi importante che non contenga informazioni con dati sensibili o importanti. Le questioni delicate vanno gestite lato server.

07) Non effettuare test

Come per i CSS anche per Javascript, i diversi browser, possono avere interpretazioni diverse. Soprattutto il DOM viene gestito in modo diverso non solo tra i diversi browser ma anche tra le diverse versioni di uno stesso browser. E’ importante testare le proprie applicazioni su più piattaforme e più browser possibili.

08) Non dotare la propria applicazione Ajax di un’interfaccia user-friendly

Forse quest’aspetto è da ricordare più al designer che al programmatore ma, in alcuni casi (come il mio), le due figure coincidono. Ogni applicazione Ajax deve avere un’interfaccia semplice e intuitiva. Gli utenti devono immediatamente comprendere quali sono gli elementi della pagina su cui fare click o con i quali interagire per effettuare una richiesta.

Tu ricordi altri errori comuni che si possono commettere nella programmazione Ajax? Segnalali con un commento

DOM: getElementsByTagName alternativo con PHP

Oggi aguzziamo l’ingegno (che per un programmatore è cosa buona e giusta) e vediamo come accedere a un elemento di una pagina web utilizzando PHP invece del DOM (getElementsByTagName).

Realizziamo un file HTML contenente un numero definito di DIV che non hanno un id univoco ma una stessa classe CSS:

<div class=”list”>Elemento 1</div>
<div class=”list”>Elemento 2</div>
<div class=”list”>Elemento 3</div>
<div class=”list”>Elemento N</div>

Per ogni DIV ci sarà un button che richiamerà una funzione javascript passando il numero del div, stampato dinamicamente grazie a PHP con un ciclo FOR:

<input type=”button” value=”Seleziona” onclick=”javascript:seleziona(<?php echo($i); ?>)” />

La funzione JS stampa con un alert (o il DOM se preferite ) l’elemento selezionato.

Ecco lo script in azione

download: DOM Alternativo in PHP (720B) added: 07/07/2009 clicks: 530 description: Accedere a un elemento della pagina web utilizzando PHP invece del DOM (getElementsByTagName)

15 tecniche per implementare autosuggest tramite Ajax

Nel post “Implementare un sistema tipo Google Suggest con jQuery” vi illustrai come implementare, tramite un plugin per jQuery, un sistema di completamento automatico tipo Google Suggest.

Tutzone ci segnala ben 15 tecniche per implementare un sistema del genere, alcune sono davvero accattivanti dal punto di vista grafico.

Ecco il link all’articolo: 15 Best Techniques For Implementing Autosuggest With AJAX Into Your Site

DOM: verificare se una checkbox è stata selezionata

Vediamo come si può controllare se una checkbox è stata “spuntata” tramite DOM:

Inseriamo in una pagina web un campo di tipo checkbox con id uguale a opzione:

<input type=”checkbox” id=”opzione” /><input type=”button” value=”Verifica” onclick=”check()” />

Quindi un pulsante che richiama la seguente funzione:

function check() {
var status = document.getElementById(“opzione”).checked;
alert(status);
}

Premendo il pulsante la funzione richiamata stamperà, in questo esempio tramite alert, lo stato della checkbox precedentemente memorizzato nella variabile status.

Semplicissimo

Implementare un sistema tipo Google Suggest con jQuery

Un sistema di autocompletamento automatico tipo Google Suggest è sicuramente qualcosa di molto utile. Personalmente, quando digito qualcosa per una ricerca, ritengo utile digitare le prime lettere per poi scegliere la keyword o keyphrase suggerita (che poi il 99% delle volte è esattamente quella che intendevo digitare).

Per informazioni e alcune riflessioni sui pro e contro di Suggest ti invito a leggere questo post di Davide Tagliaerbe Pozzi.

Vediamo come implementare questo sistema in un nostro progetto personale utilizzando jQuery.

Per prima cosa scarichiamo il plugin “Autocomplete” da qui.

Carichiamo la cartella jquery-autocomplete nella stessa directory del file HTML dove implementeremo autocomplete.

Includiamo tra i tag <head> ed </head> i files necessari:

<script src=”jquery-autocomplete/lib/jquery.js”></script>
<link rel=”stylesheet” href=”jquery-autocomplete/jquery.autocomplete.css” type=”text/css” />
<script type=”text/javascript” src=”jquery-autocomplete/lib/jquery.bgiframe.min.js”></script>
<script type=”text/javascript” src=”jquery-autocomplete/jquery.autocomplete.js”></script>

Includiamo anche il codice:

<script>
$(document).ready(function(){
var data = “web,web 2.0,web design,web developing,grafica,grafica pubblicitaria,grafica vettoriale,grafica 3d”.split(“,”);
$(“#example”).autocomplete(data);
});
</script>

Analizziamo il codice. Nella variabile data ho memorizzato le kywords che verranno poi “suggerite” da autocomplete. Ho scelto come separatore la virgola ed ho associato lo script al campo di testo con ID uguale a “example“. Tutto qui 

Potete personalizzare la grafica modificando il file CSS jquery.autocomplete.css e scegliere le keywords che ritenete più opportune. Possiamo rendere il tutto più complesso (e più utile) realizzando uno script che memorizzi le kywords digitate in un database. Questo per far sì che le stesse vengano caricate nella variabile data (magari con una chiamata Ajax) al caricamento della pagina web.

Mi vengono in mente subito due contro da valutare con attenzione:

1) Per non appesantire la pagina in fase di caricamento bisognerà prevedere di richiamare un numero finito di keywords, magari ordinate per rilevanza.

2) Ci vorrà un sistema di moderazione in quanto qualche simpaticone che digiterà cavolate arriverà prima o poi .

Qui potete visionare lo script.