Per effettuare una chiamata ajax esistono diversi metodi ma, come sicuramente saprete, il più utilizzato in assoluto sfrutta la libreria jQuery.
Come prima cosa includiamo la libreria all’interno delle nostre pagine web, quindi nell’head della pagina inseriamo
<script src=”//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js”></script>
Io preferisco prendere la libreria da googleapis ma siete liberi di scaricare l’ultima versione e caricarla sul vostro spazio web.
Il metodo che utilizzeremo è $.ajax. Vediamo un piccolo esempio:
$.ajax(
{
type: ‘POST’,
url: ‘miofile.php’,
data: {param:value, param2:value},
success: function(data){},
complete: function(data){},
failure: function(data){}
});
Il parametro type è il metodo con il quale facciamo la chiamata (POST O GET), url è l’indirizzo da chiamare (deve essere sullo stesso dominio), data corrisponde ai parametri che intendiamo inviare. le tre callback success, complete e failure vengono chiamate rispettivamente in caso di successo (CODICE HTTP 200), sempre dopo che la chiamata ajax è conclusa ed in caso di errore durante la chiamata.
Il codice visto sopra è javascript quindi deve essere racchiuso nei tag <script></script> oppure in un file .JS.
Le callback
Le callback sono molto importanti per eseguire le giuste operazioni dopo aver eseguito la chiamata. Se, ad esempio, la chiamata ajax serve per la validazione di un form, all’interno della callback success è possibile fare un alert degli errori.
Esempio
L’esempio che andrò a proporre è composto da un form, una funzione javascript che si occupa passare al validatore i parametri ed un file php che validerà i campi restituendone errori.
Form
<html>
<head>
<link rel=”stylesheet” type=”text/css” href=”main.css” />
<script src=”//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js”></script>
</head>
<body>
<h2>Esempio form di registrazione</h2>
<form action=”” method=”post”>
<div class=”row”>
<label>Nome</label>
<input name=”nome” id=”nome” type=”text”/>
</div>
<div class=”row”>
<label>Cognome</label>
<input type=”text” name=”cognome” id=”cognome”/>
</div>
<div class=”row”>
<label>Email</label>
<input type=”text” name=”email” id=”email”/>
</div>
<div class=”row”>
<label>Telefono</label>
<input type=”text” name=”telefono” id=”telefono”/>
</div>
<div class=”row”>
<label></label>
<input type=”button” onclick=”validateForm(); return false;” value=”Invia” name=”invia” id=”invia”/>
<img src=”130.png” id=”loader” style=”display:none” />
</div>
</form>
</body>
</html>
La funzione javascript
<script type=”text/javascript”>
function validateForm(){
//RECUPERO DEI PARAMETRI
$(‘#loader’).show();
$(‘#invia’).attr(‘disabled’,true);
var nome=$(‘#nome’).val();
var cognome=$(‘#cognome’).val();
var email=$(‘#email’).val();
var telefono=$(‘#telefono’).val();
//ESECUZIONE DELLA CHIAMATA AJAX
$.ajax(
{
type: ‘POST’,
url: ‘miofile.php’,
data: {nome_p:nome, cognome_p:cognome, email_p:email,telefono_p:telefono},
success: function(data){
//SE CI SONO ERRORI MOSTRO L’ERRORE ALTRIMENTI UN MESSAGGIO DI CONFERMA
if(data.error==1){
alert(data.message);
}else{
alert(“Registrazione ok”);
}
$(‘#loader’).hide();
$(‘#invia’).attr(‘disabled’,false);
},
complete: function(data){},
failure: function(data){
alert(“Errore nella chiamata ajax”);
$(‘#loader’).hide();
$(‘#invia’).attr(‘disabled’,false);
}
});
}
</script>
File PHP lato server
<?php
$json=array();
//RECUPERO DEI PARAMETRI
$nome=$_POST[‘nome_p’];
$cognome=$_POST[‘cognome_p’];
$email=$_POST[‘email_p’];
$telefono=$_POST[‘telefono_p’];
//ELABORAZIONE DEI PARAMETRI (VALIDAZIONE)
/*
Qui potete fare i controlli sui campi passati in post
*/
//RITORNO ERRORI (AD ESEMPIO IN JSON)
header(‘content-type: application/json’);
$json[‘error’]=1;
$json[‘message’]=”Controlla i campi”;
echo json_encode($json);
?>
Per monitorare le chiamate ajax (ma non solo) esistono degli strumenti molto interessanti da installare direttamente sui browser. Uno tra questi è FireBug che è possibile installare dai vari app store dei browser. Proprio riguardo questo plugin sto lavorando ad una piccola guida che spero di riuscire a pubblicare presto.