Încărcarea JSON folosind XMLHttpRequest

JSON reprezintă unul dintre cele mai populare formate de stocare și transmitere a datelor. În special, JSON este adesea utilizat la transmiterea datelor prin solicitări ajax. Pentru a primi JSON folosind XMLHttpRequest, trebuie să efectuați două setări:

• Pentru ca răspunsul serverului să fie tratat ca un obiect JSON, proprietății responseType i se atribuie valoarea "json". Browserele care suportă această valoare garantează că răspunsul poate fi citit direct ca un obiect JavaScript

xhr.responseType = "json";

• De asemenea, la trimiterea solicitării, pentru antetul Accept trebuie să se specifice valoarea "application/json":

xhr.setRequestHeader("Accept", "application/json");

Ca server, la fel ca în articolul anterior, vom utiliza Node.js ca cea mai simplă opțiune, dar, desigur, dacă doriți, puteți utiliza orice altă tehnologie de nivel server sau un server web.

Astfel, să definim pentru proiect un folder pe discul dur, în care vom crea trei fișiere:

• index.html: pagina principală a aplicației
• data.json: fișierul cu date în format JSON
• app.js: fișierul aplicației server, care va utiliza Node.js

Definirea datelor

Fișierul data.json va reprezenta datele încărcate și să aibă următorul conținut:

{
   "users": [
       {
           "name": "Tom",
           "age": 39,
           "contacts": {
               "email": "tom@smail.com",
               "phone": "+1234567890"
           }
       },
       {
           "name": "Bob",
           "age": 43,
           "contacts": {
               "email": "bob@tmail.com",
               "phone": "+1334567181"
           }
       },
       {
           "name": "Sam",
           "age": 28,
           "contacts": {
               "email": "sam@xmail.com",
               "phone": "+1434567782"
           }
       }
   ]
}

Aici elementul users reprezintă un set de utilizatori, fiecare dintre aceștia fiind reprezentat de elementul user. Pentru fiecare astfel de element sunt definite două atribute: name (numele utilizatorului) și age (vârsta utilizatorului). Și, de asemenea, elementul user are un element încorporat contacts, care reprezintă datele de contact ale utilizatorului sub forma elementelor încorporate phone și email.

Definirea serverului

Fișierul app.js va reprezenta codul serverului Node.js. Să definim în acesta următorul cod:

const http = require("http");
const fs = require("fs");

http.createServer((request, response)=>{
   // dacă sunt solicitate datele JSON
   if(request.url == "/data"){
       fs.readFile("data.json", (_, data) => response.end(data));
   }
   else{
       fs.readFile("index.html", (_, data) => response.end(data));
   }
}).listen(3000, ()=>console.log("Serverul a fost lansat la adresa http://localhost:3000"));

Să trecem rapid prin cod. La început, se conectează pachetele cu funcționalitatea pe care intenționăm să o utilizăm:

const http = require("http");   // pentru prelucrarea cererilor de intrare
const fs = require("fs");       // pentru citirea fișierelor de pe discul dur

Pentru crearea serverului se folosește funcția http.createServer(). În această funcție se transmite o funcție-handler, care este apelată de fiecare dată când la server sosește o solicitare. Această funcție are doi parametri: request (conține datele solicitării) și response (gestionează trimiterea răspunsului).

În funcția-handler, folosind proprietatea request.url putem obține calea resursei către care a fost trimisă solicitarea. Astfel, în acest caz, dacă a venit o solicitare pe calea "/data", atunci trimitem data.json:

if(request.url == "/data"){
   fs.readFile("data.json", (_, data) => response.end(data));
}

Pentru citirea fișierului se utilizează funcția fs.readFile. Primul parametru al funcției - adresa fișierului (în acest caz se presupune că fișierul se află în același folder cu fișierul serverului server.js). Al doilea parametru - o funcție care este apelată după citirea fișierului și primește conținutul său prin al doilea său parametru data.

Pentru toate celelalte solicitări se trimite în răspuns fișierul index.html:

else{
   fs.readFile("index.html", (_, data) => response.end(data));
}

La sfârșit, cu ajutorul funcției listen() lansăm serverul web pe portul 3000. Adică serverul va fi lansat la adresa http://localhost:3000/

Încărcarea JSON pe pagina web

Pentru a obține fișierul "data.json" de pe server, să definim în fișierul index.html următorul cod:

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8" />
   <title>FDC.COM</title>
</head>
<body>
<script>
const xhr = new XMLHttpRequest();
xhr.onload = () => {
   if (xhr.status == 200) {
       const json = xhr.response;
       console.log(json);
   }
};
xhr.open("GET", "/data");              // cerere GET către /data
xhr.responseType = "json";              // stabilim tipul de răspuns
xhr.setRequestHeader("Accept", "application/json");    // acceptăm doar json
xhr.send();     // executăm solicitarea
</script>
</body>
</html>

Pentru a obține datele se trimite o solicitare la adresa "/data". Pentru ca datele obținute să fie automat interpretate ca un document JSON, proprietății responseType i se atribuie valoarea "json".

xhr.responseType = "json";

În plus, ar trebui să setăm pentru antetul Accept valoarea "application/json":

xhr.setRequestHeader("Accept", "application/json");

În handlerul evenimentului onload, obiectul JSON este disponibil prin proprietatea response, care în acest caz este pur și simplu afișat în consolă:

xhr.onload = () => {
   if (xhr.status == 200) {
       const json = xhr.response;
       console.log(json);
   }
};

După definirea tuturor fișierelor, în consolă ne vom deplasa la folderul serverului folosind comanda cd și vom lansa serverul folosind comanda node app.js.

După lansarea serverului, putem accesa în browser adresa http://localhost:3000, unde ne va fi afișată pagina, în codul JavaScript al căreia va avea loc o solicitare la adresa "/data". Serverul va trimite în răspuns conținutul fișierului data.json, iar consola browserului va afișa acest conținut:

Afișarea datelor JSON pe pagina

În obiectul JSON obținut în exemplul de mai sus, putem accesa proprietățile, extrăgând din obiect datele de care avem nevoie. De exemplu, să presupunem că dorim să afișăm datele despre utilizatori din JSON într-un tabel pe pagina web. Pentru aceasta, să modificăm codul index.html în modul următor:

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8

" />
   <title>FDC.COM</title>
</head>
<body>
<div id="content"></div>
<script>
const contentDiv = document.getElementById("content");

const xhr = new XMLHttpRequest();
xhr.onload = () => {
   if (xhr.status == 200) {
       const json = xhr.response;
       const table = createTable();      
       // selectăm toți utilizatorii    
       const users = json.users;      
       for (let i = 0; i < users.length; i++) {
           const user = users[i];        
           const row = createRow(user.name, user.age, user.contacts.email);
           table.appendChild(row);        
       }      
       contentDiv.appendChild(table);
   }
};
xhr.open("GET", "/data");
xhr.responseType = "json";
xhr.setRequestHeader("Accept", "application/json");
xhr.send();

// creăm un tabel
function createTable() {  
   const table = document.createElement("table");  
   const headerRow = document.createElement("tr");  
   const nameColumnHeader = document.createElement("th");  
   const ageColumnHeader = document.createElement("th");  
   const contactColumnHeader = document.createElement("th");
   nameColumnHeader.appendChild(document.createTextNode("Nume"));  
   ageColumnHeader.appendChild(document.createTextNode("Vârstă"));  
   contactColumnHeader.appendChild(document.createTextNode("Contacte"));  
   headerRow.appendChild(nameColumnHeader);  
   headerRow.appendChild(ageColumnHeader);  
   headerRow.appendChild(contactColumnHeader);
   table.appendChild(headerRow);
   return table;
}
// creăm o singură linie pentru tabel
function createRow(userName, userAge, userContact) {  
   const row = document.createElement("tr");  
   const nameColumn = document.createElement("td");  
   const ageColumn = document.createElement("td");  
   const contactColumn = document.createElement("td");  
   nameColumn.appendChild(document.createTextNode(userName));  
   ageColumn.appendChild(document.createTextNode(userAge));  
   contactColumn.appendChild(document.createTextNode(userContact));  
   row.appendChild(nameColumn);  
   row.appendChild(ageColumn);  
   row.appendChild(contactColumn);  
   return row;
}
</script>
</body>
</html>

În acest caz, încărcăm tabelul pe pagina în elementul cu identificatorul "content", pe care îl obținem în codul JavaScript în elementul contentDiv.

const contentDiv = document.getElementById("content");

Pentru crearea tabelului sunt definite două funcții auxiliare. Funcția createTable creează un element table cu un singur rând - antetele coloanelor. Funcția createRow acceptă ca parametri numele, vârsta și contactele utilizatorului și pentru aceștia creează un rând.

În partea principală a codului, efectuăm o solicitare către server. După ce primim datele JSON, selectăm array-ul de obiecte user:

const json = xhr.response;
const table = createTable();      
// selectăm toate obiectele user    
const users = json.users;    

Apoi, parcurgem toate obiectele user, selectăm proprietățile name, age și contacts.email ale fiecărui obiect și creăm un rând în tabel în baza acestor date:

for (let i = 0; i < users.length; i++) {
   const user = users[i];        
   const row = createRow(user.name, user.age, user.contacts.email);            
   table.appendChild(row);        
}

Astfel, la accesarea paginii index.html, datele în format JSON vor fi încărcate, și pe baza lor va fi creat un tabel.