Enviando Formulários com Requisição Ajax - JavaScript

Com o objeto FormData, é possível enviar dados de um formulário a partir do código JavaScript para um servidor via Ajax. Vamos considerar um exemplo simples. Como servidor, usaremos o Node.js, assim como em artigos anteriores.

Primeiro, criaremos um arquivo server.js, que representará o servidor. Definiremos a lógica mais básica:

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

http.createServer(async (request, response) => {

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

        let body = "";   // buffer para dados recebidos
        // recebendo dados da requisição no buffer
        for await (const chunk of request) {
            body += chunk;
        }
        // para o parâmetro name
        let userName = "";
        // para o parâmetro age
        let userAge = 0;

        // expressão regular para buscar nome e valor do campo do formulário
        const exp = /Content-Disposition: form-data; name="([^\"]+)\"\r\n\r\n(\w*)/g;
        let formElement;
        while ((formElement = exp.exec(body))) {
            paramName = formElement[1];   // obtendo o nome do elemento do formulário
            paramValue = formElement[2];  // obtendo o valor do elemento do formulário
            console.log(paramName, ":", paramValue);  // exibindo no console
            if (paramName === "name") userName = paramValue;
            if (paramName === "age") userAge = paramValue;
        }
        response.end(`Your name: ${userName}  Your Age: ${userAge}`);
    } else {
        fs.readFile("index.html", (_, data) => response.end(data));
    }
}).listen(3000, () => console.log("Servidor iniciado em http://localhost:3000"));

Vamos percorrer rapidamente o código. Primeiro, conectamos os pacotes com funcionalidades que vamos utilizar:

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

Para criar o servidor, usamos a função http.createServer(). Passamos uma função manipuladora, que é chamada sempre que uma requisição chega ao servidor. Essa função possui dois parâmetros: request (contém os dados da requisição) e response (controla o envio da resposta).

Na função manipuladora, utilizamos a propriedade request.url para obter o caminho do recurso ao qual a requisição foi direcionada. Aqui, assumimos que o cliente enviará o formulário para o endereço "/user". Primeiro, processamos a requisição para esse endereço:

Para obter os valores enviados pelo formulário, lemos o corpo da requisição na variável body:

let body = "";   // buffer para dados recebidos
// recebendo dados da requisição no buffer
for await (const chunk of request) {
    body += chunk;
}

Para ilustrar o conteúdo de body após ler o corpo da requisição, suponha que o formulário tenha dois campos chamados name e age. Nesse caso, o corpo da requisição seria algo assim:

------WebKitFormBoundarya9nLzvDVEN5gPA5Q
Content-Disposition: form-data; name="name"

Tom
------WebKitFormBoundarya9nLzvDVEN5gPA5Q
Content-Disposition: form-data; name="age"

39
------WebKitFormBoundarya9nLzvDVEN5gPA5Q--

Aqui vemos o marcador de limite ------WebKitFormBoundarya9nLzvDVEN5gPA5Q, que define o início e o fim do corpo da requisição, além de separar os valores dos campos do formulário. (O valor do marcador de limite pode variar). Para cada campo do formulário, é definido Content-Disposition: form-data;. Em seguida, o atributo name especifica o nome do campo do formulário. Após uma linha em branco, o valor correspondente do campo é indicado. No exemplo acima, temos dois campos de formulário: o campo name com valor "Tom" e o campo age com valor 39.

Nossa tarefa é extrair os nomes e valores dos campos do formulário. Para isso, usamos a expressão regular:

Percorremos o corpo da requisição com a expressão regular e extraímos todos os elementos do formulário e seus valores:

while ((formElement = exp.exec(body))) {
  paramName = formElement[1];   // obtendo o nome do elemento do formulário
  paramValue = formElement[2];  // obtendo o valor do elemento do formulário

  if (paramName === "name") userName = paramValue;
  if (paramName === "age") userAge = paramValue;
}

Vale notar que esta não é uma análise completa, que não leva em conta muitos aspectos (envio de arrays, arquivos, etc.), sendo usada apenas para demonstrar requisições Ajax.

Depois de obter os dados da requisição, enviamos uma mensagem de resposta ao cliente:

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

Definindo o Cliente

Agora, vamos definir o arquivo index.html, que estará na mesma pasta que o arquivo do servidor server.js e representará o código do cliente:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Programício</title>
</head>
<body>
<script>
// dados para envio
const formData = new FormData();  
formData.append("name", "Tom");  
formData.append("age", 39); 
  
const xhr = new XMLHttpRequest();  
xhr.onload = () => {
    if (xhr.status == 200) { 
        console.log(xhr.responseText);
    } else {
        console.log("Resposta do servidor: ", xhr.statusText);
    }
};
  
xhr.open("POST", "user", true);  
xhr.send(formData);
</script>
</body>
</html>

Aqui, os dados do formulário são definidos manualmente como um objeto FormData. Após criar o objeto FormData, podemos adicionar propriedades e seus valores usando o método append(). Em seguida, enviamos o objeto FormData para o servidor como argumento do método send(). O método HTTP é definido como POST.

No manipulador onload, exibimos a mensagem recebida do servidor no console.

Finalmente, no 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

Após iniciar o servidor, podemos acessar a página no navegador em http://localhost:3000, onde o código JavaScript enviará uma requisição POST para o endereço /user. O código JavaScript receberá a resposta do servidor e a exibirá no console:

No exemplo acima, os dados do formulário são definidos manualmente. No entanto, também podemos enviar dados de formulários definidos no código HTML. Por exemplo, podemos alterar o código da página index.html da seguinte forma:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Programício</title>
</head>
<body>
<form id="myForm" method="post" action="/user">
<p>
    <label>Nome do Usuário:</label><br>
    <input name="name" />
</p>
<p>
    <label>Idade do Usuário:</label><br>
    <input name="age" />
</p>
<input type="submit" value="Enviar" />
</form>
<script>
// dados para envio
const myForm = document.getElementById("myForm");
myForm.addEventListener("submit", (e) => {
    e.preventDefault();
    const formData = new FormData(myForm);
  
    const xhr = new XMLHttpRequest();  
    xhr.onload = () => {
        if (xhr.status == 200) { 
            console.log(xhr.responseText);
        }
    };
    xhr.open("POST", "user", true);  
    xhr.send(formData);
});
</script>
</body>
</html>

Aqui, o código HTML define um formulário com dois campos de entrada para envio ao servidor. Esses campos também possuem os nomes name e age. No código JavaScript, interceptamos o envio do formulário, obtemos um objeto FormData a partir do formulário e o enviamos para o servidor.