Un ejemplo sencillo de AJAX

#### ¿Necesita una aplicación en AJAX? Presupuesto gratuito 91 759 00 24 Llámenos o complete nuestro formulario de contacto. [más información](http://www.2mdc.com/aplicaciones_web/aplicaciones_web.php "más información")[contacto](http://www.2mdc.com/2mdc/contacto.php "contacto") AJAX (Asynchronous JavaScript And XML) es una suma de técnicas

Artículos recientes

#### ¿Necesita una aplicación en AJAX? Presupuesto gratuito 91 759 00 24 Llámenos o complete nuestro formulario de contacto.
[más información](http://www.2mdc.com/aplicaciones_web/aplicaciones_web.php "más información")[contacto](http://www.2mdc.com/2mdc/contacto.php "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.

Diagrama de Ajax

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.  

![flor](ejemplos/flor.jpg)

Y ej2.html:

![mar](ejemplos/mar.jpg)  

### 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 &lt;html&gt;&lt;/html&gt;, ni &lt;body&gt;&lt;/body&gt;, 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