AJAX spiegato facile

Avete mai tentato di implementare in una pagina web una interazione immediata, tipo la verifica “al volo” di un nome utente o la visualizzazione di alcuni dati? Esistono in giro tante soluzioni, ma le ho sempre trovate troppo complicate e cervellotiche. Per chi ama la vita facile e vule usare il solo Javascript, ecco una soluzione/tutorial che più facile di così, non si può.

Brevemente, su Ajax e questa soluzione

AJAX è un acronimo per Javascript e XML Asincroni, insomma è una soluzione che usa queste tecnologie per delle interazioni immediate, ovvero “asincrone”.

In questo tutorial, supporremo di dover implementare la registrazione utenti su un sito: vogliamo verificare se il nome utente che è appena stato scelto è accettabile o no (magari è già stato preso da qualcuno…). Vogliamo fare tutto questo senza che l’utente veda “rinfrescare” la pagina.

La soluzione usata si basa su un semplice toolkit gratuito – da qui scaricabile -, chiamato DimensioneX Ajax toolkit (Questo script prende il nome dal software per cui l’ho messo a punto, si chiama DimensioneX ed è un software gratuito per implementare giochi multiplayer).

 

Scarica il kit

Potete scaricare subito i file di questo tutorial cliccando qui:

 

L’esempio

Carica i files in un qualsiasi server che supporta PHP e puoi subito fare una prova, anche se non hai un DataBase configurato, visualizzando con il tuo browser la pagina modulo.htm.

Se non hai un server PHP disponibile, su questo server puoi vedere la pagina al lavoro. La pagina accetterà qualsiasi nome utente che cominci con una lettera che va dalla N in avanti – è un pretesto per fare una verifica senza dover usare un database: in questo tutorial ci interessa l’interazione, il controllo o la query realmente eseguita non ci importa realmente qui, nella vita reale dovrai adattare lo script controllo.php al tuo caso specifico.

[ad name=”728×90″]

Come funziona

Osserva i sorgenti che ti sono stati forniti, vedendo le pagine modulo.htm e controllo.php

Come capirai, nell’implementare questa soluzione nelle tue pagine, basta seguire queste semplici regole:

  1. Includi il file ajax.js nella pagina dove va usato
  2. Decidi dove vuoi che il messaggio o i dati della verifica devono apparire e definisci per essi un elemento della pagina con un proprio ID. Può essere una DIV, una SPAN, quello che vuoi, l’importante è che questo abbia un ID con cui lo puoi indicare.
  3. Prepara uno script che esegua la verifica che ti interessa fare, con qualunque tecnologia tu voglia. Lo script dovrà accettare uno o più parametri tramite protocollo GET (ovvero andranno specificati nell’URL di chiamata dopo il punto interrogativo, in forma coppia=valore). Lo script, dopo la verifica stamperà un risultato: l’output va fatto in testo o HTML e apparirà nella DIV che hai predisposto al punto 2. Collauda lo script e prendi nota dell’url con cui va chiamato.
  4. Nel tuo modulo, usando i dati annotati ai punti 2 e 3, chiama la seguente funzione javascript:

ajax( (ID dell’elemento che conterrà i risultati) , (url dello script che fa il controllo) )

La funzione può essere collegata all’evento onBlur di un campo, per esempio:

<input type="text" id="username" name="username" 
onBlur="

ajax

('

check1

','

controllo.php

?v='+encodeURIComponent(document.getElementById('username').value));" />
<!-- Qui sotto appare l'esito del controllo -->
<div id="

check1

"></div>

Tutto qua. Non c’è altro da sapere per il 99% dei casi!

 

 Controllo su database

Il pacchetto che hai scaricato contiene anche uno script per fare la verifica del nome utente su un tuo DB. Basta modificare la chiamata nel file modulo.htm da controllo.php in controllodb.php

Ovviamente devi modificare lo script alla tua situazione inserendo le credenziali per il tuo DB e la tua tabella degli utenti.

[ad name=”728×90″]

Argomenti avanzati

 

Cambiare l’animazione

Hai notato che quando la pagina interroga lo script di controllo appare una animazione per tranquillizzare l’utente.

L’animazione viene caricata direttamente dal server DimensioneX.net, ma puoi tranquillamente modificare il file ajax.js in modo che l’animazione venga caricata dal tuo server mettendoti così in totale autonomia. Modifica questa linea:

 

var loadingimg = "http://

www.tuoserver.it

/loading/loading1.gif"; //Prova anche loading2.gif loading3.gif ...

 

Nota che questa variabile, che rappresenta l’animazione di default, può essere modifcata per usare le altre animazioni. Se la imposti a stringa nulla non si vedrà alcuna animazione di default.

E’ possibile usare animazioni sempre diverse specificandole come terzo parametro opzionale nella chiamata alla funzione ajax(), esempio:

ajax

('

check1

',
'

controllo.php

?v='+encodeURIComponent(document.getElementById('username').value), 
'http://www.tuoserver.it/loading/loading5.gif');

 

Ajax verso un altro server

Prima o poi vi verrà la tentazione di modificare l’url dello script di controllo chiamandone uno che sta su un server diverso da quello che ospita la pagina.

Noterete che non funziona. Non si può fare,almeno non direttamente, è una misura di sicurezza per evitare usi inappropriati.

Se lo script di verifica che vi serve si trova su un server diverso da quello che ospita il vostro sito, potete sempre interrogarlo inserendo nello script controllo.php una connessione server-verso-server con uno dei tanti sistemi che PHP vi mette a disposizione, per esempio usando la libreria CURL. In questo modo il server interpellato viene chiamato solo dal vostro server, e non da tutti i browser del mondo, ci siamo spiegati.

[ad name=”728×90″]

Conclusioni

Ho qui presentato una soluzione per usare AJAX inn modo ultra-rapido oltreché ultra-facile. Nel 99% dei casi ve la cavate aggiungendo al vostro progetto il solo file ajax.js.

Una noticina finale: questa soluzione non usa XML… Quando si può, è meglio semplificarsi la vita, o no?

 

Se vi è stato utile, condividete questo tutorial e/o cliccate su Mi Piace, e altri ne seguiranno.

Per eventuali commenti o domande, fate riferimenti alla mia pagina Facebok.

Buon AJAX a tutti!

 

0 commenti

Lascia un Commento

Vuoi partecipare alla discussione?
Sentitevi liberi di contribuire!

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *