Un formmail con Ajax

Introduzione

Vediamo in questo articolo come inviare email sfruttando le caratteristiche di AJAX effettuando quindi una chiamata HTTP in scrittura e non in lettura.

Oltre alla costruzione del modulo e del codice Javascript necessario ad AJAX, vedremo come effettuare il materiale recapito della missiva sia attraverso ASP che attraverso PHP.

In conclusione dell'articolo segnalo alcune note da tenere in considerazione onde sfruttare al meglio questo meccanismo.

Buona lettura!

Il form mail HTML

Costruiamo il nostro form mail HTML permettendo all'utente di inserire nome, email ed il corpo del messaggio.

Segue il codice HTML del file email.html:

<form name="modulo">
Nome<br>
<input type="text" name="nome"><br><br>
Email<br>
<input type="text" name="email"><br><br>
Messaggio<br>
<textarea name="messaggio" rows="5" cols="30"></textarea><br><br>
<input type="button" value="Login" onclick="Richiesta(document.modulo.nome.value, document.modulo.email.value, document.modulo.messaggio.value)">
</form>

Al click sul bottone di invio attiviamo la funzione Javascript passando come parametri i tre dati richiesti dal form stesso.

Dopo la chiusura del form inseriamo un elemento di testo HTML, corredato da un ID, che ci servirà per stampare a video i messaggi di errore o di successo dell'operazione:

<div id="risultato"></div>

Prima del form, invece, chiameremo il file Javascript che vedremo nel prossimo paragrafo:

<script type="text/javascript" src="email.js"></script>

Procediamo.

Il codice Javascript

Ci siamo ormai abituati, nel corso dei vari articoli su AJAX, a prendere in considerazione solo la funzione che effettua la richiesta allo script lato server, mentre il resto delle funzioni Javascript sono di corredo e tra loro combinate per garantire il successo dell'operazione.

Vediamo quindi come strutturare la funzione di richiesta, contenuta nel file email.js:

var XMLHTTP;
function Richiesta(N, E, M)
{
    var url;
    url = "email.ext?nome=" + N + "&email=" + E + "&messaggio=" + M;
    XMLHTTP = RicavaBrowser(CambioStato);
    XMLHTTP.open("GET", url, true);
    XMLHTTP.send(null);
}

Richiamiamo il file email.ext (che sarà .asp o .php) e gli passiamo in querystring i parametri passati in fase di richiesta dal modulo HTML.

Per completezza vediamo anche le altre funzioni Javascript che seguiranno quella appena proposta:

function CambioStato()
{
    if (XMLHTTP.readyState == 4)
    {
        var R = document.getElementById("risultato");
        R.innerHTML = XMLHTTP.responseText;
    }
}
function RicavaBrowser(QualeBrowser)
{
    if (navigator.userAgent.indexOf("MSIE") != (-1))
    {
        var Classe = "Msxml2.XMLHTTP";
        if (navigator.appVersion.indexOf("MSIE 5.5") != (-1));
        {
            Classe = "Microsoft.XMLHTTP";
        } 
        try
        {
            OggettoXMLHTTP = new ActiveXObject(Classe);
            OggettoXMLHTTP.onreadystatechange = QualeBrowser;
            return OggettoXMLHTTP;
        }
        catch(e)
        {
            alert("Errore: l'ActiveX non verrà eseguito!");
        }
    }
    else if (navigator.userAgent.indexOf("Mozilla") != (-1))
    {
        OggettoXMLHTTP = new XMLHttpRequest();
        OggettoXMLHTTP.onload = QualeBrowser;
        OggettoXMLHTTP.onerror = QualeBrowser;
        return OggettoXMLHTTP;
    }
    else
    {
        alert("L'esempio non funziona con altri browser!");
    }
}

• <<
• 1
• 2
• >>