Saltar al contenido principal

Práctica 102. Peticións e respostas HTTP con Webhook.site

Nesta práctica veremos como funcionan as peticións e as respostas HTTP utilizando a aplicación Webhook.site.

Requisitos​

Apartado 1​

Crea un ficheiro formulario.html e copia nel o seguinte código HTML:

formulario.html
<!DOCTYPE html>
<html lang="gl">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Formulario</title>
    <style>
      body {
        font-family: Arial, sans-serif;
        padding: 2rem;
        background-color: #f0f0f0;
      }

      form {
        background: white;
        padding: 1.5rem;
        border-radius: 8px;
        max-width: 400px;
        margin: auto;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
      }

      label {
        display: block;
        margin-top: 1rem;
        font-weight: bold;
      }

      input[type='text'] {
        width: 100%;
        padding: 0.5rem;
        margin-top: 0.5rem;
        border: 1px solid #ccc;
        border-radius: 4px;
      }

      button {
        margin-top: 1.5rem;
        padding: 0.75rem 1.5rem;
        background-color: #007acc;
        color: white;
        border: none;
        border-radius: 4px;
        cursor: pointer;
      }

      button:hover {
        background-color: #005fa3;
      }
    </style>
  </head>

  <body>
    <form method="POST" action="PEGAR_AQUI_URL_WEBHOOK.SITE">
      <label for="nome">Nome:</label>
      <input type="text" id="nome" name="nome" required />

      <label for="apelido">Apelido:</label>
      <input type="text" id="apelido" name="apelido" required />

      <button type="submit">Enviar</button>
    </form>
  </body>
</html>

Realiza os seguintes pasos:

  • Vai a Webhook.site e copia a URL que se che dá despois do texto Your unique URL. Non peches a web.
  • Abre formulario.html e pega a URL copiada no paso anterior no campo action do formulario. Garda os cambios e cerra o ficheiro.

Apartado 2​

Realiza os seguintes pasos:

  • Abre formulario.html nunha ventá privada de Firefox e activa as Herramientas para desarrolladores na lapela Red.
  • Actualiza a URL para que o documento volva a cargar.
  • Pulsa no botón da papeleira para limpar as peticións HTTP que se mostran.
  • Na rodiña de opcións, marca a opción Registros persistentes. Deste xeito se enviamos unha nova petición a través do navegador, non se borran todas as peticións realizas como ata o momento.
  • Cubre os datos do formulario e preme en Enviar.
  • Vaite á primeira petición que se mostra. Vaite á cabeceira da petición e activa a opción Sin procesar. Realiza unha captura.

Responde ás seguintes preguntas coa información anterior:

  • Que método HTTP se utiliza?
  • Cal é o tipo MIME do contido e cal é o seu significado?
  • Cal é o tamaño do corpo da petición?

Apartado 3​

Agora temos unha nova lapela Solicitud na chamada HTTP. Nela podemos ver o contido enviado.

Realiza os seguintes pasos:

  • Selecciona e activa a opción Sin procesar. Aquí poderemos ver o contido que enviamos no formulario. Realiza unha captura.
  • Comproba a resposta HTTP e indica que tipo de contido MIME se envía.
  • Volve á web Webhook.site. Realiza unha captura onde se vexan os datos enviados no formulario anterior.