55 chiamate AJAX ad un server che risponde in JSON

Pubblicato il di

In questa lezione chiameremo attraverso AJAX (Asynchronous JavaScript and XML) dei dati lato server passati in JSON e convertirli in oggetto js.

Creiamo un file php sul nostro server web (remoto o locale) e chiamiamolo json.php e copiamo il seguente codice:

<?php

$res = [
    'name'=>'Ugo',
    'address'=>['street'=>'via Roma', 'city'=>'Torino'],
    'languages'=>['spanish','english','italian','german']
];

echo json_encode($res);

Ho creato un array php (la forma è molto simile a js) chiamato $res che contiene 3 chiavi: name, address e languages. La chiave address ha come valore a sua volta un array associativo (composto da chiave => valore), mentre la chiave languages ha come valore un array (semplice).

La funzione json_encode di php permetterà di trasformare l’array $res in dati json, ottenendo la stampa a browser col comando echo, ecco quello che ottengo sul browser:

{"name":"Ugo","address":{"street":"via Roma","city":"Torino"},"languages":["spanish","english","italian","german"]}

il dato che ottengo ha 3 chiavi, la prima, name, è di tipo stringa chiave/valore , la seconda, address, è di tipo oggetto, la terza, languages, è di tipo array.

Ora vediamo come prendere questi dati con AJAX e inserirli nel tag <pre> della pagina index.html che andremo a creare nella stessa cartella

<!DOCTYPE html>
<html lang="it">
<head>
    <meta charset="UTF-8">
    <title>AJAX, JSON</title>
    
    <script>
        
    </script>
    
</head>
<body>

<pre id="result"></pre>

</body>
</html>

ora andiamo ad istanziare nel tag <script> un oggetto di tipo XML HTTP request che non è altro che un oggetto che ci permetterà di effettuare le chiamate AJAX

<script>

    let xhr = new XMLHttpRequest();

</script>

XMLHttpRequest è un oggetto standard ormai compatibile con tutti i browser, che ha a sua volta un metodo predefinito per prelevare i dati JSON che si chiama open() e necessita di 2 parametri obbligatori

let xhr = new XMLHttpRequest();
xhr.open('GET','json.php',true);

Il primo parametro del metodo open() è il metodo di prelevamento dei dati, nel nostro caso è GET.

Il secondo è l’url , nel nostro caso basta il nome del file json.php perchè index.html si trova nello stesso percorso, altrimenti dovremmo specificare la path, tenendo presente che per ragioni di sicurezza le chiamate AJAX sono ammesse solo nell’ambito dello stesso server.

Il terzo parametro boleano, è il tipo di chiamata, cioè se deve essere sincrona o asincrona, nel nostro caso true è asincrona, perchè voglio che la pagina continui a lavorare anche se la chiamata è in corso.

Una volta aperti i dati col metodo open() bisogna inviarli col metodo send().

Visto che è una chiamata asincrona, ho bisogno di monitorare quando è stata fatta la chiamata HTTP al server ed ha restituito la risposta., questo può essere fatto utilizzando la proprietà predefinita onreadystatechange dell’oggetto XMLHttpRequest. A onreadystatechange passo una funzione che verrò chiamata quando gli stati della chiamata cambiano

let xhr = new XMLHttpRequest();
xhr.open('GET','json.php',true);
xhr.onreadystatechange = function () {
    
}

La chiamata è conclusa quando la proprietà readyState ha il valore quattro (4) e che il server abbia risposto correttamente con lo state uguale a duecento (200)

xhr.onreadystatechange = function () {
    xhr.readyState == 4 && xhr.status == 200
}

faccio la verifica racchiudendo gli stati in un if che se è true vado ad inserire la risposta in una variabile reso che creo. La risposta può essere di vari tipi se fosse un XML la troverei nella proprietà responseXML , nel nostro caso essendo di tipo testo, la trovo nella proprietà responseText dell’oggetto XMLHttpRequest

xhr.onreadystatechange = function () {
    if(xhr.readyState == 4 && xhr.status == 200) {
        let resp = xhr.responseText;
    }
}

Ora andrebbero fatte alcune verifiche, tipo che la stringa non sia vuota, verificare che sia una stringa corretta JSON, nel nostro caso sappiamo già il valore restituito, quindi andiamo direttamente a parsificarla in un oggetto js col metodo parse() che già conosciamo e controlliamo il tutto in console

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

Controlliamo nel browser nella sezione network se compare la chiamata di tipo XHR.

Ora accedo tramite il DOM all’elemento con ID result del tag <pre> tramite il metodo getElementById() dell’oggetto globale document che memorizzo in una variabile risultato

let risultato = document.getElementById('result');

ora sfruttando la proprietà innerHTML che mi inserire codice HTML vado ad inserire nel tag <pre> la risposta parsificata contenuta nella variabile resp

risultato.innerHTML = resp;

ecco il codice completo di index.html

<!DOCTYPE html>
<html lang="it">
<head>
    <meta charset="UTF-8">
    <title>AJAX, JSON</title>

    <script>

        let xhr = new XMLHttpRequest();
        xhr.open('GET','json.php',true);
        xhr.send();
        xhr.onreadystatechange = function () {
            if(xhr.readyState == 4 && xhr.status == 200) {
                let resp = xhr.responseText;
                let obj = JSON.parse(resp);
                console.log(obj);

                let risultato = document.getElementById('result');
                risultato.innerHTML = resp;
            }
        };


    </script>

</head>
<body>

<pre id="result"></pre>

</body>
</html>