Tutorial de AJAX

Tutorial de AJAX
AJAX (Asynchronous Javascript and XML) traducido como indica el título, no es más que una
forma de programar aplicaciones interactivas para web. Esta evolución de DHTML se la ha
denominado Web 2.0. Para ello utiliza XHTML y CSS para formatear la información, DOM
(Document Object Model) para interactuar y visualizar dinámicamente la información, se apoya
en XML, XSTL para manipular la información mostrada, el objeto XMLHttpRequest (no
estándar) y Javascript para actualizar los datos sin necesidad de refrescar la página, y para
manipular todas esas tecnologías.
Según la wikipedia, Jesse J. Garret, fué el que desarrolló la idea original denominándola
AJAX. El objeto XMLHttpRequest fue originariamente inventado por Microsoft, usado desde
internet explorer 5.0 como un objeto ActiveX, siendo accesible mediante Javascript. Mozilla en
su versión 1.0 implementa el objeto compatible. DOM es una forma de representar
documentos estructurados como modelos oriendos a objetos, estandarizado por W3C.
Esta forma de programar es una buena alternativa a Flash, siempre y cuando se mantengan
las distancias. Flash además de tener el lenguaje ActionScript, y poder interactuar con objetos
XML posee la faceta del diseño gráfico incorporado. La capacidad de impacto multimedia que
ofrece Flash está muy lejos de conseguirse con AJAX. Existen Frameworks de código
Javascript que permiten animar objetos, el uso de Drag and Drop, ordenar objetos, y muchas
más operaciones que permiten unos efectos visuales muy atractivos y novedosos.
Google (por ejemplo Gmail) y Yahoo (por ejemplo Flickr), usan Ajax. Y ahora vamos a ver un
ejemplo práctico y sencillo de usar este método de desarrollo.
1. El objetivo es crear una página con unos enlaces que cargen contenido asíncrono (Es decir,
sin cambiar de URL).
2. Necesitaremos crear una página XHTML principal, y dos más que son las que cargaremos.
3. Un archivo CSS para dar formato a las etiquetas xhtml.
4. Un archivo JS, donde pondremos el código Javascript.
5. Comprobaremos el soporte del navegador del objeto XMLHttpRequest
Nota: Requieres conocimientos basicos de HTML para leer este tutorial. Quizas tambien de
programación basica para entender la parte de CSS.
Crear los documentos XHTML
Empezamos por lo fácil el documento XHTML principal (Para mayor referencia, observa los
archivos de ejemplo que vienen con el tutorial):
<!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=iso-8859-1" />
<title>Asíncrono Javascript y XML</title>
<link href="css/mis_estilos.css" rel="stylesheet" type="text/css">
<script language="JavaScript" type="text/javascript"
src="js/codigo.js"></script>
</head>
<body>
<div id="menu"> <a
href="javascript:llamarasincrono('contenidos/tutorial1.htm',
'contenidos');">El sentido del tacto</a> <a
href="javascript:llamarasincrono('contenidos/tutorial2.htm',
'contenidos');">Sensaciones</a> </div>
<div id="contenidos">
<h3>En esta capa se cargará asíncronamente dos fragmentos
de código (x)html.</h3>
<p>Escoger una opción del menú... </p>
</div>
</body>
</html>
Esta página la guardaremos con el nombre ajax.html
Ahora las dos páginas que insertaremos en la principal que llamaremos tutorial1.htm:
<img src="aerogenerador1.jpg" alt="imagen" width="480" height="360"

border="0" />
<h3 id="titulos" style="border-bottom: 1px solid #C0C0C0; margin-bottom: -

5px">El sentido del tacto.</h3>
<p><br />
Todos sabemos la sensación agradable que nos produce un simple

roce o caricia, un abrazo, etc. Pero
además de esta sensación, el tacto, el ser tocados,

comprende mucho más. La humanidad
precisa del “con-tacto” interpersonal.<br />
Sabemos que en la piel se halla la sensación del tacto. Que

existen ciertos puntos sensibles al dolor,
al frío o al calor. La piel está íntimamente

relacionada con el mecanismo psicológico
del individuo, que actúa como reflejo de las emociones. El rubor

que acompaña a la vergüenza,
o la palidez con el miedo nos lo demuestran.</p>

<p>Las investigaciones que se han llevado a cabo sobre la importancia del
tacto revelan lo necesario que resulta
en contacto corporal durante la infancia para el correcto desarrollo

físico y mental. También en
la edad adulta, el contacto personal influye en la capacidad para

soportar el dolor y el estrés, así
como en las aptitudes de comunicación del individuo. Un estudio

realizado en 1.978 sobre unos 5.000 pacientes,
por el dermatólogo R. Grieshmer, averiguó en un gran

número de casos, que las emociones
eran las instigadoras de las enfermedades de la piel, por ejemplo, el

62% de los casos de psoriasis, el 78% de
las urticarias, el 86% de los pruritos, el 95% de las verrugas, y el

100% de la sudoración profusa, se
producían por motivos psicológicos.<br />
</p>
Y tutorial2.htm:
<img src="aerogenerador2.jpg" alt="imagen" width="480" height="360"

border="0" />
<h3 id="titulos" style="border-bottom: 1px solid #C0C0C0; margin-bottom: -

5px">Sensaciones</h3>
<p>El hecho de ser tocado puede transmitirnos diferentes sensaciones. No son

iguales todas las formas de tocar. El contacto puede ser cariñoso o
tierno (como cuando se toca a un bebé), indiferente (como en algunos
actos sociales, que se ofrece la mano sin ningún interés por
su persona), iracundo (violencia), sexual (como las caricias apasionadas que
preceden al acto sexual), curativo (como el masaje o la imposición de
manos) etc. Se puede tocar, también, de distintas formas: caricias,
abrazos, palmadas, besos, masajes...<br />
El contacto físico comunica sin palabras, y se convierte en la

expresión física de nuestra actitud hacia el mundo. ¿No
es cierto que un individuo reservado, también mostrará cierta
reserva en el momento de tocar o ser tocado?<br />
El tacto calibra nuestra capacidad de amar y ser amados. Necesitamos el

contacto físico por sí mismo; para ser sinceros. Es más
difícil que nos engañe otra persona si le mantenemos cogido
del brazo o del hombro (como también han demostrado algunos
estudios). De forma que es imposible fingir emociones cuando se toca a
alguien, excepto si el receptor quiere ser engañado. Es imposible
tocar con indiferencia mientras decimos que nos importa mucho el receptor, o
tocar sexualmente mientras se manifiesta un sentimiento de amistad con la
intención de que se crea. El tacto simboliza la forma mediante la
cual nos relacionamos con la vida, la experiencia, el amor y la amistad.<br
/>
</p>
Estos documentos, puesto que van a formar parte de una página XHTML no usan las
etiquetas headers, ni html, ni body, ya que se incluirán en la página madre, por medio de
AJAX.
Crear el archivo de estilos CSS
Llega el momento de escribir el archivo de estilos CSS, lo llamamos estilos.css, sí tienes

problemas al entender el CSS, pasate por la sección de tutoriales de css:
#menu{
float: left;
width: 150px;
height: 100px;
border: 3px solid #ececff;
padding: 7px;
padding-left: 8px;
border-right-color: #006;
}
#menu a{
padding: 3px 1px;
display: block;
width: 100%;
text-decoration: none;
font-weight: bold;
border-bottom: 1px solid gray; color: #606;
}
#menu a:hover{
background-color: #99c;
color: #fff;
}
body {
background-color: ##ececff;
font-family: Geneva, Arial, Helvetica, sans-serif;
}
.titulos {
color: #036;
}
#contenidos{
float:left;
width:480px;
min-height: 250px;
border: 3px solid grey;
margin-left: 10px;
padding: 5px;
padding-bottom: 8px;
background-color: #fff;
}
* html #contenidos{ /*estilo solo para IE ya que no se admite la propiedad
min-height*/
height: 400px;
}
Javascript y XMLHttpRequest
Ahora toca Javascript, y es donde se usa el objeto XMLHttpRequest.
Lo primero que tenemos que hacer es comprobar la disponibilidad en el navegador. Para ello
necesitamos saber que:
 En los navegadores basados en Mozilla, la referencia a este objeto con código Javascript es
window.XMLHttpRequest.
 En cambio, en Internet Explorer tenemos que hacer uso de ActiveXObject, existiendo varias
versiones denominadas Microsoft.XMLHTTP y Msxml2.XMLHTTP
 Así que crearemos una función que compruebe mediante un If condicional si existe el primer
objeto, y en caso de que sea verdadero, crearemos un nuevo objeto XMLHttpRequest, pero si
es falso, crearemos un ActiveXObject Microsoft.XMLHTTP, pero si aun así no existe, por
último crearemos un Msxml2.XMLHTTP.
 Cuando ya tenemos el objeto creado, disponemos de diversos métodos y propiedades para
comprobar el estado de los datos como las propiedades onreadystatechange, readyState,
responseText, responseXML, status, statusText y los métodos abort(),
getAllResponseHeaders(), getresponseHeader(string header), open(string url,string asynch),
send(string), setHeader(string header,string value).
 Si window.XMLHttpRequest devuelve verdadero porque el XMLHttpRequest no es null o
undefined, le asignaremos al objeto un nombre de istancia (de forma similar a cuando lo
hacemos con ActionScript). Al evento onreadystatechange se le asignará una función para la
respuesta y llamaremos a los métodos open() y send().
Si alguna de las cosas dicha arriba no te quedo claro, observa abajo el codigo para poder
entenderlo mejor.
Podemos usar else if para comprovar las versiones. Pero, ya que tenemos que comprobar las
diferentes variables cuando cargamos el objeto XMLHttpRequest se puede usar el método de
gestión de errores catch... try:
// Documento JavaScript
// Esta función cargará las paginas
function llamarasincrono (url, id_contenedor)
{
var pagina_requerida = false;
if (window.XMLHttpRequest)
{
// Si es Mozilla, Safari etc
pagina_requerida = new XMLHttpRequest ();
} else if (window.ActiveXObject)
{
// pero si es IE
try
{
pagina_requerida = new ActiveXObject ("Msxml2.XMLHTTP");
}
catch (e)
{
// en caso que sea una versión antigua
try
{
pagina_requerida = new ActiveXObject ("Microsoft.XMLHTTP");
}
catch (e)
{
}
}
}
else
return false;
pagina_requerida.onreadystatechange = function ()
{
// función de respuesta
cargarpagina (pagina_requerida, id_contenedor);
}
pagina_requerida.open ('GET', url, true); // asignamos los métodos open
y send
pagina_requerida.send (null);
}
// todo es correcto y ha llegado el momento de poner la información
requerida
// en su sitio en la pagina xhtml
function cargarpagina (pagina_requerida, id_contenedor)
{
if (pagina_requerida.readyState == 4 && (pagina_requerida.status == 200
|| window.location.href.indexOf ("http") == - 1))
document.getElementById (id_contenedor).innerHTML =
pagina_requerida.responseText;
}
Conclusión
El uso de Javascript para crear páginas dinámicas de XHTML convierte los sitios web en
aplicaciones. El concepto de acción reacción toma relevancia y mediante esta técnica se
puede manipular cualquier contenedor <div> que tenga la página mediante su id y permitir la
reacción ante cualquier evento del usuario para cargar la información solicitada en una parte
de la página.
En este ejercicio se ha utilizado texto en formato xhtml y he usado la

propiedad responseText, pero también se pueden crear documentos XML y manipularlos
con la propiedad responseXML. Después podremos interactuar con los nodos, añadiendo o
eliminándolos a la página, ordenándolos, o incluso, editar y guardar registros, si creamos una
conexión con una base de datos.
Como queda mucho camino por delante y yo no soy un experto, así que ahora podríamos
hacer lo siguiente:
1. Buscar información sobre AJAX, XMLHttprequest, Web 2.0 y Frameworks.

2. No sería mal momento para ponerse a experimentar con el ejemplo y a conseguir mejoras,
como por ejemplo implementar un "loading..."
3. Crear otro tutorial con otro ejemplo.
4. Y claro, comentarlo todo en los foros.

Tutorial de AJAX

Cargado por

Información del documento

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Tutorial de AJAX

Cargado por

Copyright:

Formatos disponibles

Tutorial de AJAX

Crear los documentos XHTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

Esta página la guardaremos con el nombre ajax.html

Ahora las dos páginas que insertaremos en la principal que llamaremos tutorial1.htm:

<img src="aerogenerador1.jpg" alt="imagen" width="480" height="360"

<h3 id="titulos" style="border-bottom: 1px solid #C0C0C0; margin-bottom: -

Todos sabemos la sensaci&oacute;n agradable que nos produce un simple

adem&aacute;s de esta sensaci&oacute;n, el tacto, el ser tocados,

precisa del &ldquo;con-tacto&rdquo; interpersonal.<br />

Sabemos que en la piel se halla la sensaci&oacute;n del tacto. Que

al fr&iacute;o o al calor. La piel est&aacute; &iacute;ntimamente

del individuo, que act&uacute;a como reflejo de las emociones. El rubor

o la palidez con el miedo nos lo demuestran.</p>

en contacto corporal durante la infancia para el correcto desarrollo

la edad adulta, el contacto personal influye en la capacidad para

como en las aptitudes de comunicaci&oacute;n del individuo. Un estudio

por el dermat&oacute;logo R. Grieshmer, averigu&oacute; en un gran

eran las instigadoras de las enfermedades de la piel, por ejemplo, el

las urticarias, el 86% de los pruritos, el 95% de las verrugas, y el

produc&iacute;an por motivos psicol&oacute;gicos.<br />

<img src="aerogenerador2.jpg" alt="imagen" width="480" height="360"

<h3 id="titulos" style="border-bottom: 1px solid #C0C0C0; margin-bottom: -

<p>El hecho de ser tocado puede transmitirnos diferentes sensaciones. No son

El contacto f&iacute;sico comunica sin palabras, y se convierte en la

El tacto calibra nuestra capacidad de amar y ser amados. Necesitamos el

Crear el archivo de estilos CSS

Llega el momento de escribir el archivo de estilos CSS, lo llamamos estilos.css, sí tienes

Ahora toca Javascript, y es donde se usa el objeto XMLHttpRequest.

En este ejercicio se ha utilizado texto en formato xhtml y he usado la

1. Buscar información sobre AJAX, XMLHttprequest, Web 2.0 y Frameworks.

También podría gustarte

Todos sabemos la sensación agradable que nos produce un simple

además de esta sensación, el tacto, el ser tocados,

precisa del “con-tacto” interpersonal.<br />

Sabemos que en la piel se halla la sensación del tacto. Que

al frío o al calor. La piel está íntimamente

del individuo, que actúa como reflejo de las emociones. El rubor

como en las aptitudes de comunicación del individuo. Un estudio

por el dermatólogo R. Grieshmer, averiguó en un gran

producían por motivos psicológicos.<br />

El contacto físico comunica sin palabras, y se convierte en la