Volando come un Rasteriz

Continua la sfilza di articoli previsti su jQuery: spero vi faccia piacere.

Oggi vedremo come effettuare una richiesta http asincrona tramite javascript (AJAX), sfruttando la libreria jQuery.

jQuery ha una serie di metodi all’interno, che permettono una gestione a 360° delle richieste AJAX. Grazie a questa fantastica libreria, infatti, potremo con semplicità interrogare una pagina esterna e se vogliamo recuperarne il risultato, oppure, interrogare un file javascript ed eseguirne il suo contenuto: magnifico. Tuttavia i suoi utilizzi non si limitano solo a questo ma si estendono anche ad interrogazioni di dati JSON. Come si intuisce, quindi, l’articolo potrebbe essere molto vasto.

Lasciandovi il beneficio del dubbio sulla possibilità di un approfondimento in seguito, oggi vi proporrò tre esempi:

• Una semplice richiesta Ajax che analizzerà il successo o l’insuccesso della richiesta
• Una richiesta Ajax che analizzerà il successo o l’insuccesso, ed in caso di successo mostrerà un alert con il risultato HTML della pagina interrogata
• Una richiesta Ajax che analizzerà il successo o l’insuccesso, ed in caso di successo eseguirà del codice Javascript estratto dalla richiesta remota

Bene. Iniziamo.

Una semplice richiesta Ajax che analizzerà il successo o l’insuccesso della richiesta

Il caso è molto semplice. Se la richiesta viene eseguita con successo, eseguiamo la funzione in success, in caso contrario eseguiamo quella in error.

$.ajax({
	type:"GET",
	url: "remote_req.html",
	cache: false,
	success: function() { $("#resRichiesta1").html('Richiesta inviata e completata!'); },
	error: function() { $("#resRichiesta1").html('Errore nella richiesta!'); }
});

Ovviamente sostituite il file remote_req.html con la pagina web che volete interrogare.

Una richiesta Ajax che analizzerà il successo o l’insuccesso, ed in caso di successo mostrerà un alert con il risultato HTML della pagina interrogata

Anche in questo esempio, ottenere il risultato non è difficile. Le differenze con lo script precedente sono poche e si riscontrano soltanto nella parte “success”. Vediamo:

$.ajax({
	type:"GET",
	url: "remote_req.html",
	cache: false,
	success: function(html) { $("#resRichiesta2").html('Richiesta inviata e completata!'); alert(html); },
	error: function() { $("#resRichiesta2").html('Errore nella richiesta!'); }
});

Anche in questo caso andremo a sostituire la pagina remote_req.html con la pagina da richiedere.

Una richiesta Ajax che analizzerà il successo o l’insuccesso, ed in caso di successo eseguirà del codice Javascript estratto dalla richiesta remota

Ed ora analizziamo la terza, nonché ultima, tecnica da noi trattata: l’esecuzione di codice Javascript remoto. Anche qui, la procedura è molto semplice.

$.ajax({
	type:"GET",
	url: "js/alert_remoto.js",
	cache: false,
	dataType: "script",
	success: function(js) { $("#resRichiesta3").html('Richiesta inviata e completata!'); },
	error: function() { $("#resRichiesta3").html('Errore nella richiesta!'); }
});

Ed eccoci giunti alla fine di questo Howto.

Per i più “bisognosi” ho creato un archivio con gli esempi completi da poter testare ed utilizzare. Potete scaricarlo cliccando qui.

Condividi questo testo

Articoli suggeriti:

1. Eliminare da una tabella le righe, con effetto a scomparsa e jQuery
2. Evitare che le richieste web usando Ajax sfruttino la cache del browser
3. Intercettare evento scroll con jQuery
4. Scorrere le immagini con un effetto a scomparsa utilizzando jQuery
5. Un calendario (datapicker) per i nostri form con jQuery UI