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.
Indice dei contenuti
La pagina HTML/JS
Creiamo una pagina html a piacimento, ad esempio ajax.html e incolliamoci il codice qui sotto. Ad esempio potremmo metterla nella cartella di lavoro del nostro Apache o Xamp/Wamp. Per brevità, inseriamo il codice JavaScript che effetua le operazioni AJAX direttamente immerso nel codice HTML.
<!DOCTYPE html>
<html lang="it">
<head>
<title>Esempio di Ajax e JavaScript</title>
<meta charset="utf-8">
</head>
<body>
<h1>AJAX hello world</h1>
<p></p>
<form id="formesempio">
<label>Nome: </label><input type="text" id="nome" name="nome">
<input type="button" value="SALUTA" id="bottone">
</form>
<br><br>
Risposta: <span id="risposta"></span>
</body>
<script>
let bottone = document.querySelector("#bottone");
bottone.addEventListener("click", saluta, true);
function saluta()
{
let nome = document.querySelector("#nome").value;
if (nome == '')
{
return;
}
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200)
{
document.querySelector("#risposta").innerHTML = this.responseText;
}
};
xmlhttp.open("GET", "http://localhost/risposta.php?nome=" + nome, true);
xmlhttp.send();
}
</script>
</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?nome=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 PHP
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
//header("Access-Control-Allow-Origin: *");
if (isset($_REQUEST["nome"]))
{
$nome = $_REQUEST["nome"];
}
$testo = "Ciao $nome!";
echo $testo; 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.
Elementi ripetibili
In realtà la maggior pare degli esercizi che vedremo anche in queste pagine ha una forma abbastanza definita e ripetitiva. Questo significa che uno script ajax, pur cambiando l’esercizio assume sempre la stessa connotazione che proviamo a schematizzare.
// QUERYSELECTOR ED EVENTI
//CHE SCATENANO LA RICHIESTA AJAX
function ajax()
{
// PRELEVO DATI DA FORM, LINK ED ALTRI
// OGGETTI DOM DA DARE IN PASTO ALL'AJAX
// COME VALORE DEI PARAMETRI NELLA OPEN
const xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange =
function()
{
if (this.readyState == 4 && this.status == 200)
{
// VISUALIZZO IL RISULTATO DELLA RICHIESTA AJAX
// PUO' ESSERE UN TESTO SEMPLICE SU -> this.responseText;
// PUO' ESSERE UN JSON PER DATI STRUTTURATI
// IL JSON PUO' ESSERE VISUALIZZATO CON ELENCHI, TABELLE, CARD
// USANDO createElement E append
}
};
xmlhttp.open("GET", "pagina.php?parametro=valore, true);
xmlhttp.send();Errore CORS Policy
Nonostante i codici siano intrinsecamente corretti, lo script potrebbe generare un fastidioso errore in questa forma:
Access to XMLHttpRequest at '...... from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, isolated-app, chrome-extension, chrome, https, chrome-untrusted.
Non ci dilunghiamo sulla questione dietro l’errore. E’ dovuto alle versioni più recenti di Apache che introducono elementi stringenti di sicurezza. Ci limitiamo a provare a suggerire una soluzione efficace.
Per risolvere questo messaggio: assicuratevi che nella richiesta ajax il path sia del tipo http://localhost/pagina.php Non lasciate solo pagina.php diretta ma fate sempre riferimento o ad un server online o a localhost se siete in locale con WAMP/XAMP.
Access to XMLHttpRequest at '......' from origin 'null' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
Questo secondo errore è un po’ più rognoso perché potrebbe prevede una modifica più strutturale del nostro server se si dovesse presentare. Cominciamo con l’inserire questa riga di codice nel nostro script PHP, all’inizio prima di cominciare a reperire i dati GET/POST. Se siamo fortunati potrebbe bastare!
header("Access-Control-Allow-Origin: *");Se anche questo non è bastato dobbiamo agire sul file di configurazione apache, di solito httpd.conf, che potete trovare in “/etc/apache2/httpd.conf” su linux o cliccando tra le opzioni varie del vostro xamp/wamp. Troviamo uno dei sottogruppi <Directory>, <Location>, <Files> o <VirtualHost> e aggiungiamo una riga
Header set Access-Control-Allow-Origin "*"
in alternativa in qualsiasi punto esterno alle directory
<IfModule mod_headers.c>
Header set Access-Control-Allow-Origin: *
</IfModule>Riavviamo il nostro xamp/wamp o Apache.
Se ancora la sfortuna ci perseguita, probabilmente la versione Xamp/Wamp/Apache che avete non ha il modulo degli header abilitato/caricato. Su Linux basta digitare in una shell il comando da root
$ sudo a2enmod headers
Su Xamp/Wamp c’è una sezione dedicata dei menu dove abilitare le single voci di menu.
Ultima modifica 21 Marzo 2023
