Principi di Ajax

Riporto sotto il principio di funzionamento di ajax, ovvero la tecnica che usa javascript e css per caricare parti della pagina solo quando richiesto, questo mi è utile quando lo uso per alcuni moduli, spero possa servire anche a qualcun’altro.

TEORIA
Javascript usa la classe httpRequest, che va istanziata e inizializzata (in modo diverso a seconda del browser). Tramite il metodo open (a cui passiamo la url da aprire) e send, facciamo una richiesta http al server
esempio:
httpRequest.open(‘GET’, ‘pagina.php?parametro=valore’, true);
httpRequest.send(null);

a queto punto, con il metodo responseText ottieniamo la risposta http della pagina.
Ovviamente dobbiamo scriverla da qualche parte, a questo scopo usiamo i CSS.
Diamo l’id css (es: id=”destinazione”) all’oggetto html (span, div…) dove vogliamo che venga scritta la risposta, così riusciamo ad accederne alle proprietà tramite getElementById(destinazione). La proprietà che ci interessa è in particolare innerHTML (cioè il contenuto).
Riassumendo:
document.getElementById(id).innerHTML = httpRequest.responseText;

PRATICA
Includete ajax.js
con il codice fra gli head:
<script language=”javascript” xsrc=”ajax.js”></script>

nell’href dei link o evento javascript (onClick per i pulsanti, onKeyUp per i cambiamenti nelle input…) inserite il codice
makeRequest(‘pagina.php?parametro=’ + document.form1.campo1.value, ‘destinazione’)

il primo parametro è il link http da caricare. Il parametro è preso dal contenuto del campo1 del form1.
il secondo parametro è l’id dell’oggetto dove verrà caricato il contenuto (in http) della pagina.

ESEMPIO MINIMALE CONCRETO
Facciamo una pagina per inserimento nomi di persona e cellulari in un database. Nel modulo di inserimento avvisiamo accanto con ajax quando il numero di cell esiste già nel database.
Supponiamo di aver già creato il database e avere la pagina check.php, che legge il parametro num, e stampa in html se il numero esiste già o no nel db:
<?
// check.php
//connessione mysql
if ($_GET[‘num’] esiste già nel db)
print “Attenzione: numero di tel già esistente”;
else
print “OK. numero non ancora esistente”;
?>

Creiamo il form html:
inserimento.html
<script language=”javascript” xsrc=”ajax.js”></script>
<form name=form1 action=[…] method=[…]>
Nome persona: <input name=nome><br>
Telefono: <input name=TEL
onKeyUp=”makeRequest(‘check.php?num=’ + document.form1.tel.value, ‘destinazione’)” >
<span id=”destinazione”></span><br>
<input type=submit>
</form>

In questo esempio, quando scriviamo “123” dentro il campo tel, javascript chiama la pagina check.php?tel=123 e scrive il risultato http dentro il tag con id=”destinazione” (cioè accanto al campo di testo stesso).