JQuery AJAX – Come far comunicare due pagine del sito

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.

ajax logo

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.

Richieste asincrone AJAX con JQuery

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):

  • Utilizzando un metodo classico con l’invio di un modulo <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).
  • Utilizzando il metodo Ajax, con l’invio del modulo, la pagina invierà una richiesta ad una seconda pagina senza il refresh. La seconda pagina elaborerà le informazioni e restituirà uno specifico valore (come prima). L’utente continuerà la navigazione sulla pagina corrente.

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.

Perché JQuery

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.

jquery logo

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");
    },
  });
});

Come eseguire la richiesta

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:

  • Verifica che il tipo di richiesta sia corretta al tuo scopo: POST e GET sono differenti!
  • Verifica che l’URL di destinazione sia corretto. Molte volte l’errore più comune sta nell’url indicato. Anche nell’estensione stessa (“.php”).
  • Controlla preventivamente che nella pagina di destinazione non ci siano errori di tipo server (errore 500).
  • Prevedi l’errore e gestisci l’eccezione. success restituisce il valore previsto dal tuo script PHP nella seconda pagina. error gestisce l’errore in caso qualcosa vada storto.

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:

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

CAPTCHA