Blog: Desarrollo web
Inicio > Blog > Desarrollo web
Un ejemplo sencillo de AJAX
Publicado el: 5/10/2007 en: Desarrollo web | 18 comentarios
¿Necesita una aplicación en AJAX?
Presupuesto gratuito
91 759 00 24
Llámenos o complete nuestro formulario de contacto.
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">
En este div se cargará asíncronamente el contenido del ejemplo
Escoge una opción del menú...
Páginas que cargamos
La primera se llamará ej1.html:
Ejemplo tutorial 1
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.
Y ej2.html:
Ejemplo tutorial 2
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.* 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
}
(7 voto(s), media: 3.29 sobre 5)
Deja tu comentario18 Comentarios
vladimir prieto
7/10/2007
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!
ionakk
19/11/2007
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)
2mdc
5/03/2008
muchas gracias ionakk, nos alegra mucho que nuestra página te haya servido de utilidad
Juan Martin
15/05/2008
El codigo funciona sin problemas en Firefox, pero al ejecutarse en el Internet Explorer si bien se carga la pagina no permite realizar las peticiones a los ejemplos de Ajax dan error de Acceso Denegado. Que podra ser ?
meneame.net&hellip
12/06/2008
La potencia de Ajax en un ejemplos sencillos
Practico y sencillo ejemplo 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.
David Santamaria
24/06/2008
lindo ejemplo, yo me guie de uno similar para crear mi web de viajes, pero no tengo ni historial ni links absolutos
Laura
25/06/2008
gracias, David!
firson
15/10/2008
Chevere hermano, esta tcnologia es bastante buena
israel
30/11/2009
No funciona en el IE8 en adelante por cuestiones de la seguridad del IE…alguien sabe como correguir ese error…?
davlayer
12/01/2010
Yo cambie el archivo codigo.js.
Es el siguiente:
var pagina_requerida = false;
// Documento JavaScript
function llamadasin(url, contenedor){
if(navigator.appName == “Microsoft 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 if (window.XMLHttpRequest) {
// Entra solo el Mozilla
// comprueba si el navegador es opera, safari, mozilla, etc.
pagina_requerida = new XMLHttpRequest()
} 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)
} // Fin llamadasin
// 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
}
davlayer
12/01/2010
Lo cambie para que funcione en todos los navegadores. Saludos
Laura Blanco
12/01/2010
¡Muchas gracias davlayer!
ilen
22/02/2010
hola gracias por el tutorial….. primer que lo explica como es, llevo mucho tiempo buscando uno y todos los explican mal, este lo probe y funciono y lo entendi mejor Gracias
Laura Blanco
25/02/2010
De nada ilen, gracias a ti por tu sincero comentario.
Apuestas
5/07/2010
El ejemplo está muy claro y funciona bien, lo usaré para mejorar mi web. Muchas gracias.
kirokw
24/11/2010
la funcion $.get de jQuery equivale a las peticiones de AJAX???
skychack
8/10/2011
Hola mundo!
cesar
28/01/2012
hola a todos. Intenté con las dos formas propuestasdel script pero nada, solo funciona en firefox… me devané los sesos cambiando las variables, pero nada aún, alguien que pueda colaborar a resolver este lio? gracias.
Deja tu comentario
Tags HTML Permitidos:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>