Un ejemplo sencillo de AJAX
October 5th, 2007
AJAX (Asynchronous JavaScript And XML) es una suma de técnicas de desarrollo web que permite que las aplicaciones creadas se ejecuten en el navegador y se comuniquen de forma asíncrona con el servidor de forma transparente al usuario. Con esto se consigue modificar la página sin necesidad de recargarla, de esta forma se aumenta la interactividad.
A continuación haremos un ejemplo sencillo que demuestra el potencial de este método de desarrollo. El objetivo es crear una página con dos enlaces que carguen contenido asíncrono.
Necesitamos un XHTML inicial y dos más que serán los que carguemos, una hoja de estilos y un archivo JS que será donde tengamos nuestro código.
Creamos los documentos XHTML
Nuestra página principal 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=iso-8859-1" />
<title>Asíncrono Javascript y XML</title>
<link href="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:llamadasin(’ejemplos/ej1.html’, ‘contenido’);">Ejemplo 1</a>
<a href="javascript:llamadasin(’ejemplos/ej2.html’, ‘contenido’);">Ejemplo 2</a>
</div>
<div id="contenido">
<h3 class="titulo">En este div se cargará asíncronamente el contenido del ejemplo </h3>
<p>Escoge una opción del menú… </p>
</div>
</body>
</html>
Páginas que cargamos
La primera se llamará ej1.html:
<h3 class="titulos" style="border-bottom: 1px solid #C0C0C0; margin-bottom: -5px">Ejemplo tutorial 1</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed nisi. Nam nulla. Vestibulum mattis leo non pede. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vestibulum egestas. Pellentesque dictum pellentesque quam. Ut ultrices dolor. Pellentesque non odio non lectus mattis aliquam. Maecenas molestie. Phasellus vel augue eget magna adipiscing interdum. Pellentesque sit amet diam vel mi pharetra faucibus. Proin dolor risus, lobortis id, aliquet vitae, tincidunt sed, erat. Morbi tellus. Curabitur lobortis. Donec nunc pede, dapibus non, imperdiet eu, eleifend ut, lorem. Quisque venenatis tempus metus. Duis vitae tellus ac est dignissim nonummy. Nunc convallis, massa vitae laoreet nonummy, turpis leo venenatis purus, vel placerat ipsum massa non tortor.</p>
<img src="ejemplos/flor.jpg" alt="flor" width="300" height="200" />
Y ej2.html:
<img src="ejemplos/mar.jpg" alt="mar" width="300" height="201" />
<h3 class="titulos" style="border-bottom: 1px solid #C0C0C0; margin-bottom: -5px">Ejemplo tutorial 2</h3>
<p>Sed ut perspiciatis, unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam eaque ipsa, quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt, explicabo. Nemo enim ipsam voluptatem, quia voluptas sit, aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos, qui ratione voluptatem sequi nesciunt, neque porro quisquam est, qui dolorem ipsum, quia dolor sit, amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt, ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit, qui in ea voluptate velit esse, quam nihil molestiae consequatur, vel illum, qui dolorem eum fugiat, quo voluptas nulla pariatur? [33] At vero eos et accusamus et iusto odio dignissimos ducimus, qui blanditiis praesentium voluptatum deleniti atque corrupti, quos dolores et quas molestias excepturi sint, obcaecati cupiditate non provident, similique sunt in culpa, qui officia deserunt mollitia animi, id est laborum et dolorum fuga.</p>
* Importante: Aunque la imagen y los ejemplos están en un mismo directorio, al llamarlos desde la raíz (un nivel arriba) hay que indicar la ruta completa de la imagen en el source
Estos documentos no necesitan etiquetas <html></html>, ni <body></body>, ya que estarán contenidas dentro de otra página completa.
Hoja de estilos
La llamamos estilos.css:
body {
background-color: #666666;
font-family: Arial, Helvetica, sans-serif;}
/*Documento CSS*/
#menu{
float: left;
width: 150px;
height: 100px;
padding: 7px;
padding-left: 8px;
border-right-color: #ececf;
border-right-width: 1px;
border-right-style: dotted;}
#menu a{
padding: 3px 1px;
display: block;
width: 100%;
text-decoration: none;
font-weight: bold;
color: #CCCCCC;
border-bottom-width: 1px;
border-bottom-style: dotted;
border-bottom-color: gray;}
#menu a:hover{
background-color: #CCCCCC;
color: #333333;}
#contenido{
float:left;
width:480px;
height: 600px;
margin-left: 10px;
padding: 5px;
padding-bottom: 8px;
background-color: #CCCCCC;}
.titulo {
color: #006699;
font-family: Verdana, Arial, Helvetica, sans-serif;}
.parrafos {
color: #000000;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
JavaScript y objeto XMLHttpRequest
En nuestro código lo primero que tenemos que hacer es comprobar el navegador.
En navegadores estándar tipo Mozilla, Safari, Opera, etc. la llamada a este objeto con JavaScript es window. XMLHttpRequest
En Internet Explorer tenemos que usar el ActiveXObject, del que existen varias versiones llamadas Microsoft.XMLHTTP y Msxml2.XMLHTTP.
Con una función condicional comprobaremos si existe el primer objeto, si es verdadero se creará un nuevo objeto XMLHttpRequest; si es falso se creará un ActiveXObject Microsoft.XMLHTTP, y si éste tampoco existe, tendremos un Msxml2.XMLHTTP.
Cuando creamos el objeto podemos usar sus métodos para comprobar el estado de los datos y propiedades.
Si window. XMLHttpRequest existe, asignamos un nombre de instancia al objeto. Al evento onreadystatechange le asignamos una función de respuesta y llamaremos a los métodos open() y send().
Nuestro archivo codigo.js:
// Documento JavaScript
function llamadasin(url, contenedor){
var pagina_requerida = false
if (window.XMLHttpRequest) {
// comprueba si el navegador es opera, safari, mozilla, etc.
pagina_requerida = new XMLHttpRequest()
}
else if (window.ActiveXObject){
// comprueba si el navegador es internet explorer
try {
pagina_requerida = new ActiveXObject("Msxml2.XMLHTTP")
}
catch (e){
// caso de versión antigua de internet explorer
try{
pagina_requerida = new ActiveXObject("Microsoft.XMLHTTP")
}
catch (e){
}
}
}
else {
return false
}
pagina_requerida.onreadystatechange=function(){
// llamada a la función que carga la página
pintapagina(pagina_requerida, contenedor)
}
// métodos open y send
pagina_requerida.open(’GET’, url, true)
pagina_requerida.send(null)
}
// función que presenta la información
function pintapagina(pagina_requerida,contenedor){
if (pagina_requerida.readyState == 4 && (pagina_requerida.status==200 || window.location.href.indexOf("http")==-1))
document.getElementById(contenedor).innerHTML=pagina_requerida.responseText
}
Descarga los ficheros de ejemplo
Categoría: Programación web
3 Comentarios Deja tu comentario
1. vladimir prieto | October 7th, 2007 at 9:01 am
buen post. pero quisiera agregar algo:
si bien es cierto que con AJAX “van y vienen” XML por “debajo”, también es cierto que existe otra forma: json. es más liviana que XML, y creo, más nueva.
además, también se les olvidó mencionar que librerías como prototype o mootools, encapsulan de excelente forma el proceso de llamadas a través de xmlhttprequest.
y por ultimo una recomendación: mejoren un tanto la diagración del código porque no se entiend mucho de la forma en que está.
saludos!
2. ionakk | November 19th, 2007 at 11:03 am
La verdad es que he comenzado hace muy poco un curso de diseño web (html y dreamweaver) y es gracias a páginas como esta que realmente voy aprendiendo cosas más avanzadas. Muchas gracias a todos. Visitad mi página y me comentais que os parece y como la podría mejorar (seguro que sabeis mil maneras)
3. 2mdc | March 5th, 2008 at 6:50 am
muchas gracias ionakk, nos alegra mucho que nuestra página te haya servido de utilidad
Deja tu comentario
Tags HTML Permitidos:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <code> <em> <i> <strike> <strong>
Trackback this post | Subscribe to the comments via RSS Feed