Domenica, 30 Giugno 2019 08:35

Un semplice esempio Ajax con JavaScript e PHP

Scritto da

Un semplice esempio per capire il funzionamento di Ajax con JavaScript e PHP

Ogni volta che carichiamo una pagina php o, ad esempio, la richiamiamo con la "action" di una form, ci tocca uscire dalla pagina in cui ci troviamo e attendere il caricamento del nuovo script. Le pagine web recenti però sembrano software articolati che non escono mai dalla stessa pagina. Siamo, ultimamente almeno, abituati ad avere un feedback istantaneo delle nostre azioni e dei nostri click direttamente sulla pagina che stiamo visionando. Questo in parte è dovuto all'uso massiccio che si fa di javascript e jquery, ma quando i dati non possono essere elaborati lato client sul nostro browser, ma richiedono una elaborazione o reperimento lato server in nostro soccorso ci viene Ajax che ci consente di invocare uno script PHP che ci restituisce un risultato  senza dover uscire dalla pagina.

L'esempio è molto semplice: abbiamo una pagina html/php con un form minimale dove possiamo inserire il nostro nome. L'idea è quella di applicare una serie di funzioni sul testo. Sebbene siano tutte azioni facilmente eseguibili con JavaScript o JQuery lato client e quindi direttamente sul nostro browser a pagina caricata, vogliamo eseguire queste funzioni sul server usando uno script PHP ma senza dover uscire dalla nostra pagina per caricare lo script da zero.

Creiamo una pagina html, ad esempio ajax.html e incolliamoci il codice qui sotto:

<!DOCTYPE html>
<html lang="it">
<head>

<title>Esempio di Ajax e JavaScript</title>
<meta charset="utf-8">

<script>
function rispondi() {
    var nome = document.getElementById("nome").value;
    if (nome == '')
    {
      return;
    }


    var xmlhttp = new XMLHttpRequest();
    xmlhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200)
        {
            document.getElementById("risposta").innerHTML = this.responseText;
        }
    };
    xmlhttp.open("GET", "risposta.php?n=" + nome, true);
    xmlhttp.send();

}
</script>
</head>
<body>
<h1>Un semplice esempio che preleva un dato da un altro script PHP e lo scrive a "runtime" nella casellina.</h1>
<p>
Provate a scrivere nella casella una nome: lo script Ajax/PHP manipolerà la stringa e restituirà una risposta curiosa.<br>
La particolarità? La procedura non esce dalla pagina, non ne carica un'altra ma semplicemente interroga uno script e visualizza la risposta.<br>
L'esempio è banale, si poteva fare tutto in JS ma la particolarità è proprio che la funzionalità è calcolata lato server e non lato client.
</p>

<form id="formesempio">
Nome: <input type="text" id="nome">
<input type="button" value="Gioca" onclick="javascript:rispondi()">
</form>
<p>Risposta: <span id="risposta"></span></p>
</body>
</html>

 Come vedete c'è una piccola parte di classico codice HTML e una funzione JavaScript. La funzione JavaScript si occupa di richiede lo script risposta.php passandogli un parametro GET come avverrebbe in un normalissimo browser/URL risposta.php?n=nomescritto.

Il lettore può subito vedere come il cuore dello script sia l'oggetto xmlhttprequest che simula in pratica la chiamata allo script php passandogli il parametro. Se gli arriva una risposta positiva dal server con tanto di stato 200, va a scrivere con javascript il risultato dello script nel nostro spazio individuato dal tag con id risposta. Le chiamate open e send attivano la funzione dichiarata nelle righe precedenti onreadystatechange

Lo script risposta.php non ha una grafica particolare o tag HTML ma solo una funzioncina semplice che stampa una stringa di testo. Il codice è riportato qui sotto:

<?php

//prendo il parametro n dall'URL
$n = $_GET["n"];

$risposta = "";

$lower  = strtolower($n);
$len    = strlen($n);
$upper  = strtoupper($n);
$revert = strrev($n);

$risposta = "Il tuo nome a lettere piccole e' ".$lower." e' lungo ".$len. " caratteri, in stampatello e' ".$upper. " e rigirato ".$revert;
print $n === "" ? "niente da dire" : $risposta;
?>

L'esempio è utile a prendere dimestichezza con Ajax ma non ha un grande risvolto pratico. Il lettore può immaginare però la reattività e il feedback istantaneo di una pagina web che ad esempio carica in corsa i valori di una tendina in base ad altre selezioni o ci fornisce una risposta dal database in base a determinate azioni o dati inseriti.

 

Letto 611 volte
Prof. Alfredo Centinaro

Docente di "Scienze e tecnologie informatiche", "Tecnologie e progettazione di sistemi informatici", "Sistemi e Reti" presso IIS Alessandrini-Marino (Teramo), consulente e sviluppatore web. Ha collaborato per anni come sviluppatore presso MHT - Treviso, assistente Sistemi ed elaborazione dell'informazione in UniTE Corso di laurea in Scienze del turismo culturale, tutor presso Telecom Italia Learning Services (L'Aquila)

Joomla SEF URLs by Artio