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">
< script src="js/codigo.js" type="text/javascript">
### 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.status200 || window.location.href.indexOf("http")==-1))
document.getElementById(contenedor).innerHTML=pagina_requerida.responseText
}