En el mundo de la programación web, AJAX se ha convertido en una tecnología fundamental para mejorar la interactividad en las aplicaciones. Sin embargo, muchos desarrolladores aún desconocen los detalles de cómo funciona realmente. En este artículo te explicamos cómo utilizar AJAX para recuperar información de encabezado con el objetivo de mejorar la eficiencia y velocidad en la carga de información en tus aplicaciones. ¡No te lo pierdas!
El XMLHttpRequest el objeto incluye dos métodos que le permiten recuperar toda la información del encabezado de respuesta o ciertos campos dentro del encabezado de respuesta. Los dos métodos son getAllResponseHeaders y getResponseHeader. En este tutorial, veremos más de cerca ambos métodos.
Ejemplo
Usaremos el siguiente código HTML para los ejemplos que se enumeran a continuación.
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
callFunction(){
// ... JavaScript code
}
</script>
</head>
<body>
<img id="img1" onclick="callFunction()" src="https://www.itgeared.com/ajax-retrieve-header-information/go.png" /> ;
<div id="div1"> <!-- Some Content --> </div>
</body>
</html>Sintaxis
xhr.getAllResponseHeaders();
xhr.getResponseHeader(header);Si está interesado en recuperar todos los encabezados de respuesta, use el getAllResponseHeaders() método. Si solo necesita acceder a un encabezado en particular, use el getResponseHeader(header) método y reemplazar el ‘encabezado’ variable con el nombre del encabezado que le interesa recuperar. Aquí hay unos ejemplos:
| Método | Descripción |
|---|---|
getAllResponseHeaders() |
Devuelve información de encabezado |
getResponseHeader(header) |
Devuelve información de encabezado específica |
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status == 200) {
document.getElementById("div1").innerHTML = xhr.getAllResponseHeaders();
}
}xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status == 200) {
document.getElementById("div1").innerHTML = xhr.getResponseHeader('Response');
}
}