Tutorial de AJAX

Tutorial de AJAX
Por Sisco el 18 de Marzo de 2006 con 524,787 visitas

HTML, CSS y Javascript Otros tutoriales por Sisco.
AJAX (Asynchronous Javascript and XML) traducido como indica el ttulo, no es
ms que una forma de programar aplicaciones interactivas para web. Esta
evolucin de DHTML se la ha denominado Web 2.0. Para ello utiliza XHTML y
CSS para formatear la informacin, DOM (Document Object Model) para
interactuar y visualizar dinmicamente la informacin, se apoya en XML, XSTL
para manipular la informacin mostrada, el objeto XMLHttpRequest (no estndar)
y Javascript para actualizar los datos sin necesidad de refrescar la pgina, y para
manipular todas esas tecnologas.
Segn la wikipedia, Jesse J. Garret, fu el que desarroll la idea original
denominndola 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 versin 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 adems de tener el lenguaje ActionScript, y poder
interactuar con objetos XML posee la faceta del diseo grfico incorporado. La
capacidad de impacto multimedia que ofrece Flash est muy lejos de conseguirse
con AJAX. Existen Frameworks de cdigo Javascript que permiten animar objetos,
el uso de Drag and Drop, ordenar objetos, y muchas ms 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 prctico y sencillo de usar este mtodo de desarrollo.
1. El objetivo es crear una pgina con unos enlaces que cargen contenido asncrono
(Es decir, sin cambiar de URL).
2. Necesitaremos crear una pgina XHTML principal, y dos ms que son las que
cargaremos.
3. Un archivo CSS para dar formato a las etiquetas xhtml.
4. Un archivo JS, donde pondremos el cdigo Javascript.
5. Comprobaremos el soporte del navegador del objeto XMLHttpRequest
Nota: Requieres conocimientos basicos de HTML para leer este tutorial. Quizas
tambien de programacin basica para entender la parte de CSS.
Crear los documentos XHTML
Empezamos por lo fcil 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 pgina la guardaremos con el nombre ajax.html
Ahora las dos pginas 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 pgina XHTML no usan
las etiquetas headers, ni html, ni body, ya que se incluirn en la pgina 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
seccin 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 cdigo
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 funcin 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 mtodos y
propiedades para comprobar el estado de los datos como las propiedades
onreadystatechange, readyState, responseText, responseXML, status, statusText
y los mtodos 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 funcin para la respuesta y llamaremos a los mtodos 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 mtodo de gestin de errores catch... try:
// Documento JavaScript
// Esta funcin 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 versin antigua
try
{
pagina_requerida = new ActiveXObject
("Microsoft.XMLHTTP");
}
catch (e)
{
}
}
}
else
return false;
pagina_requerida.onreadystatechange = function ()
{
// funcin de respuesta
cargarpagina (pagina_requerida, id_contenedor);
}
pagina_requerida.open ('GET', url, true); // asignamos
los mtodos open y send
pagina_requerida.send (null);
}
// todo es correcto y ha llegado el momento de poner la
informacin 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;
}
Conclusin
El uso de Javascript para crear pginas dinmicas de XHTML convierte los sitios
web en aplicaciones. El concepto de accin reaccin toma relevancia y mediante
esta tcnica se puede manipular cualquier contenedor <div> que tenga la pgina
mediante su id y permitir la reaccin ante cualquier evento del usuario para
cargar la informacin solicitada en una parte de la pgina.
En este ejercicio se ha utilizado texto en formato xhtml y he usado la
propiedad responseText, pero tambin se pueden crear documentos XML y
manipularlos con la propiedad responseXML. Despus podremos interactuar con
los nodos, aadiendo o eliminndolos a la pgina, ordenndolos, o incluso, editar
y guardar registros, si creamos una conexin con una base de datos.
Como queda mucho camino por delante y yo no soy un experto, as que ahora
podramos hacer lo siguiente:
1. Buscar informacin sobre AJAX, XMLHttprequest, Web 2.0 y Frameworks.
2. No sera 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

Diunggah oleh

Informasi Dokumen

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Tutorial de AJAX

Diunggah oleh

Hak Cipta:

Format Tersedia

Tutorial de AJAX

Por Sisco el 18 de Marzo de 2006 con 524,787 visitas

Anda mungkin juga menyukai