JSON e AJAX - Node.js

JSON é um dos formatos mais populares para armazenamento e transmissão de dados, e o Express possui todas as funcionalidades necessárias para trabalhar com JSON.

Recebendo dados em formato JSON

Vamos supor que na pasta do projeto exista um arquivo index.html com o seguinte código:

<!DOCTYPE html>
<html>
<head>
    <title>Programício</title>
    <meta charset="utf-8" />
</head>
<body>
    <h1>Insira seus dados</h1>
    <form id="myForm" action="/user" method="post">
        <p>
            <label>Nome</label><br>
            <input type="text" name="userName" />
        </p>
        <p>
            <label>Idade</label><br>
            <input type="number" name="userAge" />
        </p>
        <input type="submit" value="Enviar" />
    </form>
<script>
// dados para envio
const myForm = document.getElementById("myForm");
myForm.addEventListener("submit", async (e) => {
    e.preventDefault();
    // dados para envio
    const username = myForm.userName.value;
    const userage = myForm.userAge.value;

    const response = await fetch("/user", { 
        method: "POST", 
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({name: username, age: userage})
    });
    // extraindo texto da resposta do objeto de resposta
    const responseText = await response.text();
    console.log(responseText);
});
</script>
</body>
</html>

Aqui, temos um formulário com dois campos para inserir o nome e a idade do usuário. Ao enviar o formulário, um manipulador de eventos intercepta o envio. Na função do manipulador, obtemos os valores dos campos, serializamos em um objeto JSON, e enviamos para o servidor usando AJAX no endereço /user.

Em seguida, definimos no arquivo principal da aplicação - app.js - o código que receberá os dados enviados:

const express = require("express");

const app = express();
// criando um parser para dados em formato JSON
const jsonParser = express.json();

app.post("/user", jsonParser, function (request, response) {
    const user = request.body;
    console.log(user);
    if(!user) return response.sendStatus(400);
    const responseText = `Seu nome: ${user.name}  Sua idade: ${user.age}`;
    response.send(responseText); // enviando resposta
});

app.get("/", function(request, response){
    response.sendFile(__dirname + "/index.html");
});

app.listen(3000, () => console.log("Servidor iniciado em http://localhost:3000"));

Primeiramente, para receber dados em formato JSON, é necessário criar um parser utilizando a função json() do Express:

const jsonParser = express.json();

Depois, aplicamos jsonParser para realizar o parsing automático do corpo da requisição em um objeto JSON, e enviamos uma resposta ao cliente com uma string baseada nos dados recebidos:

app.post("/user", jsonParser, function (request, response) {
    const user = request.body;
    console.log(user);
    if(!user) return response.sendStatus(400);
    const responseText = `Seu nome: ${user.name}  Sua idade: ${user.age}`;
    response.send(responseText); // enviando resposta
});

Neste caso, request.body representará o objeto JSON enviado pelo cliente. Como o objeto enviado pelo cliente contém as propriedades name e age, podemos acessá-las usando request.body.name e request.body.age.

Vamos executar a aplicação e acessar a raiz do site. Insira alguns dados e, após o envio, a resposta do servidor será exibida no console do navegador:

Exemplo de envio de dados em formato JSON com AJAX no Express

Vale destacar que, em vez de criar explicitamente o objeto jsonParser, podemos integrar o parsing automático de JSON no pipeline de tratamento de requisições usando o método:

app.use(express.json());

Dessa forma, o arquivo app.js ficará assim:

const express = require("express");

const app = express();
// configurando o parsing automático do corpo da requisição em JSON
app.use(express.json());

app.post("/user", function (request, response) {
    const user = request.body;
    console.log(user);
    if(!user) return response.sendStatus(400);
    const responseText = `Seu nome: ${user.name}  Sua idade: ${user.age}`;
    response.send(responseText); // enviando resposta de volta
});

app.get("/", function(_, response) {
    response.sendFile(__dirname + "/index.html");
});

app.listen(3000);

Enviando Dados em Formato JSON

Para enviar dados em formato JSON, utilizamos o método response.json(). Em princípio, podemos enviar um objeto usando o método padrão response.send(request.body). No entanto, o método response.json() também define o cabeçalho "Content-Type" como "application/json", serializa os dados em JSON usando a função JSON.stringify() e então envia os dados usando response.send().

Vamos definir um exemplo de envio de dados em formato JSON no arquivo app.js:

const express = require("express");

const app = express();
// configurando o parsing automático do corpo da requisição em JSON
app.use(express.json());

app.post("/user", function (request, response) {
    const user = request.body;
    console.log(user);
    if (!user) return response.sendStatus(400);
    const responseText = `Seu nome: ${user.name}  Sua idade: ${user.age}`;
    response.json({ message: responseText }); // enviando dados em formato JSON
});

app.get("/", function(request, response) {
    response.sendFile(__dirname + "/index.html");
});

app.listen(3000);

Aqui, enviamos os mesmos dados do exemplo anterior, mas agora eles são colocados na propriedade message do objeto enviado. Para enviar o objeto, utilizamos o método response.json.

No código do cliente, na página index.html, obteremos a resposta do servidor em formato JSON:

<!DOCTYPE html>
<html>
<head>
    <title>Programício</title>
    <meta charset="utf-8" />
</head>
<body>
    <h1>Insira seus dados</h1>
    <form id="myForm" action="/user" method="post">
        <p>
            <label>Nome</label><br>
            <input type="text" name="userName" />
        </p>
        <p>
            <label>Idade</label><br>
            <input type="number" name="userAge" />
        </p>
        <input type="submit" value="Enviar" />
    </form>
<script>
// dados para envio
const myForm = document.getElementById("myForm");
myForm.addEventListener("submit", async (e) => {
    e.preventDefault();
    // dados para envio
    const username = myForm.userName.value;
    const userage = myForm.userAge.value;

    const response = await fetch("/user", { 
        method: "POST", 
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ name: username, age: userage })
    });
    // obtendo o objeto enviado em formato JSON
    const data = await response.json();
    console.log(data.message);
});
</script>
</body>
</html>

Neste exemplo, a resposta do servidor é obtida em formato JSON e a mensagem é exibida no console. Assim, estamos garantindo que os dados são corretamente enviados e recebidos utilizando JSON, proporcionando uma comunicação eficiente entre cliente e servidor.