Ajax no es una tecnologia web sino el uso de distintas tecnologias web para alcanzar un objetivo "mejorar la velocidad" de las aplicaciones web.
De que esta compuesto AJAX?
1. Peticiones y Respuestas HTTP
2. Código del lado del Cliente (Javascript)
3. Programación del lado del servidor (PHP,JSP,ASP,ASPNET)
4. Transferir y procesar datos mediante el uso de XML
Ahora expliquemos sobre peticiones y respuestas HTTP.
HTTP Request
Ajax requiere y trabaja sobre el protocolo HTTP y para ello vamos a ver la estructura de HTTP Request
.- Linea de Apertura (Opening Line) //[Metodo][Ruta Recurso][Version] GET /web/index.html HTTP/1.0 --------------------------------. - Linea de Cabecera(Header lines) //[Parametro][Sep][Valor] User-Agent:Mozilla /4.0(Compatible:MSIE 5.5; Windows NT 5.0)Accept:Text/plain, text/html -------------------------------- .- Una linea en Blanco(Blank Line) -------------------------------- .- Opcionalmente un cuerpo mensaje(message Body)
HTTP Response
Asi como existe una pregunta en el servidor con HTTP Request tambien existira una respuesta con HTTP Response veamos su estructura.
.- Linea de status HTTP/1.0 200 OK //[Versión][Codigo Status][Razon] --------------------------------- TABLA RESUMEN -------------------------------- //[Código de Status][Razon] 1?? |Información 2?? |Exito 3?? |Redirección 4?? |Error Cliente 5?? |Error Servidor --------------------------------- TABLA A DETALLE DE CODIGO STATUS -------------------------------- //[Código de Status][Razon][Explicación] 200 |OK ************** | Petición Correcta 204 |No Content ****** | Documento sin datos 301 |Moved Permanently | Recurso movido 401 |Not Authorized ** | Necesita autenticación 403 |Forbidden ********| Rechazada por el servidor 404 |Not Found ********| No existe en el servidor 408 |Request Timeout **| Recurso movido 500 |Server Error *****| Error del servidor
Vamos hacer una pequeña demostración de la efectividad de AJAX, intentaremos pedir la hora del servidor haciendo uno de la funcion DATE() de PHP.
Para esto crearemos un archivo HTML llamado index.html con el siguiente código.
<html>
<head>
<title>Nuestra Primera Aplicación Ajax
</title>
<style type="text/css">
body, td {font-family: Lucida Grande, Lucida Sans Unicode, sans-serif;font-size: 12px;color: #444;}
input, textarea {background: #EEE;border: 1px solid #DDD;padding: 3px;color: #666;font-size: 12px;font-family: Lucida Grande, Lucida Sans Unicode, sans-serif;width: 200px;}
input.button {width: 100px;border: 1px solid #CCC;cursor: pointer;}
input:hover, textarea:hover {border: 1px solid #ECFF9F;background: #FEFEFE;
}input:focus, textarea:focus {border: 1px solid #C3DF53;background: #FEFEFE;}
.displaybox {width:150px;background-color: #CF5A5A;border:2px solid #ECFF9F;color: #FFFFFF;padding:10px;font:24px Lucida Grande, Lucida Sans Unicode, sans-serif;}
</style>
<script language="JavaScript" type="text/javascript">
//Esta es la función que creara el objeto XMLHTTPRequest
function getXMLHTTPRequest() {
try {
req = new XMLHttpRequest(); //Mozilla
} catch(err1)
{try {req = new ActiveXObject("Msxml2.XMLHTTP"); // IE Nuevos
} catch (err2)
{try {req = new ActiveXObject("Microsoft.XMLHTTP"); //IE Antiguo
} catch (err3)
{req = false;}}}
return req;
}
var http = getXMLHTTPRequest();
function horaServidor()
{var myurl = 'dimehoraxml.php';
myRand = parseInt(Math.random()*999999999999999);
var modurl = myurl+"?rand="+myRand;
http.open("GET", modurl, true);
http.onreadystatechange = useHttpResponse;
http.send(null);}
function useHttpResponse() {
if (http.readyState == 4) { }
//Si se completo OK
if(http.status == 200) {
//Si Petición Correcta
var timeValue = http.responseXML.getElementsByTagName("timenow")[0];
//Insertar HTML dentro del la etiqueta
showtimedocument.getElementById('showtime').innerHTML = timeValue.childNodes[0].nodeValue;
}
} else {document.getElementById('showtime').innerHTML = '<img src="loading.gif">';}
}
</script>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head><body style="background-color: #006666" onLoad="horaServidor()">
<center>
<h1 class="Estilo2" style="color:#FFFF00">Nuestra primera aplicación Ajax</h1>
<h2 class="Estilo1">Obtener la hora del servidor sin actualizar la página</h2>
<form>
<!-- LLamando a la función HoraServidor() -->
<input type="button" class="Estilo2" onClick="horaServidor()" value="¿Cuál es la hora del servidor?">
</form>
<!-- Etiqueta showtime que recibira el resultado AJAX -->
<div id="showtime" class="displaybox">
</div>
</center>
</body>
</html>
Luego tenemos que crear otro archivo llamado dimerhoraxml.php
<?php
header('Content-Type: text/xml');
echo "<?xml version=\"1.0\"?><clock1><timenow>".date('H:i:s')."</timenow></clock1>";
?>
y por ultimo agregar esta imagen llamada "loading.gif" para la animación de el proceso mientras se intenta recoger datos del servidor.
Comentarios
Publicar un comentario