Cómo enviar una solicitud POST usando XMLHttpRequest en JavaScript

XMLHttpRequest es un objeto en JavaScript que se utiliza para realizar comunicaciones HTTP asíncronas (AJAX), es decir, las solicitudes y respuestas se procesan en segundo plano sin interrumpir la experiencia del usuario en la página web. Con XMLHttpRequest, podemos enviar solicitudes tanto GET como POST a un servidor y manejar la respuesta de manera dinámica en nuestra página web. En este artículo, aprenderemos cómo hacer una solicitud POST usando XMLHttpRequest en JavaScript y cómo trabajar con la respuesta del servidor.

Qué es una solicitud POST

La solicitud POST es un tipo de solicitud HTTP que se utiliza para enviar datos al servidor. A diferencia de la solicitud GET que envía los datos en la URL, la solicitud POST envía los datos en el cuerpo de la solicitud HTTP. Por lo tanto, la solicitud POST es útil cuando necesitamos enviar grandes cantidades de datos o datos sensibles que no deben mostrarse en la URL.

Cómo hacer una solicitud POST con XMLHttpRequest

Para hacer una solicitud POST con XMLHttpRequest, necesitamos crear una nueva instancia XMLHttpRequest, establecer el método de solicitud como POST y el encabezado "Content-Type" en "application/x-www-form-urlencoded" si estamos enviando datos codificados en URL, o "application/json" si estamos enviando datos en formato JSON. A continuación, debemos llamar al método "send" y pasar los datos que deseamos enviar en el cuerpo de la solicitud.

Ejemplo de código:


var xhr = new XMLHttpRequest();
xhr.open('POST', 'miurl.com/miendpoint');
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.send(JSON.stringify({nombre: 'Juan', edad: 30}));


Este ejemplo envía una solicitud POST a "miurl.com/miendpoint" con los datos {nombre: 'Juan', edad: 30} en formato JSON en el cuerpo de la solicitud.

Cómo manejar la respuesta del servidor

Después de enviar la solicitud POST, el servidor procesará los datos y enviará una respuesta de vuelta. Para manejar la respuesta del servidor en nuestro código, debemos agregar un evento "onreadystatechange" a XMLHttpRequest y verificar si la solicitud está completa y la respuesta está lista. Si la respuesta está lista, podemos obtener la respuesta del servidor a través de la propiedad "responseText" o "responseJSON" de XMLHttpRequest y procesarla en nuestra página web.

Ejemplo de código:


xhr.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
var response = JSON.parse(xhr.responseText);
console.log(response);
}
};


Este ejemplo maneja la respuesta del servidor después de que se completa la solicitud POST y la respuesta está lista. Si la respuesta del servidor tiene un código de estado 200, analizamos los datos de la respuesta como JSON y los mostramos en la consola del navegador.

Ejemplos de código y comandos útiles

Existen muchas formas de trabajar con XMLHttpRequest en JavaScript, y cada servidor puede requerir ciertas configuraciones para enviar o recibir datos. A continuación, se presentan algunos ejemplos de código y comandos útiles para trabajar con solicitudes POST en XMLHttpRequest:

- XMLHttpRequest.open(method, url): crea una nueva instancia XMLHttpRequest con el método de solicitud y la URL especificada.
- XMLHttpRequest.setRequestHeader(header, value): establece el valor del encabezado HTTP especificado en el valor especificado.
- XMLHttpRequest.send(data): envía la solicitud HTTP con los datos especificados en el cuerpo de la solicitud.
- var response = JSON.parse(xhr.responseText): analiza la respuesta del servidor como JSON y la convierte en un objeto JavaScript.
- console.log(response): muestra los datos de respuesta en la consola del navegador para fines de depuración.

Conclusión

XMLHttpRequest es una herramienta poderosa en JavaScript para enviar solicitudes y recibir respuestas del servidor en segundo plano sin interrumpir la experiencia del usuario en la página web. Para enviar una solicitud POST con XMLHttpRequest, debemos crear una instancia XMLHttpRequest, configurar la solicitud con el método POST y el encabezado Content-Type adecuado, y enviar los datos en el cuerpo de la solicitud. Para manejar la respuesta del servidor, debemos agregar un evento a XMLHttpRequest y analizar la respuesta del servidor para mostrarla en nuestra página web.

Preguntas frecuentes

¿Cuál es la diferencia entre una solicitud GET y una solicitud POST?

La solicitud GET se utiliza para solicitar recursos del servidor, mientras que la solicitud POST se utiliza para enviar datos al servidor para su procesamiento.

¿Qué significa el código de estado HTTP 200?

El código de estado HTTP 200 significa que la solicitud se ha completado correctamente y que la respuesta del servidor contiene la información solicitada.

¿Cómo enviar datos en formato JSON con XMLHttpRequest?

Para enviar datos en formato JSON con XMLHttpRequest, debemos establecer el encabezado Content-Type en "application/json" y enviar los datos en el cuerpo de la solicitud como una cadena JSON. Podemos usar el método JSON.stringify() para convertir un objeto JavaScript en una cadena JSON.

¿Cómo analizar la respuesta del servidor como XML con XMLHttpRequest?

Para analizar la respuesta del servidor como XML con XMLHttpRequest, debemos configurar el encabezado Content-Type en "application/xml" y analizar la respuesta del servidor como una cadena de texto utilizando un analizador XML en JavaScript.

Cómo convertir una cadena a número en JavaScript

JavaScript: El equivalente a printf o String.Format

Cómo leer un archivo línea por línea en JavaScript

Arreglo de cadenas en JavaScript

Cómo recortar una cadena a una longitud específica en JavaScript

Cómo Convertir un Array en una Cadena de Texto sin Comas en JavaScript

Cómo implementar un evento onload en iframe en JavaScript

Expresiones de Funciones Const en JavaScript

Eliminar valores nulos de una matriz en JavaScript