Primero un poco de historia:
Ajax fue presentado el 18 de Febrero del 2005 por Jesse James Garrett, el termino AJAX viene de Asynchronous JavaScript + XML (JavaScript Asíncrono + XML) y el mismo representa a varias tecnologías independientes, es decir, AJAX no es una nueva tecnología sino mas bien la unión de tecnologías ya existentes. Estas tecnologías son:
XHTML, CSS, XML, XSLT, JSON, XMLHttpRequest, JavaScript
Para mostrarte cómo funciona una web con AJAX solo necesito utilizar un servidor web, XHTML, CSS, XMLHttpRequest y JavaScript. De más esta decir que para desarrollar aplicaciones AJAX se necesita conocer muy bien cada una de las tecnologías antes mencionadas. A continuación te muestro las URLs de algunas aplicaciones que utilizan AJAX:
1- http://www.gmail.com
2- http://www.meebo.com
3- http://www.30boxes.com
Para saber más de Ajax: http://librosweb.es
Planteando el problema:
Vamos a suponer que somos unos lammers (dios nos libre) y que vamos a desarrollar la web de nuestro grupo llamado “los dioses de la red”, reto a cualquiera a proponer un nombre más lammer que ese. Así que procedamos a desarrollar esta lammer-web paso a paso.
1. Instalando un servidor web:
Para mostrarte de forma adecuada como funciona AJAX necesitaremos de un servidor web, en este caso utilizaremos el Apache.
Existen muchas formas de instalar el Apache, yo te recomiendo que descargues un “instalador automático” como el AppServ, con el podrás instalar el trió de ases (Apache + PHP + MySQL) todo esto de una forma automatizada y sin tener que editar a mano los archivos de configuración, puedes descargarlo de www.appservnetwork.com, la instalación del mismo es tan sencilla como seleccionar el botón siguiente varias veces, yo lo instale en la raíz de mi disco duro de respaldo con el nombre por defecto.
Arbol de directorios
AppServ
... www
...... ajax
......... contenidos
......... css
......... script
... www
...... ajax
......... contenidos
......... css
......... script
2. El código css de la web:
No voy a explicar que es un css, pero el código esta comentado para los menos familiarizados.
Este código debes seleccionarlo y copiarlo en un archivo txt, luego le cambiamos el nombre y la extensión al archivo dejándolo de la siguiente manera css.css Ahora copiamos ese archivo dentro de la carpeta /ajax/css que creamos en el paso anterior.
Para saber mas de css: www.librosweb.es
/*******************************************/
/*INICIO --> ESTRUCTURA GENERAL DE LA WEB */
/*******************************************/
@charset "utf-8";
body {
background: #000; /*es el color de fondo que se encuentra fuera de la pagina*/
margin: 0; /*ajusto a cero el margen del elemento body para lograr la compatibilidad
con los diversos navegadores*/
padding: 0; /*ajusto a cero el relleno del elemento body para lograr la compatibilidad
con los diversos navegadores*/
text-align: center; /*esto centra el contenedor en los navegadores IE 5*/
color: #000000; /*color de todo el texto dentro de body siempre y cuando no se defina
otro color en otro contenedor*/
}
p, ol{
font-family: "Times New Roman", Times, serif; /*Tipo de letra de toda la web*/
font-size: 100%; /*Tamaño de la letra*/
line-height: 150%; /*Interlinea do (separacion entre lineas)*/
text-indent: 2em; /*Sangria*/
}
.no_sangria{
text-indent:0em; /*sin sangria, se utiliza cuando no se necesita de la misma*/
}
.estructura_general #contenido {
width:59em; /* este ancho creará un contenedor que cabrá en una ventana de navegador
1024px aproximadamente */
background: #FFFFFF; /*es el color de fondo de la zona contenido*/
margin: 0 auto; /* los márgenes automáticos (conjuntamente con un ancho) centran
la página */
border: 1px solid #000000; /*define el tamaño, la caracteristica y el color del borde
de toda la estructura de la pagina*/
text-align: left; /* esto anula text-align: center en el elemento body*/
}
.estructura_general #cabecera {
background: #FFFFFF; /*Color de fondo de la cabecera (la cabecera se colocara la
imagen principal de la web)*/
padding: 0px 0px 0px 0px; /* este relleno coincide con la alineación izquierda
de los elementos de los divs que aparecen bajo él. */
}
.estructura_general #cabecera h1 {
margin: 0; /*el ajuste en cero del margen del último elemento del div de
#cabecera evita la contracción del margen */
padding: 0px; /* el uso de relleno en lugar de margen le permitirá mantener el
elemento alejado de los bordes del div */
}
.estructura_general #contenido_principal {
margin: 0 1em 0 1em; /* el margen derecho puede asignarse en ems o píxeles.*/
text-indent: 0em; /*sangria de los parrafos*/
text-align:justify; /*texto por defecto esta alineado*/
}
#enlaces_externos a {
target: _blank; /*Para especificar enlaces que no se mostraran en el
"div contenido" de la web*/
}
/*******************************************/
/*FIN --> ESTRUCTURA GENERAL DE LA WEB */
/*******************************************/
/*******************************************/
/*INICIO --> MENU PRINCIPAL */
/*******************************************/
#menu_principal {
float: left;
width: 100%;
margin: 0;
padding: 0;
list-style: none;
background: #900; /*color de fondo de la barra del menu*/
border-bottom: 1px solid #000000; /*borde lineal inferior de tipo solido*/
border-top: 1px solid #000000; /*borde lineal superior de tipo solido*/
}
#menu_principal a {
float: left;
display: block;
padding: 6px 30px 6px 5px;
text-decoration: none;
font-weight: bold;
font-size: 90%;
color: #000000;
background: #900 no-repeat top right;
}
#menu_principal li {
float: left;
margin: 0;
padding: 0;
}
#menu_principal a {
padding-left: 20px;
}
#menu_principal a:hover {
color: #999; /*color al pasar el cursor sobre los botones*/
}
3. El código XHTML de la web:
No voy a explicar que es un archivo HTML y sus variantes. Este código debes seleccionarlo y copiarlo en un archivo txt, luego le cambiamos el nombre y la extensión al archivo dejándolo de la siguiente manera index.html Ahora copiamos el archivo index.html dentro de la carpeta /ajax que creamos en el paso anterior.
Para saber mas de XHTML: www.librosweb.es
Este es el index.html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="es" xml:lang="es">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel=stylesheet type="text/css" href="css/css.css"/>
<script language="javascript" type="text/javascript" src="script/http.js"></script>
<title>www.losdiosesdelared.com</title>
</head>
<br />
<body class="estructura_general">
<div id="contenido">
<div id="cabecera" >
<h2 align="center">www.losdiosesdelared.com</h2>
</div>
<ul id="menu_principal">
<a id="ajax" href="contenidos/somos.html" title="miembros">Miembros</a>
<a id="ajax" href="contenidos/hackeadas.html" title="webs_hackeadas">Webs_Hackeadas</a>
<a id="ajax" href="contenidos/hachazos.html" title="proyectos">Proyectos</a>
<a id="enlaces_externos" href="http://www.google.com" title="www.google.com"
target="_blank">google.com</a>
<!-- fin #menu_principal -->
</ul>
<div id="contenido_principal">
<p align="right">
</p>
<div id="ajax">
<h3 align="center">Somos los dioses de la red.</h3>
<p align="justify">
Somos los dioses de la red, ya que nadie se puede comparar con nosotros.
Somos los mejores hackers de toda la red y eso queda demostrado por la gran cantidad
de webs hackeadas, hasta ahora van 3450 y sumando. Inclinense ante nosotros.
</p>
<!-- fin #ajax -->
</div>
<!-- fin #contenido_principal -->
</div>
</div>
</body></html>
De todo esto lo importante es observar que todos los enlaces que se encuentren dentro de las etiquetas mostraran su contenido dentro de la etiqueta. Por tal motivo tienen el mismo “id” (identificador). Mientras que la etiqueta se mostrara en otra ventana o pestaña, ya que su identificador es diferente y eso desvincula a este enlace del ajax.
Este es el hackeadas.html:
Este código debes seleccionarlo y copiarlo en un archivo txt, luego le cambiamos el nombre y la extensión al archivo dejándolo de la siguiente manera hackeadas.html Ahora copiamos el archivo hackeadas.html dentro de la carpeta /ajax/contenidos.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>webs_hackeadas</title>
</head>
<body>
<h2 align="center">Lista de webs hackedas por nosotros</h2>
<p align="justify">
<strong>www.losdiosesdelared.com</strong>
(somos tan buenos que hasta nos hackeamos a nosotros mismos)
</p>
</body>
</html>
Este es el somos.html:
Este código debes seleccionarlo y copiarlo en un archivo txt, luego le cambiamos el nombre y la extensión al archivo dejándolo de la siguiente manera somos.html Ahora copiamos el archivo somos.html dentro de la carpeta /ajax/contenidos.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="es" xml:lang="es">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Somos unos lammers</title>
</head>
<body>
<h3 align="center">Nuestros miembros son:</h3>
<p align="justify">
Aquí iría la lista de miembros ..
</p>
</body>
</html>
4. El código JavaScript de la web:
Aquí voy a explicarte como utilizar el objeto XMLHttpRequest. Este objeto nos permite escribir secuencias de comandos al protocolo HTTP y para ello se necesitan 3 pasos fundamentales:
a. Crear un objeto XMLHttpRequest.
b. Especificar y enviar la solicitud HTTP al servidor web.
c. Recuperar la respuesta del servidor.
b. Especificar y enviar la solicitud HTTP al servidor web.
c. Recuperar la respuesta del servidor.
Ahora voy a proceder a explicarte cómo funciona cada una de ellas.
a. Creando un objeto XMLHttpRequest:
Este objeto no ha sido estandarizado hasta ahora, por tal motivo el proceso para crearlo es diferente dependiendo del explorador web y la versión que utilices, es decir, no es lo mismo crearlo en Internet Explorer 6 a crearlo en Internet Explorer 7 o superior, igualmente los exploradores basados en otras plataformas como firefox utilizan sus propios métodos.
Para crear un objeto XMLHttpRequest que funcione en; Internet Explorer 7 o superior / Firefox / Opera o Safari, bastaría con la siguiente línea:
var nombre_de_la_variable = new XMLHttRequest();
Para el Internet Explorer 5 y 6 el XMLHttpRequest es un objeto ActiveX y tenemos que crearlo pasándole el nombre completo de objeto a la constructora ActiveXObject, veamos como seria para el IE5 e IE6:
var nombre_de_la_variable = new ActiveXObject("Msxml2.XMLHTTP");
var nombre_de_la_variable = new ActiveXObject("Microsoft.XMLHTTP");
Ahora solo tendríamos que crear una función que cree el objeto dependiendo del explorador que se este utilizando.
b. Especificar y enviar la solicitud HTTP al servidor web.
Luego de crear el objeto XMLHttpRequest, se tiene que enviar una solicitud al servidor web. En primer lugar debemos llamar al método open() para así especificar la URL que solicitamos y si el método HTTP será GET o POST. Con el método GET simplemente descargamos el contenido del URL solicitado. El método POST es el que se utiliza en la mayoría de formularios, otro método importante es HEAD él se encarga de pedirle al servidor que devuelva los encabezados asociados al URL.
El tercer argumento del método open() determinara la forma en que se obtendrá la respuesta del servidor, las serán síncrona o asíncronas. Si pasamos como tercer argumento false le estaremos indicando que obtenga una respuesta síncrona, por el contrario si le pasamos como tercer argumento true estaremos indicando que deseamos una respuesta asíncrona. De forma predeterminada el método open() establece un objeto XMLHttpRequest asíncrono, por lo que si no pasa un tercer argumento él lo tomara como true.
El método open() también puede aceptar un cuarto y quinto argumento, estos serian un nombre y una contraseña respectivamente. Estos se utilizan cuando se solicita un URL desde un servidor que requiere autorización.
La diferencia entre false (síncrono) y true (asíncrono) es que la primera simplemente se bloquea y no vuelve hasta que llega la respuesta del servidor, es decir, solo podremos ver el código de estado de la conexión cuando llegue la respuesta del servidor. Mientras que con true envía la respuesta al servidor y después vuelve inmediatamente. Entonces, la forma de especificar una solicitud seria esta:
nombre_de_la_variable.open ("GET", url, true);Solo nos faltaría enviarla y para ello utilizamos el método send(), para solicitudes HTTP con GET, siempre será null y para solicitudes POST deberá contener los datos del formulario a enviar al servidor. Así que para enviar la solicitud tendría que hacer lo siguiente:
nombre_de_la_variable.send (null);
c. Recuperar la respuesta del servidor.
Para este ejemplo utilizare el modo asíncrono, por tal motivo tendremos que pasar true como tercer argumento al método open() o simplemente omitirlo ya que se utiliza true de forma predeterminada. Las repuestas asíncronas nos mantienen informados de lo que sucede por medio de notificaciones, estas notificaciones son controladas por un evento llamado readyState. Este está formado por un número entero que especifica el estado de la solicitud HTTP y sus valores son los siguientes:
readyState = 0 No ha sido llamado open()
readyState = 1 Se llamo a open(), pero no a send()
readyState = 2 Se llamo a send(), pero el servidor no ha respondido
readyState = 3 Se están recibiendo datos del servidor
readyState = 4 Se competo la respuesta del servidor
readyState = 1 Se llamo a open(), pero no a send()
readyState = 2 Se llamo a send(), pero el servidor no ha respondido
readyState = 3 Se están recibiendo datos del servidor
readyState = 4 Se competo la respuesta del servidor
El encargado de controlar el evento readyState es onreadystatechange, este se activa cuando se llama a open() y nuevamente cuando se llama a send(). Se vuelve a llamar cuando la respuesta del servidor empieza a llegar y al final cuando se complete dicha respuesta.
El problema del objeto XMLHttpRequest es que hasta ahora no se ha estandarizado y los exploradores web difieren en el control de readyState = 3. Por ejemplo firefox llama al controlador onreadydtatechange varias veces en readyState = 3 para proporcionar el progreso de la descarga, mientras que el Internet Explorer lo llama solo cuando el valor de readyState cambia. Por tal motivo por ahora es mejor ignorar este valor y solo prestar atención cuando readyState sea igual a 4. Ahora solo se tendría que crear una función que haga todo esto.
Bueno luego de todo lo explicado voy a colocarte el código javascript completo, te recomiendo que vuelvas a leer esta sección observando el código:
/*"!http" invierte el valor booleano, ejemplo; si "http = false", "!http" seria true
"typeof" da como valor una cadena que indica el tipo de dato, hace que se evalue
el objecto XMLHttpRequest como un "object"
"undefined" cuando utilizamos una propiedad de objeto que no existe, no se ha
creado.
"!=" compara dos valores, devuelve "falso" si dos valores son iguales
entre si, y "true" si dos valores son desiguales entre si.*/
/* funcion para la creacion del objeto XMLHttpRequest dependiendo del explorador web
utilizado*/
function objeto_http(){
var http=false; //creo la variable "http" y le doy el valor "false"
try{//define el codigo cuyas excepciones se van a controlar
http = new ActiveXObject("Msxml2.XMLHTTP"); /*Si el explorador web es
IE6 creo este objeto / Si no, se genera una excepcion y se pasa al "catch(s)"*/
}
catch(s){/*se llama cuando se produce una excepcion dentro del bloque "try".
el identificador "(s)" del "catch" es un argumento
local (puedes colocar otra cosa)*/
try{//define el codigo cuyas excepciones se van a controlar
http = new ActiveXObject("Microsoft.XMLHTTP");
/*Si el explorador web es IE5 creo este objeto / Si no, se genera una excepcion y
se pasa al "catch(s)"*/
}
catch(s){/*se llama cuando se produce una excepcion dentro
del bloque "try". el identificador "(s)" del "catch" es un argumento local
(puedes colocar otra cosa)*/
http = false;//http es false
}
}
/*como "!http" tiene valor true (es diferente a undefined) y Object no tiene valor
asignado (es igual a undefined) != devuelve "true" (verdad)*/
if(!http && typeof XMLHttpRequest != 'undefined')
{
http = new XMLHttpRequest(); /*creo el objeto para
exploradores web con IE7 o susperior / Firefox / Opera / Safari */
}
return http;//regreso a http
}
function cargar_pagina (url, llamado_de_regreso){
var respuesta=objeto_http(); // creo una variable "respuesta" que contenga la
funcion "objecto_http()"(esta es la funcion encargada de crear el objeto XMLHttpRequest)
respuesta.open("GET", url, true); /*especifica y envia la solicitud mediante
un "GET" para respuesta asincrona "true". */
respuesta.onreadystatechange=function()
{
if (respuesta.readyState ==1)/* se ha llamado a "open()" pero
todavia no se ha llamado a "send()"*/
{
llamado_de_regreso.innerHTML = "CARGANDO...........";/*/ muestro un
mensaje, para indicarle al usuario lo que esta pasando.*/
}
else if (respuesta.readyState == 4 && respuesta.status == 200)/* sino
si readyState es 4 y el procolo HTTP responde 200 es por que todo salio bien.*/
{
llamado_de_regreso.innerHTML = respuesta.responseText;
// muestro la respuesta de la url llamada.
}
else {
llamado_de_regreso.innerHTML = "ESTE CONTENIDO NO SE HA
ENCONTRADO"; //sino le informo al usuario que el documento xhtml no existe.
}
}
respuesta.send(null);
}
cargar_contenido(function(){
var links = document.getElementsByTagName( 'a' );/*"link" hace refencia a todo lo
que se encuentren dentro de las etiquetas <a> del xhtml*/
var divs = document.getElementsByTagName( 'div' );//"divs" hace refencia a todo
lo que se encuentren dentro de la etiqueta <div> del xhtml
var total = links.length; //cuento todas las etiquetas <a> del documento XHTML
for( var i=0; i < total; i++ )
{
links[i].onclick = function()
{
var total2 = divs.length;//cuento todos los divs del documento XHTML
for( var j=0; j < total2; j++ ){
if(this.id == divs[j].id){ //comparo si los "id" son iguales
/* llamo a la funcion "cargar_pagina" y les doy como argumento la
url y el divs donde mostrar el contenido dependiendo si los "id" de las etiquetas
<a> y <div> son iguales*/
cargar_pagina(this.href, divs[j]);
return false;
}
}
}
}
});
/*Esta función lo que hace es agregarle una función (la que se recibe por
parametro) a la pagina HTML.
es algo similar a poner en el tag body "onload=javascript:algo()"*/
function cargar_contenido(func){
var oldonload = window.onload;
if (typeof window.onload != 'function')
{
window.onload = func;
}
else{
window.onload = function()
{
if (oldonload)
{
oldonload();
}
func();
}
}
}
Autor: Marco Séneca
Fecha: 09/06/2010.
Nota: Artículo publicado en este espacio a petición del autor.
- Los comentarios están siendo moderados y serán publicados en la brevedad posible.