Commenti dinamici con ajax
==========================
by triex


Nell'era del web 2.0 ormai si DEVE prestare attenzione alla qualità del servizio che si vuole offrire. 
Aldilà di tutte le inutili pacchianerie, AJAX è in grado di migliorare notevolmente le prestazioni di 
un sito, senza nemmeno radicali stravolgimenti.

Per capire cos'è AJAX e come funziona rimando a questa buona guida: 

http://javascript.html.it/guide/leggi/95/guida-ajax/


Quello che segue è l'applicazione delle funzioni lì descritte ai temi della più celebre piattaforma 
di blogging: Wordpress.

L'effetto che si vuole ottenere è quello di un div contenente i commenti che viene richiamato quando si 
preme il link ai commenti, senza dover caricare una nuova pagina.

All'interno della pagina index.php possiamo modificare il link dei commenti come segue:

                <a href="<?php bloginfo('siteurl') ?>/?comments_popup=<?php the_ID(); ?>"
                     onclick="return caricaCommento(this.href, <?php the_ID(); ?>);"
                     onkeypress="return this.onclick();"
                     style="display: inline"
                     id="mostra-<?php the_ID(); ?>"
                     tabindex="1"><?php comments_number('0 commenti','1 Commento','% Commenti'); ?></a>

<?php bloginfo('siteurl') ?>/?comments_popup=<?php the_ID(); ?> costruisce l'indirizzo della pagina da 
richiamare e restituisce una cosa del tipo: http://www.siteurl.com/?comments_popup=3 (the_ID restituisce 
l'ID del post di cui si richiedono i commenti).

onclick="return caricaCommento(this.href, <?php the_ID(); ?>);" chiama la funzione che si occuperà di 
chiamare la pagina asincronamente. Vengono passati l'indirizzo e l'id. Notare che l'id in teoria è già 
compreso nell'indirizzo, per cui basterebbe una piccola modifica alla funzione, per recuperarlo.

onkeypress="return this.onclick();" chiama la funzione quando viene premuto un tasto nel momento in cui 
il focus è su quel link.

style="display: inline" indica che il link deve essere visibile. Verrà sostituito dal link "Nascondi" 
quando i commenti saranno stati caricati.

id="mostra-<?php the_ID(); ?>" assegniamo un id univoco a questo link.

<?php comments_number('0 Commenti','1 Commenti','% Commenti'); ?> E' una funzione di wordpress che 
restituisce un determinato testo a seconda che i commenti siano 0, 1 o più di uno.

Notare che il link creato è "degradabile", ovvero non preclude la funzionalità del sito nel caso in cui 
Javascript non sia presente.

Creiamo di seguito il link "Nascondi", che sarà invisibile finché non compariranno i commenti. Questo è 
un link fittizio in quanto non porta da nessuna parte, ma chiama soltanto la funzione apposita.

<a href="#" id="nascondi-<?php the_ID(); ?>" onclick="nascondiCommento(<?php the_ID(); ?>)" style="display:none"> Nascondi</a>

style="display:none" fa in modo che non venga visualizzato.

Ancora una ultima cosa:

<div style="display: none" class="commentlist" id="comments-<?php the_ID(); ?>">

Questo div conterrà i vari commenti. E' essenziale assegnargli un id univoco, perché si andrà poi a 
modificare il suo contenuto, e dato che di div così ce ne saranno più di uno occorre essere certi di 
prendere quello giusto :P


La parte AJAX
-------------

Ho sfruttato le funzioni di supporto presentate nella guida di HTML.IT, nel file 

http://html.it/guide/esempi/ajax/utility.js

Nel file ajax.js (originalità a palate) ho scritto invece quelle studiate per i commenti.

function caricaCommento(nomeFile, id) 
{
    var
        ajax = assegnaXMLHttpRequest(), 
	lista = prendiElementoDaId("comments-" + id), //Il div da riempire coi commenti
	mostra = prendiElementoDaId("mostra-" +id), //Il link per mostrarli
	nascondi = prendiElementoDaId("nascondi-" +id); //Il link per nasconderli

    //Si mostrano la lista e il link per nascondere i commenti e si nasconde il link per visualizzarli
    lista.style.display = "block";
    nascondi.style.display = "inline";
    mostra.style.display = "none";
    
    usaLink = true;

    // se l'oggetto XMLHttpRequest non è nullo
    if(ajax)
    {
        // il link al file non deve essere usato
        usaLink = false;

        // impostazione richiesta asincrona in GET
        ajax.open("get", nomeFile, true);
        // rimozione dell'header "connection" come "keep alive"
        ajax.setRequestHeader("connection", "close");
        // impostazione controllo e stato della richiesta
        ajax.onreadystatechange = function()
        {
            // verifica dello stato
            if(ajax.readyState === readyState.COMPLETATO)
            {
                // verifica della risposta da parte del server 
                if(statusText[ajax.status] === "OK")
                {
                    // operazione avvenuta con successo
                    lista.innerHTML = ajax.responseText; //Il div viene riempito con la pagina dei commenti
                }
                else 
                {
                    // errore di caricamento
                    lista.innerHTML = "Impossibile effettuare l'operazione richiesta.<br />";
                    lista.innerHTML += "Errore riscontrato: " + statusText[ajax.status];
                }
            }
        }
        // invio richiesta
        ajax.send(null);
    }
    return usaLink;
}

La funzione è ben spiegata nella guida di HTML.IT, ed è banalmente una richiesta asincrona alla pagina 
dei commenti, che vengono riversati nel div.

function nascondiCommento(id)
{
    var 
        lista = prendiElementoDaId("comments-" + id),
        nascondi = prendiElementoDaId("nascondi-" +id),
        mostra = prendiElementoDaId("mostra-" +id);

    lista.style.display = "none";
    nascondi.style.display = "none";
    mostra.style.display = "inline";
    return true;
}

Questa funzione è ancora più banale: si limita a nascondere il div dei commenti e a mostrare nuovamente 
il link per caricarli.

Passiamo ora alla parte più interessante: aggiungere un commento asincronamente.

Cominciamo con le necessarie modifiche al file comments-popup.php.

<form action="<?php echo get_option('siteurl'); ?>/wp-comments-post.php" 
            onsubmit="return aggiungiCommento('<?php echo get_option('siteurl'); ?>/wp-comments-post.php', this, <?php echo $id; ?>)" 

Analogamente al link precedente, anche questo form è degradabile, al click viene chiamata la funzione 
aggiungicommento, che passa l'indirizzo, il form stesso e l'id.

Il form viene passato anche lui per potere accedere al contenuto dei suoi campi. Certo, si poteva assegnare 
un id univoco anche a lui e recuperarlo con getElementsByID, ma questo è il primo che mi è venuto in mente. 
Nella programmazione ci sono così tanti modi per fare le cose...

La funzione in ajax.js recita così:

function aggiungiCommento(nomeFile, form, id) {
    var
        ajax = assegnaXMLHttpRequest()
        usaLink = true;

    if(ajax)
        usaLink = false;
    
    //Costruisce la stringa di dati da inviare
    dati = form.elements[0].name + "=" + escape(form.elements[0].value)

    //Cicla tra tutti i campi del form
    for(i=1; i<form.length; i++)
    {
        //Questi campi non sono necessari
        if((form.elements[i].name != "redirect_to") && (form.elements[i].name != "submit"))
            dati += "&" + form.elements[i].name + "=" + escape(form.elements[i].value);
    }
    ajax.open("post", nomeFile, true);
    ajax.setRequestHeader("content-type", "application/x-www-form-urlencoded");
    ajax.setRequestHeader("connection", "close"); 

    ajax.onreadystatechange = function() {
      
      // verifica dello stato
      if(ajax.readyState === readyState.COMPLETATO) {
        // verifica della risposta da parte del server
        if(statusText[ajax.status] === "OK"){
          // operazione avvenuta con successo: Ricarico i commenti (Modificare l'url, ovviamente)
            caricaCommento("http://urldelsito/?comments_popup="+id, id);
          }
        else {
          // errore di caricamento
          alert("Impossibile effettuare l'operazione richiesta.<br />");
          alert("Errore riscontrato: " + statusText[ajax.status]);
        }
      } 
    }

    ajax.send(dati);

return usaLink;
}

In pratica la funzione riceve l'intero form, recupera i contenuti dei vari campi (si potrebbero anche 
introdurre controlli per valutarne la validità), costruisce la stringa di valori da inviare con il metodo 
POST (si noti la funziona escape(), necessaria poiché le varie variabili sono separate da una &, e se in 
uno dei campi compare una & le variabili rimangono separate male e l'operazione non va a buon fine. Con 
questa funzione invece la & nei campi viene sostituita con la sua entità html.

Fine °°, bisogna solo ricordarsi di includere ajax.js in header.php:

<script type="text/javascript" src="<?php bloginfo('template_directory') ?>/ajax.js"><!--// ajax functions //--></script>