Chiamate AJAX

Chiamate AJAX:

Definizione

Ajax acronimo di Asynchronous JavaScript and XML è una tecnica di programmazione che attraverso un linguaggio ECMAScript come Javascript scambia dati con un linguaggio server-side come PHP o ASP. Lo scambio avviene asincronamente e senza ricarica esplicita da parte dell’utente, i dati vengono caricati in background.
Sebbene il nome per esteso faccia pensare che le risposte vengono inviate nel formato XML in realtà possono essere inviati come testo semplice, HTML o JSON.

Cosa è il JSON?

Nei seguenti esempi utilizzeremo JSON Javascript Standard Object Notation, questo linguaggio rappresenta i dati serializzati in due formati:

  • chiave valore {“chiave1″:”valore1”, “chiave2″:”valore2”}
  • liste ordinate di valori, chiamate array – [“valore1”, “valore2”]

Leggere da file JSON

Nella cartella data sul nostro server abbiamo il seguente file JSON:

{
  "books": [
    {"title":"Viaggio ad Ixtlan","author":"Carlos Castaneda"},
    {"title":"L'isola del Tonal","author":"Carlos Castaneda"}
  ]
}

di conseguenza scriviamo un apposito script in Javascript per leggere questo file books.json e utilizzarlo all’interno della pagina HTML

function getBooks(){
    console.log('fetch data');
    var request=new XMLHttpRequest();
    request.onload=function (){
        if(request.status === 200){
            var response=JSON.parse(request.responseText);
            var data='';
            for(var i=0;i<response.books.length;i++){
                data+='<div>';
                data+='<h4>'+response.books[i].title+'</h4>';
                data+='<p>'+response.books[i].author+'</p>';
                data+='</div>';
            }
            document.getElementById('content').innerHTML=data;
        }
    };
    request.open('get','data/books.json',true);
    request.send(null);
}
var elBtnfetchData=document.getElementById('fetch-data');
elBtnfetchData.addEventListener('click',getBooks,true);

con l’istruzione var request=new XMLHttpRequest(); creiamo l’oggetto per la richiesta. Controlliamo se lo stato della risposta del server corrisponde al codice 200 ovvero OK .

Alcuni codici di risposta HTTP

200OkLa richiesta è OK (questa è la risposta standard per richieste HTTP riuscite)
403ForbiddenLa richiesta era corretta, ma il server si rifiuta di rispondere
404Page Not FoundLa pagina richiesta non è stata trovata ma potrebbe essere nuovamente disponibile in futuro
500Internal Server ErrorUn messaggio di errore generico, dato quando nessun messaggio più specifico è adatto
502Bad GatewayIl server fungeva da gateway o proxy e ha ricevuto una risposta non valida dal server upstream
503Service UnavailableIl server non è attualmente disponibile (sovraccarico o inattivo)
alcuni messaggi HTTP

Il metodo JSON.parse() analizza una stringa JSON, costruendo il valore JavaScript o l’oggetto descritto dalla stringa. Nel nostro caso lo invochiamo per l’attributo responseText.

Con il seguente ciclo creiamo gli elementi HTML da visualizzare

for(var i=0;i<response.books.length;i++){
                data+='<div>';
                data+='<h4>'+response.books[i].title+'</h4>';
                data+='<p>'+response.books[i].author+'</p>';
                data+='</div>';
}

NOTA: l’attributo response.books deve il suo nome al fatto che corrisponde al formato del nostro file JSON

{
"books": [

quindi per tutti i dati trovati in corrispondenza dei suoi elementi di indice i response.books[i] utilizzeremo le chiavi title e author per leggere i relativi valori.

Quindi, il metodo open specifichiamo il tipo di richiesta

open(method, url, async)Specifica il tipo di richiesta
method: il tipo di richiesta: GET o POST
url: la posizione del server (file).
async: true (asincrono) o false (sincrono)
metodo open di XMLHttpRequest

il metodo send() invia la richiesta al server

request.open('get','data/books.json',true);
request.send(null);

nota che utilizziamo il metodo get, l’url relativo del file sul nostro server e la modalità asincrona

Infine, con le ultime due istruzione assegnamo un ascoltatore degli eventi che al click sul relativo bottone viene richiamata la funzione che effettua la chiamata AJAX.

Fare una query MySQL

Considerando che lo scambio di dati proveniente da query ad un database è attualmente alla base di gran parte di web app, app per mobile e app desktop è fondamentale creare degli scripts lato server che codificano in JSON i dati estratti dal DB.

<?php
include '../config/db_connect.php';
$sql="SELECT * FROM articles";
$result=$conn->query($sql);
if($result->num_rows>0){
    $i=0;
    $data=array();
    while($row=$result->fetch_assoc()){
        $data[$i]=$row;

    }
    echo json_encode($data);
}else{
    echo "non ci sono risultati";
}
$conn->close();

Al fine di codificare le informazioni prepariamo un array con l’istruzione $data=array(); successivamente, mentre scorriamo i risultati assegnato ogni tupla all’array $data[]=$row;

Infine serializziamo i dati con la funzione json_encode($data);

Il JSON in output avrà la seguente struttura

[{"id":"1","title":"PHP e MySQL","body":"Connessione ad un database MySQL\r\nInserimento di dati in una tabella \r\nLettura dati di una tabella"}

Proseguiamo riformulando lo script JS

function getBooks(){
    console.log('fetch data');
    var request=new XMLHttpRequest();
    request.onload=function (){
        if(request.status === 200){
            var response=JSON.parse(request.responseText);
            var data='';
            for(var i=0;i<response.length;i++){
                data+='<div>';
                data+='<h4>'+response[i].title+'</h4>';
                data+='<p>'+response[i].body+'</p>';
                data+='</div>';
            }
            document.getElementById('content').innerHTML=data;
        }
    };
    request.open('get','src/list-articles.php',true);
    request.send(null);
}
var elBtnfetchData=document.getElementById('fetch-data');
elBtnfetchData.addEventListener('click',getBooks,true);

Diversamente dal primo esempio, in questo caso utilizziamo direttamente l’oggetto response per leggere i dati

for(var i=0;i<response.length;i++){
                data+='<div>';
                data+='<h4>'+response[i].title+'</h4>';
                data+='<p>'+response[i].body+'</p>';
                data+='</div>';
}

Fare una query MySQL con invio parametri

Dunque, per inviare parametri modifichiamo lo script JS e conseguentemente quello PHP

function getBooks(){
    console.log('fetch data');
    var title=document.getElementById('title').value;
    var request=new XMLHttpRequest();
    request.onload=function (){
        if(request.status === 200){
            var response=JSON.parse(request.responseText);
            var data='';
            for(var i=0;i<response.length;i++){
                data+='<div>';
                data+='<h4>'+response[i].title+'</h4>';
                data+='<p>'+response[i].body+'</p>';
                data+='</div>';
            }
            document.getElementById('content').innerHTML=data;
        }
    };
    request.open('POST','src/select-articles.php');
    request.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    request.send("title="+title);
}
var elBtnfetchData=document.getElementById('fetch-data');

elBtnfetchData.addEventListener('click',getBooks,true);

Dato per assunto che abbiamo aggiunto una casella di input (nel file HTML) in cui l’utente specificherà una parola come termine di ricerca, acquisiremo il suo valore con l’istruzione var title=document.getElementById('title').value;

successivamente selezioneremo la modalità post con il metodo open

request.open('POST','src/select-articles.php');

specifichiamo l’header della richiesta HTTP con
request.setRequestHeader(“Content-type”, “application/x-www-form-urlencoded”);

infine invieremo la richiesta inviando il valore da ricercare nella forma query string
request.send(“title=”+title);

Come potete notare abbiamo utilizzato la modalità post e conseguentemente modifichiamo lo script PHP

<?php
include '../config/db_connect.php';
$title = $_POST["title"];
$sql="SELECT * FROM articles WHERE title LIKE '%$title%'";
$result=$conn->query($sql);
if($result->num_rows>0){
    $i=0;
    $data=array();
    while($row=$result->fetch_assoc()){
        $data[$i]=$row;
        $i++;
    }
    echo json_encode($data);
}else{
    echo "non ci sono risultati";
}
$conn->close();

Affinché i termini di ricerca inseriti dall’utente si trovino in qualsiasi parte del title utilizziamo il MySQL Wildcard Character % che rappresenta da 0 a n caratteri

Pubblicato da Carlo Contardi

Carlo Contardi, docente di informatica e sviluppatore Full Stack, condivide la sua passione per la programmazione e l’informatica attraverso il suo blog Space Coding. Offre preziosi consigli e soluzioni pratiche a chi vuole imparare a programmare o migliorare le proprie abilità. 🚀👨‍💻

Translate »