<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Ejercicio 11 - Estados de la petición AJAX</title> <style type="text/css"> body { font: 13px Arial, Helvetica, sans-serif; } h2 { margin-bottom: 0; font-size: 1.2em; } #recurso, #enviar { padding: .3em; font-size: 1.2em; } #principal { float: left; width: 70%; } #secundario { float: right; width: 25%; } #contenidos, #estados, #cabeceras, #codigo { border: 2px solid #CCC; background: #FAFAFA; padding: 1em; white-space: pre; } #contenidos { min-height: 400px; max-height: 600px; overflow: scroll; } #estados { min-height: 200px; } #cabeceras { min-height: 200px; } #codigo { min-height: 100px; font-size: 1.5em; } </style> <script type="text/javascript"> String.prototype.transformaCaracteresEspeciales = function() { return unescape(escape(this). replace(/%0A/g, '<br/>'). replace(/%3C/g, '<'). replace(/%3E/g, '>')); } var estadosPosibles = ['No inicializado', 'Cargando', 'Cargado', 'Interactivo', 'Completado']; var tiempoInicial = 0; window.onload = function() { // Cargar en el input text la URL de la página var recurso = document.getElementById('recurso'); recurso.value = location.href; // Cargar el recurso solicitado cuando se pulse el botón MOSTRAR CONTENIDOS document.getElementById('enviar').onclick = cargaContenido; } function cargaContenido() { // Borrar datos anteriores document.getElementById('contenidos').innerHTML = ""; document.getElementById('estados').innerHTML = ""; // Instanciar objeto XMLHttpRequest if(window.XMLHttpRequest) { peticion = new XMLHttpRequest(); } else { peticion = new ActiveXObject("Microsoft.XMLHTTP"); } // Preparar función de respuesta peticion.onreadystatechange = muestraContenido; // Realizar petición tiempoInicial = new Date(); var recurso = document.getElementById('recurso').value; peticion.open('GET', recurso+'?nocache='+Math.random(), true); peticion.send(null); } // Función de respuesta function muestraContenido() { var tiempoFinal = new Date(); var milisegundos = tiempoFinal - tiempoInicial; var estados = document.getElementById('estados'); estados.innerHTML += "[" + milisegundos + " mseg.] " + estadosPosibles[peticion.readyState] + "<br/>"; if(peticion.readyState == 4) { if(peticion.status == 200) { var contenidos = document.getElementById('contenidos'); contenidos.innerHTML = peticion.responseText.transformaCaracteresEspeciales(); } muestraCabeceras(); muestraCodigoEstado(); } } function muestraCabeceras() { var cabeceras = document.getElementById('cabeceras'); cabeceras.innerHTML = peticion.getAllResponseHeaders().transformaCaracteresEspeciales(); } function muestraCodigoEstado() { var codigo = document.getElementById('codigo'); codigo.innerHTML = peticion.status + "<br/>" + peticion.statusText; } </script> </head> <body> <form action="#"> URL: <input type="text" id="recurso" size="70" /> <input type="button" id="enviar" value="Mostrar contenidos" /> </form> <div id="principal"> <h2>Contenidos del archivo:</h2> <div id="contenidos"></div> <h2>Cabeceras HTTP de la respuesta del servidor:</h2> <div id="cabeceras"></div> </div> <div id="secundario"> <h2>Estados de la petición:</h2> <div id="estados"></div> <h2>Código de estado:</h2> <div id="codigo"></div> </div> </body> </html>