JavaScript  »  Articoli  »  Ajax 

Esempio pratico

Tra i primi applicativi AJAX di successo ce n'è uno che è stato sempre ai vertici della classifica, diventato quasi onnipresente e sfruttato dai big della rete, come dai siti più semplici: suggest, il suggerimento dinamico per la compilazione dei form.

I concetti che stanno alla base di un suggest sono semplici, aiutare o velocizzare la compilazione del campo di ricerca mostrando risultati possibili compatibil con il testo inserito parzialmente o per intero dall'utente. Questi risultati altro non sono che una lista di stringhe, restituite come liste (x)html, xml e nell'esempio proposto come stringa JSON.

Quale miglior metodo se non restituire un array composto da 10, 100 o migliaia di elementi? In realtà in questo esempio sono poco più di mille, e sono alcuni nomi propri di persona usati in Italia.

Scrivendo l'iniziale di un nome, il suggest mostrerà tutti quelli che cominciano per la stessa lettera e continuando a scrivere il resto del nome il suggest in automatico filtrerà quelli che non contengono i caratteri scelti.

Scrivendo quindi la lettera 'A' (oppure 'a'), ci saranno tutti, aggiungendo 'n', ci saranno tutti quelli che cominciano con 'an', e così fino al nome completo.

Una piccola analisi

In questo esempio, dove l'archivio è fatto di soli nomi, si presume che la ricerca cominci con l'iniziale ed è quindi più facile aiutare l'utente. Solitamente però il suggest lavora su tutte le stringhe e non solo su quelle che "cominciano per".

Questo significa che scrivendo 'a', un suggest potebbe suggerire Andrea come Giorgia, magari ordinando i risultati in ordine alfabetico, e molto spesso questo il tipo di aiuto che un utente si aspetta all'interno di un sito ricco di contenuti.Effettivamente è quello il modo corretto mentre questo proposto è solo un semplice esempio che non prevede un database.

Un server può trovarsi sovraccarico di richieste o stressato da numerose interazioni simultanee. Se non si sfruttano le richieste già fatte attraverso variabili o cookie sul client, esse si moltiplicano inutilmente.

Ad esempio scrivendo 'a', oltre a ricevere i suggerimenti, il risultato dovrebbe essere messo in qualche modo in cache, perchè non avrebbe senso richiedere questa sola lettera al server una seconda volta.

Una libreria molto nota e sicuramente ben fatta, che però non implementa alcun sistema di caching delle richieste, script.aculo.us, la quale permette di aggiungere su una pagina web un suggest completo grazie a pochissime linee di codice.

Questa libreria però ha inserito un controllo sulla latenza trascorsa tra l'attimo in cui l'utente smette di scrivere e l'avvio della richiesta sul server, evitando così di effettuare tante richieste quanti sono i caratteri digitati.

L'insieme di questi accorgimenti potrebbe evitare dover lavorare con pochi dati per volta, poichè tale lista, grazie a JSON, potrebbe contenerne centinaia, implicando un'attesa lievemente maggiore per il client, ma garantendo una rapidità o efficacia di suggerimento senza pari per tutte le richieste successive.

Per capire meglio quanto detto ecco finalmente il link all'esempio, dove i commenti presenti nei vari files javascript, in particolare utenti.js, dovrebbero spiegare bene come provare a creare un sistema suggest ancora migliore o appoggiato ad un vero database.

Esempio suggest nomi persone.

Considerazioni finali

JSON ha veramente tanti vantaggi e pochi limiti realmente insormontabili. Compete con XML su interazioni semplici o mediamente complesse e permette di risparmiare banda o di inviare molti più dati con la stessa che avrebbe richiesto un file di quest ultimo tipo.

Va segnalato che l'applicativo proposto in questo articolo, basato su files XML sarebbe pesato circa 42Kb contro i 16Kb dell'attuale.

Portabilità, potenza e velocità ai massimi livelli sul client, serve molto altro per una rich internet experience? :-)

Altri articoli

Altre guide

Altre newsletter