Appunti AJAX: caricamento asincrono di HTML in un DIV

Giusto un breve post su una cosa sulla quale sto giocherellando in questi giorni. Sto scrivendo un’applicazioncina web php/sqlite3 di una paginetta; in questa applicazione appaiono sigle e simboli arcani, che richiedono un help contestuale: io clicco su una stringa (che camuffa un link) e da qualche parte nella pagina una sezione cambia contenuto per andare a contenere il testo di un help. Come fare? Mi servono tre cose:

1) Nella pagina principale dell’applicazione il div che andrà a contenere il testo. Basta una cosa qualunque

<div id="helpdiv">Help in linea</div>

2) Una pagina esterna destinata a creare l’help online a partire da un parametro “codice” fornito mediante GET. La chiameremo “decodifica.php”, e inizierà con qualcosa del tipo:

<!-- pagina decodifica.php  -->
<?php
if (!isset($_GET['formula'])) return "Beh?";
else return $_GET['formula'];
?>

Una cosina semplice, che se chiamata senza parametro restituisce un accigliato warning mentre se viene richiamata correttamente con il parametro “formula” fa un echo di quanto passato.. giusto per provare!

3) una funzioncina javascript nella pagina principale.

<script type="text/javascript">

Questa prima funzione viene richiamata dal link con un parametro, l’url della pagina di decodifica. La funzione lancia la richiesta della pagina di decodifica e poi resta in attesa dell’acknowledge, all’arrivo del quale lancerà la funzione “scriviDiv”

function impostaDiv(url) {
 if (window.XMLHttpRequest) { // Non-IE browsers
 req = new XMLHttpRequest();
 req.onreadystatechange = scriviDiv;
 try {
 req.open("GET", url, true);
 } catch (e) {
 alert(e);
 }
 req.send(null);
 } else if (window.ActiveXObject) { // IE
 req = new ActiveXObject("Microsoft.XMLHTTP");
 if (req) {
 req.onreadystatechange = scriviDiv;
 req.open("GET", url, true);
 req.send();        
 }
 }
}

Questa funzione invece viene richiamata al termine della chiamata alla pagina di decodifica, e scrive il testo restituito nel div di destinazione “helpdiv”.

function scriviDiv() {
 if (req.readyState == 4) { // completato
 if (req.status == 200) { // risposta affermativa
 document.getElementById("helpdiv").innerHTML = req.responseText;
 } else {
 alert("Problem: " + req.statusText);
 }
 }
}
</script>

4) Per concludere, occorrono i link nella pagina principale per richiamare la funzione impostaDiv, una cosa del tipo:

<a href="javascript:impostaDiv('decodifica.php?formula=sorpresa')">Scritta strana</a>

Ecco fatto! A questo punto dovremmo avere un sistema che si comporta così:
– l’utente preme il link “scritta strana”;
– viene chiamata una funzione javascript impostaDiv con parametro formula=sorpresa;
– la funzione impostaDiv richiama la pagina decodifica.php?formula=sorpresa;
– la pagina ritorna la scritta “sorpresa” (la stessa che gli è stata passata!);
– appena la pagina è pronta si attiva la chiamata di ritorno scriviDiv, che va a scrivere l’output di cui sopra (ovvero la scritta “sorpresa”) nel div “helpDiv”, che fino a poso tempo fa conteneva solo il testo “Help in linea”.

Facile, no?

Saluti!

Questa voce è stata pubblicata in Uncategorized e contrassegnata con , , , , . Contrassegna il permalink.

3 risposte a Appunti AJAX: caricamento asincrono di HTML in un DIV

  1. Frasten ha detto:

    Importante da sapere e da dimenticare immediatamente! Perché reinventare la ruota?
    Se hai un div #helpDiv, come nel tuo caso, e la pagina da chiamare è decodifica.php?formula=sorpresa, utilizzando la libreria javascript jQuery tutto quello che devi fare è:

    jQuery('#helpDiv').load('decodifica.php?formula=sorpresa');
    

    Fine🙂
    Una riga di codice.

  2. PicciMario ha detto:

    Grandissimo! Eh, è facile con le librerie già fatte, ma per una cosetta così semplice non vale la pena tirarsi su tutto jquery, specie su un sito per cellulare(anche se con le opzioni per alleggerirlo eliminando le funzioni non usate si ottengono comunque risultati apprezzabili). Grassie per il feedback, socio!

  3. Frasten ha detto:

    Certo, bisogna fare un bilanciamento tra semplicità e potenza di sviluppo e banda utilizzata!🙂 Chiaramente se la banda è critica, come una rete cellulare, meglio una soluzione ad hoc, ma se magari non devi utilizzare solo ajax ma fare manipolazioni varie di oggetti JS, meglio jQuery, visto che con la compressione gzip dei browser tiene solo 24kb🙂

Lascia un commento

Inserisci i tuoi dati qui sotto o clicca su un'icona per effettuare l'accesso:

Logo WordPress.com

Stai commentando usando il tuo account WordPress.com. Chiudi sessione / Modifica )

Foto Twitter

Stai commentando usando il tuo account Twitter. Chiudi sessione / Modifica )

Foto di Facebook

Stai commentando usando il tuo account Facebook. Chiudi sessione / Modifica )

Google+ photo

Stai commentando usando il tuo account Google+. Chiudi sessione / Modifica )

Connessione a %s...