63 Chiamata AJAX per estrarre dati da php

Pubblicato il di

Vedremo in questa lezione come trasformare una chiamata AJAX che fa uso dell’oggetto XMLHttpRequest in promise. Creiamo il nostro file promise.html

<!DOCTYPE html>
<html lang="it">
<head>
    <meta charset="UTF-8">
    <title>Promises</title>
    <script src="ajax.js"></script>
</head>
<body>
<h1>Ajax</h1>
</body>
</html>

In aggiunta, avremo anche un file index.php che contiene un array con dei dati e li restituisce con JSON

<?php

$data =[
  [
      'title' => 'PHP7 la guida completa',
      'author' => 'faghy',
      'date_published' => '2018-01-01'
  ],
    [
        'title' => 'HTML5 CSS3 la guida completa',
        'author' => 'faghy',
        'date_published' => '2017-01-01'
    ],
    [
        'title' => 'Javacript, la guida completa',
        'author' => 'faghy',
        'date_published' => '2019-01-01'
    ]
];

header('Content-type:application/json');
echo json_encode($data);

exit;

l’array data di php ha una struttura simile agli array di js. L’ header Content-type:application/json dichiara che il tipo di dati è JSON, mentre il metodo encode di php trasforma i dati dell’array $data in una stringa JSON.

Come si faceva col vecchio metodo, andremo ad effettuare una chiamata AJAX da js per trasformare i dati dell’array di php in una stringa JSON.

Andiamo ad aggiungere nel <body> del nostro file un <div> dove verranno inseriti i dati prelevati dal file php

<div id="content"></div>

Visto che con js andremo a modificare il DOM aggiungiamo un Listener nel file Ajax.js che andiamo a creare

window.onload = function () {
    alert('loaded');
}

Lanciamo un alert di prova per assicurarci che il file js sia caricato. Ora che abbiamo la conferma che il js viene caricato, cancelliamo l’ alert e effettuiamo la chiamata AJAX istanziando l’oggetto XMLHttpRequest.

let xhr = new XMLHttpRequest();
xhr.open('GET', 'index.php');
xhr.send();

Lanciamo il metodo open che richiede come parametri il tipo di metodo che nel nostro caso è GET e il percorso. Infine inviamo i dati col metodo send.

Ora verifichiamo lo stato della chiamata col metodo readyState che nel caso ha successo si trova nello stato 200

xhr.readyState = function () {
    if(xhr.status === 200) {
        let obj = JSON.parse(xhr.responseText);
    }
}

Se l’esito del confronto di status è positivo catturiamo nell’oggetto obj col metodo JSON.parse, la stringa che ci viene restituita con responseText . Aggiungiamo la parte di errore usando il metodo error se il confronto non va a buon fine

xhr.error = () => {
    "use strict";
    alert('Problemi di risposta dal server');
}

Ispezionando il codice dall’inspector del browser, nella tab rete possiamo vedere la nostra chiamata xhr effettuata via GET con stato 200 se tutto è andato correttamente. Nella parte risposta dovremmo poter vedere i nostri dati dell’array php. Ad ogni modo aggiungiamo l’oggetto obj in console per vederli meglio e sostituiamo il metodo readyState che corrisponde solo ad uno stato col metodo onreadystatechange che corrisponde ad un evento e aggiungiamo anche un controllo sul readyState uguale a 4 che significa che è conclusa la chiamata

xhr.onreadystatechange = function () {
    if(xhr.readyState === 4 && xhr.status === 200) {
        let obj = JSON.parse(xhr.responseText);
        console.log(obj);
    }
};

Il readyState delle chiamate AJAX sono 5:

  • 0  ancora la chiamata non è stata inviata
  • 1 il metodo open è stato invocato
  • 2 la chiamata è stata inviata con send e sono disponibili gli headers HTTP
  • 3 i dati sono in download
  • 4 la chiamata è completata

Ora che abbiamo i dati in console parsificati come stringa nell’oggetto obj e tutto funziona correttamente, possiamo per esempio ciclarli e inerirli nella pagina HTML come lista <ul> al posto dell’oggetto in console

let ul = '<ul>';
ul += obj.map((book) => '<li>' + book.title + '</li>');
ul += '</ul>';