Enviando Dados em uma Solicitação AJAX - JavaScript

Para enviar dados ao servidor a partir do código JavaScript em uma solicitação AJAX, os dados são passados ao método send() do objeto XMLHttpRequest.

Para testar o envio, assim como em artigos anteriores, usaremos Node.js como servidor, por ser a opção mais simples. Então, criaremos um arquivo server.js e definiremos o seguinte código para o servidor que receberá os dados:

const http = require("http");
const fs = require("fs");
    
http.createServer(async (request, response) => {
    if (request.url === "/user") {
        let userName = ""; // recebendo os dados como string
        // recebendo os dados da solicitação e adicionando-os à string
        for await (const chunk of request) {
            userName += chunk;
        }
        userName += " Smith";
        response.end(userName);
    } else {
        fs.readFile("index.html", (_, data) => response.end(data));
    }
}).listen(3000, () => console.log("Servidor iniciado em http://localhost:3000"));

Neste caso, ao acessar o endereço "/user", o servidor recebe todos os dados enviados:

if (request.url === "/user") {

Podemos iterar sobre o objeto da solicitação e assim extrair os dados recebidos:

let userName = ""; // recebendo os dados como string
// recebendo os dados da solicitação e adicionando-os à string
for await (const chunk of request) {
    userName += chunk;
}

Aqui, os dados enviados, na forma de objetos chunk, são adicionados à string userName. Suponhamos que uma simples string de texto seja enviada ao servidor, então cada chunk de dados representará uma parte dessa string.

Além disso, vamos supor que o cliente envie um nome de usuário ao servidor. Para exemplificar, adicionamos um sobrenome ao nome recebido e o enviamos de volta ao cliente:

userName += " Smith";
response.end(userName);

Agora, vamos definir na página index.html o código para enviar dados a este servidor:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Programício</title>
</head>
<body>
<script>
// dados para enviar
const user = "Tom";

const xhr = new XMLHttpRequest();

// manipulador para a resposta do servidor
xhr.onload = () => {
    if (xhr.status === 200) { 
        console.log(xhr.responseText);
    } else {
        console.log("Resposta do servidor: ", xhr.statusText);
    }
};

// solicitação POST ao recurso /user
xhr.open("POST", "/user");
xhr.send(user); // enviando o valor user no método send
</script>
</body>
</html>

Para o envio, é utilizado o método POST. E os dados enviados são uma simples string "Tom". Ou seja, texto simples é enviado ao servidor. Como o servidor também envia texto de volta, usamos a propriedade xhr.responseText para obter a resposta. Ao executar esta página web, os dados serão enviados ao servidor e a resposta poderá ser vista no console do navegador.

Envio de JSON para o servidor Node.js na função XMLHttpRequest e JavaScript

Enviando JSON

De maneira semelhante, é possível enviar dados com uma estrutura mais complexa. Por exemplo, vamos considerar o envio de JSON. Para isso, definimos o seguinte servidor no lado do Node.js:

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

http.createServer(async (request, response) => {
    if (request.url === "/user") {
        // obtendo a representação em string da resposta
        let data = "";
        for await (const chunk of request) {
            data += chunk;
        }
        // esperamos dados do tipo {"name":"value","age":1234}
        const user = JSON.parse(data); // parse da string para JSON

        // para teste, alteramos os dados do objeto recebido
        user.name = user.name + " Smith";
        user.age += 1;
        // enviamos o objeto alterado de volta ao cliente
        response.end(JSON.stringify(user));
    } else {
        fs.readFile("index.html", (_, data) => response.end(data));
    }
}).listen(3000, () => console.log("Servidor iniciado em http://localhost:3000"));

Neste caso, esperamos receber no servidor um objeto JSON com duas propriedades: name e age. O servidor modifica os valores dessas propriedades e envia o objeto alterado de volta ao cliente.

Na página web, configuramos um objeto JSON para envio e recebemos os dados de volta:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Programício</title>
</head>
<body>
<script>
// dados para envio
const tom = {
    name: "Tom",
    age: 37
};
// codificando o objeto em formato JSON
const data = JSON.stringify(tom);
const xhr = new XMLHttpRequest();

xhr.onload = () => {
    if (xhr.status === 200) {
        const user = JSON.parse(xhr.responseText);
        console.log(user.name, "-", user.age);
    } else {
        console.log("Resposta do servidor: ", xhr.statusText);
    }
};

xhr.open("POST", "/user");
xhr.setRequestHeader("Content-Type", "application/json");

xhr.send(data);
</script>
</body>
</html>

Aqui, o objeto tom, que possui duas propriedades (name e age), é enviado ao servidor. Antes do envio, ele é codificado em formato JSON usando a função JSON.stringify():

const data = JSON.stringify(tom);

Ao enviar, utilizamos o método setRequestHeader() para definir o cabeçalho "Content-Type" com o valor "application/json", indicando que estamos enviando dados no formato JSON:

xhr.setRequestHeader("Content-Type", "application/json");

No manipulador do evento load, primeiro fazemos o parse do texto da resposta do formato JSON para um objeto JavaScript padrão:

const user = JSON.parse(xhr.responseText);

Em seguida, exibimos os dados do objeto recebido no console do navegador: