Como Carregar e Exibir Dados JSON com XMLHttpRequest em JavaScript

O JSON é um dos formatos mais populares para armazenamento e transmissão de dados. Ele é frequentemente usado para transferir dados por meio de requisições AJAX. Para obter JSON usando XMLHttpRequest, você deve configurar duas propriedades:

Para que a resposta do servidor seja tratada como um objeto JSON, atribua o valor "json" à propriedade responseType. Os navegadores que suportam essa configuração garantem que a resposta possa ser lida diretamente como um objeto JavaScript.

xhr.responseType = "json";

Além disso, ao enviar a requisição, é necessário definir o cabeçalho Accept com o valor "application/json":

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

Como servidor, utilizaremos Node.js, assim como no artigos anteriorer, por ser a opção mais simples. No entanto, você pode usar qualquer outra tecnologia de servidor ou um servidor web.

Vamos definir uma pasta para o projeto no disco rígido, onde criaremos três arquivos:

index.html: a página principal da aplicação.
data.json: o arquivo contendo os dados em formato JSON.
server.js: o arquivo da aplicação servidor, que usará Node.js.

Definindo os Dados

O arquivo data.json representará os dados a serem carregados e terá o seguinte conteúdo:

{
    "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"
            }
        }
    ]
}

O elemento users representa um conjunto de usuários, cada um deles representado pelo elemento user. Para cada user, são definidos dois atributos: name (nome do usuário) e age (idade do usuário). Além disso, cada user possui um elemento aninhado contacts, que representa os dados de contato do usuário por meio dos elementos phone e email.

Definindo o Servidor

O arquivo server.js conterá o código do servidor Node.js. Vamos definir o seguinte código:

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

http
  .createServer((request, response) => {
    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("Servidor iniciado em http://localhost:3000"));

Vamos passar rapidamente pelo código. Primeiro, importamos os módulos que vamos usar:

const http = require("http"); // para lidar com requisições
const fs = require("fs"); // para ler arquivos do disco rígido

Para criar o servidor, usamos a função http.createServer(). Essa função recebe um callback que é chamado sempre que uma requisição é feita ao servidor. Esse callback tem dois parâmetros: request (contém os dados da requisição) e response (controla o envio da resposta).

No callback, podemos obter o caminho do recurso requisitado usando a propriedade request.url. Assim, se a requisição for para o caminho "/data", enviamos o arquivo data.json:

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

Para ler o arquivo, usamos a função fs.readFile. O primeiro parâmetro é o caminho do arquivo (neste caso, assumimos que está na mesma pasta que o arquivo do servidor). O segundo parâmetro é um callback que é chamado após a leitura do arquivo, recebendo seu conteúdo como o segundo parâmetro data.

Para todas as outras requisições, enviamos o arquivo index.html:

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

Por fim, usamos a função listen() para iniciar o servidor na porta 3000. Assim, o servidor estará disponível no endereço http://localhost:3000.

Carregando JSON na Página Web

Para obter o arquivo data.json do servidor, definiremos o seguinte código no arquivo index.html:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Exemplo JSON</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"); // Requisição GET para /data
      xhr.responseType = "json"; // Define o tipo de resposta
      xhr.setRequestHeader("Accept", "application/json"); // Aceita apenas JSON
      xhr.send(); // Executa a requisição
    </script>
  </body>
</html>

Para obter os dados, enviamos uma requisição para o endereço "/data". Para que os dados recebidos sejam automaticamente convertidos para um documento JSON, atribuímos o valor "json" à propriedade responseType.

xhr.responseType = "json";

Além disso, é necessário definir o cabeçalho Accept com o valor "application/json":

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

No manipulador de eventos onload, o objeto JSON está disponível através da propriedade response, que, neste caso, é simplesmente exibido no console:

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

Após definir todos os arquivos, abra o console, navegue até a pasta do servidor usando o comando cd e inicie o servidor com o comando node server.js:

C:\app>node server.js
Servidor iniciado em http://localhost:3000

Depois de iniciar o servidor, você pode abrir o navegador e acessar o endereço http://localhost:3000. A página será exibida, e o código JavaScript fará uma requisição para o endereço "/data". O servidor responderá com o conteúdo do arquivo data.json, e o console do navegador exibirá esse conteúdo:

Obtendo objetos JSON com XMLHttpRequest no JavaScript

Exibindo Dados JSON na Página

No exemplo anterior, recebemos um objeto JSON e podemos acessar suas propriedades para extrair os dados necessários. Por exemplo, vamos exibir os dados dos usuários em uma tabela na página web. Para isso, modificamos o código do index.html da seguinte forma:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Exemplo JSON</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();
          // Seleciona todos os elementos user
          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"; // Define o tipo de resposta como JSON
      xhr.setRequestHeader("Accept", "application/json"); // Aceita apenas JSON
      xhr.send();

      // Função para criar a tabela
      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("Nome"));
        ageColumnHeader.appendChild(document.createTextNode("Idade"));
        contactColumnHeader.appendChild(document.createTextNode("Contatos"));
        headerRow.appendChild(nameColumnHeader);
        headerRow.appendChild(ageColumnHeader);
        headerRow.appendChild(contactColumnHeader);
        table.appendChild(headerRow);
        return table;
      }

      // Função para criar uma linha da tabela
      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>

Nesse caso, carregamos a tabela na página dentro do elemento com o identificador "content", obtido no código JavaScript com a variável contentDiv:

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

Para criar a tabela, definimos duas funções auxiliares. A função createTable cria um elemento table com uma linha de cabeçalhos das colunas. A função createRow recebe, através de parâmetros, o nome, idade e contatos do usuário e cria uma linha correspondente.

Na parte principal do código, fazemos a requisição ao servidor. Após receber os dados JSON, selecionamos o array de objetos user:

const json = xhr.response;
const table = createTable();
// Seleciona todos os objetos user
const users = json.users;

Em seguida, iteramos por todos os objetos user, extraímos as propriedades name, age e contacts.email de cada um, e criamos uma linha na tabela:

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);
}

Dessa forma, ao acessar a página index.html, os dados no formato JSON serão carregados e uma tabela será criada com base nesses dados:

Carregando JSON em tabela com XMLHttpRequest no JavaScript