AJAX, acronimo di Asynchronous JavaScript and XML, una tecnica utilizzata per effettuare uno scambio di dati tra due pagine dello stesso sito.
AJAX è molto utilizzata a questo scopo, poiché consente ad una pagina web di inviare dati a una seconda pagina web dello stesso sito, e di conseguenza anche riceverli indietro. Questo metodo è molto spesso usato anche perché permette di inviare e ricevere dati senza il refresh della pagina corrente.
Le richieste Ajax sono comunemente programmate tramite codice JavaScript, tuttavia, per mia esperienza trovo molto può comodo l’utilizzo del framework JavaScript più famoso, ovvero JQuery.
Con l’uso di JQuery, invece che JavaScript, i risultati sono i medesimi, cambia leggermente la sintassi che viene resa più semplice nella scrittura e nella comprensione.
In questo articolo spiegherò in dettaglio come eseguire una richiesta sincrona AJAX con codice JQuery, in modo che anche un principiante possa capire e apprendere al meglio questa fantastica tecnica.
Come già accennato, con Ajax è possibile eseguire le stesse operazioni che normalmente in una pagina web avvengono con l’invio dei moduli <form>
HTML, dove i dati vengono inviati al server ed elaborati durante l’aggiornamento o il cambio della pagina web corrente. Gli usi più comuni sono: moduli di accesso, invio di messaggi, mettere articoli nel carrello e altro ancora.
Anche in questo caso dovrà avvenire un’elaborazione dei dati da parte del server, ma questa avverrà su un’altra pagina. Il principio è simile a quello di avere due pagine aperte contemporaneamente, in cui la prima invia dati alla seconda e ne riceve di conseguenza.
Un esempio comune di utilizzo di tecnica Ajax è un modulo di accesso (login):
<form>
, quando l’utente invierà i dati di accesso, la pagina corrente si aggiornerà restituendo uno specifico valore (come true per accesso effettuato o false per le credenziali sbagliate).Questa tecnica è molto utile per rendere la navigazione web più dinamica e fluida, consentendo di eseguire numerose operazioni contemporaneamente.
Oltretutto, con AJAX si possono gestire richieste di tipo POST e GET (le più comuni, ma ce ne sono anche altre) proprio come un form HTML.
JQuery è un framework JavaScript, il più usato e famoso al mondo. JQuery è molto affidabile e permette di eseguire script con una sintassi più semplice e intuitiva.
Questa necessità si presenta soprattutto con AJAX, poiché la sintassi JavaScript è leggermente più complessa. Qui in basso una semplice richiesta JQuery:
$("button").click(function(){
$.ajax({
url: "hello.php",
success: function(result){
console.log("hello world");
},
});
});
Il modo più comune per eseguire una richiesta AJAX con JQuery è attraverso il metodo $.axaj in cui specificare una serie di dati per il suo completamento.
Nel seguente esempio ipotizzerò un sistema di accesso “molto semplificato” in cui verranno inviati i dati relativi all’account alla seconda pagina, che restituirà true o false in base alla correttezza dei dati.
Per fare questo è necessario creare il codice per entrambe le pagine, nella prima verrà eseguita la richiesta AJAX e nell’altra il codice PHP per l’elaborazione server.
Pagina “login.php”
$("button").click(function(){
$.ajax({
method : "POST",
url: "verifica-credenziali.php",
data: {
username: "mario",
password: "MiaPassword123",
azione: "login"
},
success: function(result){
if(result == true){
console.log("accesso effettuato");
}else{
console.log("credenziali errate");
}
},
error: function(result){
console.log("credenziali errate");
}
});
});
Presta attenzione a queste informazioni:
Pagina di destinazione “verifica-credenziali.php”
<?php
require("conn-database.php");
if(isset($_POST['azione']))
{
if($_POST['azione'] == "login")
{
if(isset($_POST['username']) && isset($_POST['password'])){
$username = $_POST['username'];
$password = $_POST['password'];
if(EseguiAccesso($connessione_db,$username,$password))
{
//accesso effettuato
echo true;
}
else
{
//credenziali errate
echo false;
}
}
else
{
//errore
echo false;
}
}
}
Ricapitolando, quando la richiesta AJAX invierà i dati alla pagina di destinazione, questa eseguirà un comune controllo e proverà ad eseguire l’accesso con le informazioni fornite. Se corrette restituirà true, in caso contrario false.
NOTA BENE:
In questo esempio non ho utilizzato tecniche contro l’SQL Injection, quindi non è sicuro copiare e incollare questo codice senza le dovute aggiunte e accorgimenti. TI consiglio di leggere la nostra guida contro SQL incjection prima di proseguire.
Iscriviti alla nostra Newsletter qui e seguici su Facebook per aggiornamenti!
Articoli recenti: