Ajax (orrore)

[rendertin]

Ciao ragazzi, ho dei problemi grandissimi con una registrazione..
Ho validato tutti i campi possibili sia con javascript che con php, ed è andato tutto ok, ora però mi manca una cosa:

la validazione di un nome utente... Vorrei che se il nome utente è già registrato e presente nella tabella del database, allora il corrispondente 'input' si colori di rosso...

Il controllo in php è già fatto, quindi se il nome utente è già presente nella tabella, l'utente viene reindirizzato in una pagina di errore; ora però vorrei che se questo è già presente, l'input si colori di rosso, senza il caricamento della pagina...

Ho visto in giro che per queste operazioni ho bisogno di ajax, ed ho cercato varie guide, ma onestamente non ci ho capito assolutamente un figo secco, non potreste farmi un esempio commentato voi?

[m4rko80]

Ciao, questo e' un esempio di ajax classico e semplice
Se clicchi su Try it Yourself puoi vedere il codice. Nel codice quello che sta in xmlhttp.responseText è quello che il tuo script rimanderà indietro( l'esito se l'utente esite gia' o meno).
La guida parte da qui .
Se usi jquery diventa ancora più facile

[rendertin]

mmm..
Ma quindi io con questo codice:

xmlhttp.open("POST","pagina.txt",true);
xmlhttp.send();

devo mettere questo nella pagina dove c'è il form, e nella seconda "pagina.txt" devo mettere il nome della pagina dell'attuale form, o della validazione in php?

[m4rko80]

Allora, non so come avviene la tua validazione ma presumo sul submit o click/modifica dei vari campi.
Ad ogni modo nel mezzo del tuo js dove validi, dovresti inserire una chiamata allo script che fa il controllo tipo

function loadXMLDoc()
{
var xmlhttp;
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    alert(xmlhttp.responseText);
    }
  }
xmlhttp.open("GET","TUOSCRIPT.php",true);
xmlhttp.send();
}

TUOSCRIPT.php farà il controllo a db e darà poi un echo di quello che vuoi .. ad esempio semplicemente 1/0 o un OK o error testuale.

Quindi qui (sopra) diventerà una cosa del tipo

....
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    if(xmlhttp.responseText == 'OK' ) {
  //fai qualocosa
    }else{
    //fai altro per indicare l'errore
}
    }
  }
...

Ricordati che la chiamata in ajax è asincrona e quindi il resto dello script continua comunque.

[rendertin]

Grazie mille! quindi tutto questo

var xmlhttp;
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    alert(xmlhttp.responseText);
    }
  }

In pratica è per farlo funzionare nei vari browser?

[m4rko80]

dovrebbe essere compatibile con tutti o la maggior parte dei browser.
Poi quando invocarlo se in funzione o meno vedi tu.
Fai dei test e vedi

[rendertin]

mm grazie, sinceramente però non ho capito molto di tutto il codice, se non ajax.open e send.. quindi non vorrei copiare e incollare così..
Potresti linkarmi una buona guida? su html.guide non si capisce granchè

[m4rko80]

Nella prima risposta ho messo il link sulla documentazione di wc3. E' abbastanza chiaro e semplice.
Oppure su questo sito appunto