Cargando



HTML5 – Ajax Headers

En este tutorial veremos como trabajar con los headers gracias al objeto XMLHttpRequest y de esta forma aumentar la funcionalidad de nuestro site.


dic 04 2013 21:19
Profesional
dic 11 2013 10:44
Es bien sabido que no es muy común tener que cambiar el header de las páginas, ya que el navegador puede interpretar y saber que debe enviar en la mayoría de los casos. Existen sin embargo algunas excepciones, estas se dan cuando estamos trabajando con Ajax y debemos recurrir al header X-HTTP-Method-Override con el cual sobrescribimos el header y ya en ese caso debemos decirle al navegador que viene y como lo debe interpretar.

Sobrescribir el método Request del HTTP

El HTTP es un estándar que se utiliza para transportar documentos HTML a través de internet, con él tenemos una cantidad de métodos, sin embargo los más utilizados son el GET y el POST, ya que estos métodos son los más comunes en las aplicaciones Web, sin embargo, tenemos otros métodos entre los cuales podemos nombrar PUT y DELETE, donde actualmente existe una tendencia a cada vez más utilizar estos métodos, de forma de darle mejor significado a las URL que pueden tomar peticiones en un servidor.

Veamos el siguiente ejemplo para ilustrarnos más ampliamente sobre este tema.

Digamos que queremos consultar un usuario de una página entonces hacemos un request con la siguiente estructura:

httpRequest.open("GET", "[url="http://myserver/records/perez/pedro"]http://myserver/records/perez/pedro[/url]");

Si tenemos un script del lado del servidor adecuado, esto lo podría interpretar como una consulta de forma que el método GET hace honor a su nombre de obtener datos.

Qué pasa si queremos borrar a dicho usuario, pudiéramos hacer una validación con otros medios, sin embargo utilizando la misma URL pudiéramos decir lo siguiente:

httpRequest.open("[b]DELETE[/b]", "[url="http://myserver/records/perez/pedro"]http://myserver/records/perez/pedro[/url]");


Al ver este uso del método DELETE todo toma sentido, ya que nuestro script de servidor solo necesitaría discriminar entre los diferentes métodos HTTP para saber qué acción tomar.

Esto se ve mucho en la nueva tendencia de crear APIS REST que se manejan a través de los métodos y las diferentes acciones a ejecutar, de esta forma con el tipo de petición expresamos que queremos hacer y nuestro script de servidor podría procesar las diferentes peticiones que nuestra página pueda manejar.

Leyendo las respuestas del Header

Veamos en este ejemplo de código como podemos hacer la lectura de los Headers que podemos obtener con la respuesta a una petición Ajax:

<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
<style>
#allheaders, #ctheader {
border: medium solid black;
padding: 2px; margin: 2px;
}
</style>
</head>
<body>
<div>
<button>Apples</button>
<button>Cherries</button>
<button>Bananas</button>
</div>
<div id="ctheader"></div>
<div id="allheaders"></div>
<div id="target">Press a button</div>
<script>
var buttons = document.getElementsByTagName("button");
for (var i = 0; i < buttons.length; i++) {
buttons[i].onclick = handleButtonPress;
}
var httpRequest;
function handleButtonPress(e) {
httpRequest = new XMLHttpRequest();
httpRequest.onreadystatechange = handleResponse;
httpRequest.open("GET", e.target.innerHTML + ".html");
httpRequest.send();
}
function handleResponse() {
[b]if (httpRequest.readyState == 2) {[/b]
[b]document.getElementById("allheaders").innerHTML =httpRequest.getAllResponseHeaders();[/b]
[b]document.getElementById("ctheader").innerHTML =httpRequest.getResponseHeader("Content-Type");[/b]
[b]} else if (httpRequest.readyState == 4 && httpRequest.status == 200) {[/b]
[b]document.getElementById("target").innerHTML= httpRequest.responseText;[/b]
}
}
</script>
</body>
</html>

Los headers que vienen con las respuestas se encuentran disponibles cuando el readyState cambia a estado 2 o HEADERS_RECEIVED, esto es lo primero que se recibe en una respuesta a una petición, veamos en la siguiente imagen como queda el ejemplo corriendo el mismo en el navegador:

html5_ajaxheader.jpg


¿Te ayudó este Tutorial?


Sin comentarios, sé el primero!

No esperes más y entra en Solvetic
Deja tus comentarios y aprovecha las ventajas de la cuenta de usuario ¡Únete!

X