Cómo enviar la solicitud de publicación usando xmlhttprequest en JavaScript

El xmlhttprequest es una API en forma de objetos que se utiliza para enviar o recibir datos de los servidores. El método send () de xmlhttprequest hace una solicitud al servidor. La solicitud es asíncrona de forma predeterminada, pero también puede ser sincrónica. Si la solicitud es sincrónica, entonces el método regresa solo cuando llega la respuesta de otra manera se entrega la respuesta utilizando eventos.

HMLHTTPREQUEST es parte de AJAX, que son técnicas de desarrollo web que pueden usarse para desarrollar aplicaciones web asíncronas. En las páginas web asincrónicas podemos enviar y recibir datos de los servidores y actualizar las páginas web sin recargar las páginas web.

La solicitud enviada por xmlhttprequest puede ser una solicitud Get o Post. Podemos obtener en la mayoría de los casos, pero la publicación es más segura y debe usarse cuando tengamos grandes cantidades de datos o entrada de usuario desconocida.

Enviar una solicitud de publicación usando xmlhttprequest

Para enviar una solicitud a través de xmlhttprequest, primero necesitamos hacer un nuevo objeto xmlhttprequest:

const solicitud = new XMLHTTPREQUEST ();

Para enviar una solicitud, necesitamos usar los métodos Open () y enviar (). El método Open () toma tres parámetros que son el método (get/post), URL (ubicación del archivo en el servidor) y un valor booleano para la naturaleza asincrónica o sincrónica de la solicitud:

pedido.abrir ("post", "file_path", true);

Para una solicitud sincrónica:

pedido.abrir ("post", "file_path", falso);

Con solicitudes asíncronas, JavaScript no espera a que la solicitud se complete y pueda ejecutar otros scripts mientras se completa la solicitud. No se recomienda utilizar solicitudes síncronas, ya que la aplicación web puede detenerse si el servidor está ocupado.

Antes de enviar los datos mediante el método send (), también podemos usar setRequestHeader () para enviar los datos como un formulario HTML con un nombre de encabezado y un valor de encabezado:

pedido.setRequestheader (encabezado, valor);

Ahora podemos enviar datos con un parámetro opcional que especifica el cuerpo de la solicitud:

pedido.enviar (cuerpo);

La propiedad OnReadyStateChange se puede usar en el objeto XMLHTTPRequest para ejecutar una función una vez que se ha recibido una respuesta del servidor:

pedido.onreadyStateChange =>
si esto.ReadyState == xmlhttprequest.Hecho && esto.estado == 200)
// El código se ejecutará una vez que la solicitud esté finalizada

;

En general, una simple solicitud de publicación asincrónica que usa XMLHTTPRequest se verá así:

const solicitud = new XMLHTTPREQUEST ();
pedido.abrir ("post", "file_path", true);
pedido.setRequestheader (encabezado, valor);
pedido.onreadyStateChange =>
si esto.ReadyState == xmlhttprequest.Hecho && esto.estado == 200)
// El código se ejecutará una vez que la solicitud esté finalizada

;
pedido.enviar (cuerpo);

Conclusión

XMLHTTPREQUEST de AJAX se puede usar para enviar y recibir datos del servidor y actualizar la página web de acuerdo con él. Esta técnica es de oro puro para los desarrolladores, ya que pueden hacer todo esto sin tener que recargar la página.