Enviando Dados com Requisições AJAX em JavaScript

Para enviar dados ao servidor a partir do código JavaScript em uma requisiçã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 requisiçã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 requisição e assim extrair os dados recebidos:

let userName = ""; // recebendo os dados como string
// recebendo os dados da requisiçã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);
        }
      };

      // requisiçã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:

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