Envío de formularios — Protocolo HTTP

En esta lección vamos a ver las peculiaridades de enviar formularios en HTTP.

Los formularios son elementos HTML que se utilizan para recopilar información de los visitantes de un sitio web. Incluyen campos de texto para introducir datos desde el teclado, listas para seleccionar datos predefinidos, casillas de verificación para establecer parámetros.

Vamos a trabajar con un servidor local, ya que al probar nuestros ejemplos en servidores externos nos encontramos con dificultades. En principio, puedes experimentar en cualquier servidor disponible. Solo asegúrate de que funcione a través de HTTP y no a través de HTTPS, ya que la interacción es un poco diferente y no será suficiente con telnet.

Cuando enviamos un formulario, enviamos algún tipo de datos. Dado que HTTP no tiene lugares especiales para enviar datos de formularios, se envían en el cuerpo de la solicitud. Dependiendo del encabezado Content-Type establecido, se interpreta cómo se codificarán los datos al enviarlos. Normalmente se utiliza el siguiente formato Content-Type: application/x-www-form-urlencoded. Es un formato sencillo: clave igual valor y un ampersand (el signo et (&)) entre ellos.

login=smith&password=12345678

De esta manera simple, podemos continuar la cadena y enviar tantos datos como queramos. Ahora intentemos hacer una solicitud a nuestro servidor local.

telnet localhost 8080

POST /login HTTP/1.1
Host: codicatesthost.com
Content-Type: application/x-www-form-urlencoded
Content-Length: 29

login=smith&password=12345678 # enviamos los datos
HTTP/1.1 200 OK
X-Powered-By: Express
Connection: close
Content-Type: text/html; charset=utf-8
Content-Length: 7
ETag: W/"c-r0WEeVxJ7IpMIG20rN7HX9ndB4c"
Date: Thu, 09 Jul 2020 03:32:54 GMT

¡Hecho!
Conexión cerrada por el host remoto.

Después de enviar los 29 caracteres que especificamos en Content-Length, el servidor nos envía inmediatamente la respuesta HTTP/1.1 200 OK, cuyo body contiene la palabra "¡Hecho!". Como se puede ver, la respuesta también incluye un Content-Length de 7.

Hay algunas peculiaridades más que debemos conocer cuando trabajamos con formularios en HTTP. La primera está relacionada con la codificación. Dado que es un formato de texto, es muy fácil cometer ambigüedades. Supongamos que el signo = se utiliza en la contraseña.

login=smith&password=1234=5678

¿Cómo se debe interpretar correctamente este resultado? Es posible que el servidor entienda lo que estamos enviando, ya que el análisis se realiza de izquierda a derecha, pero no hay garantía de ello. Además, el nombre del campo también puede contener caracteres especiales. Por lo tanto, todo lo que se envía al servidor debe estar codificado. Normalmente, los navegadores se encargan de la codificación. Pero en general, si estás escribiendo scripts y las bibliotecas que estás utilizando no se encargan de esto, tendrás que hacerlo tú mismo. El carácter codificado = se ve así: %3D, y no importa si es una solicitud POST o GET. Estas secuencias de caracteres codificados se pueden ver a menudo en la barra de direcciones del navegador. A continuación se muestra un ejemplo de body con = codificado:

login=smith&password=1234%3D5678

Otra peculiaridad está relacionada con la necesidad de enviar datos anidados. Por ejemplo, una matriz de opciones. En este caso, el cuerpo puede verse así:

user[login]=smith&user[password]=12345678

La peculiaridad es que HTTP no puede manejar este tipo de datos. Los middlewares se encargan de su procesamiento. Pero si, por ejemplo, estás escribiendo tu propia implementación de un servidor, tendrás que analizar estos datos por ti mismo.

Otras formas de codificación

Además de la codificación normal clave=valor, existen otros formatos, pero el más popular es el formato JSON. Tiene muchas ventajas, entre las que se incluyen:

• JSON es una cadena, lo cual es necesario para transmitir datos a través de la red.
• No depende del lenguaje.
• Permite describir estructuras jerárquicas complejas.
• Es fácil de leer para los humanos.

En este momento, se considera el estándar para el intercambio de información entre servicios en Internet. Una cadena JSON se ve así:

{
    "firstName": "Miguel",
    "lastName": "Sánchez",
    "children": [
        {
            "firstName": "Juan",
            "lastName": "Sánchez"
        },
        {
            "firstName": "Dolores",
            "lastName": "Sánchez"
        }
    ]
}

Para enviar datos en este formato, se utiliza el encabezado Content-Type: application/json.

Materiales adicionales

1. Envío de datos a través de HTTP
2. Wikipedia / JSON