JavaScript e XML asincrono possono rendere le pagine Web aziendali più reattive e interattive. La tecnologia AJAX consente ai visitatori del sito di utilizzare menu a discesa e altri controlli per attivare azioni senza che la pagina Web venga aggiornata. Un clic sul nome di un prodotto in un menu a discesa, ad esempio, potrebbe modificare il contenuto di un contenitore div. Le attività AJAX complesse possono richiedere una codifica estesa, ma puoi creare un semplice esempio di menu a discesa utilizzando poche righe di JavaScript.
Menu a discesa
Aggiungi un semplice tag di selezione al tuo documento HTML e popolalo utilizzando un tag di selezione per definire i valori da visualizzare nel menu a discesa. Il tuo menu richiede anche un gestore di eventi per chiamare la funzione JavaScript per eseguire la tua richiesta AJAX. L’esempio seguente aggiunge elementi Fotocamera e Telefono a un menu a discesa e chiama la funzione “getValue” quando l’elemento è selezionato. Inoltre, puoi controllare il numero di elementi visualizzati nel menu a discesa. L’attributo size in questo esempio indica ai browser di visualizzare due elementi. Se imposti il valore su zero, i visitatori del sito devono fare clic sul menu per visualizzare gli elementi. Se la tua pagina Web è affollata, imposta la dimensione su 0 per mantenere il menu compatto.
Fotocamera
Oggetti richiesta AJAX
A livello di base, per far funzionare AJAX, è necessario creare una funzione JavaScript che crei un oggetto HyperText Transfer Protocol, o HTTP. Quindi si utilizza quella funzione per richiedere informazioni al proprio server Web. Il codice chiama i metodi Open e Send dell’oggetto per inviare la richiesta. Quando il codice invia la richiesta, è necessario aggiungere anche il nome della risorsa che si desidera venga restituita dal server. Ad esempio, per ricevere un file di testo denominato product1.txt dal server, aggiungi un’istruzione Open e un’istruzione Send al tuo codice simile a:
httpObject.open (“GET”, “product1.txt”, true); httpObject.send ();
Funzioni di richiamata
Il tuo codice AJAX deve conoscere l’ID del contenuto che desideri modificare. Fai in modo che la tua richiesta AJAX aggiorni qualsiasi elemento “div” sulla tua pagina Web aggiungendo una funzione “Richiamata” al tuo codice. Le funzioni di callback vengono eseguite automaticamente quando si verifica un particolare evento. In questo esempio, è necessaria una funzione di callback che modifichi la proprietà “innerHTML” dell’elemento “div” che si desidera modificare. Una tipica funzione di callback ha il seguente aspetto:
httpObject.onreadystatechange = function () {if (httpObject.readyState == 4 && httpObject.status == 200) {document.getElementById (“container1”). innerHTML = httpObject.responseText; }}
Dopo aver inviato una richiesta al server Web, questa funzione monitora la richiesta e cerca le risposte. Quando il server restituisce un “codice di stato” di 200 e un valore “readyState” di 4, il codice dispone dei dati necessari. Modifica la proprietà “innerHTML” del “div” a cui fa riferimento l’istruzione “document.getElementById”.
Considerazioni sul server Web
Le transazioni AJAX consistono nella comunicazione tra il browser di qualcuno e il server Web. Poiché il codice AJAX nell’esempio richiede un file di testo, è necessario aggiungere il file di testo alla directory sul server Web in cui si archiviano gli altri file per il sito Web. Il testo nel file di testo è il testo che il codice AJAX aggiunge alla pagina Web quando il codice recupera i dati. Quando qualcuno seleziona un valore dal menu a discesa della pagina, il codice AJAX cambia il contenuto del contenitore “div” specificato nel testo restituito dal server.