Carregando JSON com XMLHttpRequest - 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.

Além disso, ao enviar a requisição, é necessário definir o cabeçalho Accept com o valor "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.

Além disso, é necessário definir o cabeçalho Accept com o valor "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:

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:

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: