Pues les comento que buscando en la red no he encontrado ni un solo tutorial que trate de explicarnos al menos las bases de la programación de Ajax (Asynchronous JavaScript And XML), asi que me decidi a hacer este primer tutorial para que quien desea adentrarse a este mundo lo haga sin problemas. Comencemos:
¿Qué es Ajax?
Es una técnica de desarrollo web para crear aplicaciones interactivas. Estas aplicaciones se ejecutan en el cliente, es decir, en el navegador de los usuarios mientras se mantiene la comunicación asíncrona con el servidor en segundo plano. De esta forma es posible realizar cambios sobre las páginas sin necesidad de recargarlas, lo que significa aumentar la interactividad, velocidad y usabilidad en las aplicaciones. (http://es.wikipedia.org/wiki/AJAX)
Basicamente Ajax consiste en utilizar el objeto XMLHttpRequest de JavaScript para realizar diversas peticiones asincronas al servidor sin que el usuario tenga que ser redirigido a otra página y sin cambiar el elemento enfocado.
El objeto XMLHttpRequest interactura directamente con los programas que se encuentran del lado del servidor a traves de un objeto y sus metodos. Algunos de ellos son:
- abort(): Detiene la petición
- getResponseHeader(«NombreEncabezado»): Para obtener el contenido de algun encabezado HTTP. Si omitimos NombreEncabezado, nos regresa todos los encabezados
- open(«metodo», «URL»,»async»,»nombreUsuario», «clave»): Este metodo es el que nos permite mantener la conexión con algun archivo del lado del servidor. A traves de los metodos POST y GET
- send («contenido»): es el metodo que envia la información al programa del lado del servidor
Como todo objeto, XMLHttpRequest cuenta con propiedades, algunas de ellas son:
- onreadystatechange: Es un «gestor de eventos» que nos permite ejecutar ciertas acciones cuando el estado de nuestra aplicación cambia.
- responseText: Este se devuelve cuando una petición ha sido completada
Por el momento solo recuerdo esos metodos, si alguien sabe algunos más no olviden hacermelo saber para ir enriqueciendo este tutorial.
Mientras creemos un ejemplo básico con Ajax (lo unico que hará será indicarnos desde que navegador nos estamos conectando).
//var tipo bool con la que comprobaremos que el navegador sea Internet Explorer
var xmlhttp = false;
//si usamos IE
try {
//si la versión de JavaScript que tenemos instalada es superior a 5
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
alert ("Estas usando IE con JS superior a 5");
}
catch (e){
//Usamos el objeto tradicional de ActiveX
try {
//si estamos usando IE
xmlhttp = new ActiveXObject ("Microsoft.XMLHTTP");
//alert ("Estas usando IE");
}
catch (e){
xmlhttp = false;
}
}
//si no es IE
if (!xmlhttp && typeof XMLHttpRequest != 'undefined'){
xmlhttp = new XMLHttpRequest();
//alert ("No estas usando IE.");
}
Bien, ese codigo como lo pueden ver es muy básico pero sirve para los fines que estamos buscando, eso lo copiaran dentro de un archivo HTML y entre las etiquetas <head></head> dentro de un bloque de JS <script type=»text/javascript»><!– Todo el contenido va aqui–></script>
y listo ejecutenlo.
Ahora pasemos a la siguiente parte, mostrar diversos archivos con Ajax para ello, solo necesitamos generar una funcion que realizará la conexión al servidor, localice el archivo y si la respuesta es correcta entonces muestra el contenido, a continuación les presento el codigo:
//funcion que carga contenido que se encuentre en serverPage
function MuestraArchivo (serverPage, objID){
var serverPage = "content1.html"; //si deseamos que cargue por default alguna página
var obj = document.getElementById(objID);
xmlhttp.open("GET", serverPage);
xmlhttp.onreadystatechange = function(){
if (xmlhttp.readyState == 4 && xmlhttp.status == 200){
obj.innerHTML = xmlhttp.responseText;
}
}
xmlhttp.send(null);
}
Esa funcion la colocaremos dentro de la etiqueta <script></script>, como se dan cuenta la variable serverPage es quien se encarga de obtener el nombre del documento del lado del servidor que mostrara del lado del cliente. Y para asociarlo a un codigo HTML, se realiza de una forma muy fácil, solo tenemos que revisar el siguiente ejemplo. En el cual a traves de diversos vinculos asociados a ID’s podremos realizar las peticiones del lado del server.
<div align="center">
<h1>Mi Sitio Web</h1>
<a href="#" onclick="MuestraArchivo('content1.html', 'MuestraCont');">Pagina 1</a>
<!-- la funcion onclick es quien llama MuestraArchivo donde le pasaremos el archivo a abrir y el Div donde mostraremos el contenido-->
<a href="#" onclick="MuestraArchivo('content2.html', 'MuestraCont');">Pagina 2</a>
</div>
<div id="MuestraCont"></div>
Espero este pequeño tutorial despeje algunas de sus dudas sobre como inicarse con ajax, en el siguiente ejemplo que estoy preparando tratare de explicar como expandir y contraer información