Una breve reseña historica nos traslada hasta el año 1998, Ajax surge como solucion para desarrollar la versión web (OWA - Outlook Web Access) del servidor de correo Microsoft Exchange, donde se buscara una pagina que periodicamente se vaya actualizando y se analizaron varias opciones para conseguir ese objetivo, en respueta a esto se crea Ajax. Otras aplicaciones web bastante utilizadas en internet que utilizan esta técnica son: Gmail, Google suggest y Google Maps.
AJAX (Asyncronic Javascript and XML) no es un lenguaje de programacion, es trabajar con varios lenguajes HTML XML JAVASCRIPT y PHP, o en lugar de PHP trabajar con otro lenguaje C#, Visual Basic, Java, u otro lenguaje web.
Las principales razones por las que AJAX es una mejor técnica de programacion son las siguientes:
- AJAX, ayuda a que se consulte con menos información al servidor HTTP para un resultado, y solo consulta las veces necesarias.
- La posibilidad de hacer peticiones al servidor sin tener que volver a cargar la página.
- La posibilidad de analizar y trabajar con documentos XML.
En resumen eso es lo mínimo de teoria que se necesita saber sobre AJAX, a continuación lanzaremos un ejemplo pequeño, suficiente para entender como funciona este metodo.
Necesitamos un navegador, puede ser Internet Explorer 6, Firefox, Safari, Chrome que soporten el objeto XMLHttp, en la actualidad casi todos los navegadores soportan, solo hay que tener cuidado con navegadores antiguos anteriores a los años 2000 o 1999.
Necesitamos tener instalado un servidor de paginas, puede ser IIS, Apache, Apache Tomcat, Cherokee, etc etc. El interprete que instalemos definirá el lenguaje con el que trabajemos. Es decir, en este momento se escogerá si usaremos PHP, ASP, C++, C#, Java .......
Podemos tener un IDE instalado, el de preferencia, incluso es posible trabajar desde el mas sencillo y basico editor de texto que posean en su sistema operativo.
Ahora continuemos con la rutina BASE para trabajar con AJAX, esto lo colocan en el directorio raiz de su pagina web.
//Obtiene una instancia del objeto XmlHttpRequest
function ObtenerObjetoAjax() {
var peticionHttp = null;
try {
//Comprobación para navegadores Firefox, Opera y Safari
if (window.XMLHttpRequest){
peticionHttp = new XMLHttpRequest();
}
//Comprobación para navegadores IE
else if (window.ActiveXObject) {
//Comprobamos para JavaScript 5.0. Si da error, //creamos un objeto con la versión anterior
try {
peticionHttp = new ActiveXObject("Microsoft.XMLHTTP2");
}catch (e1) {
peticionHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
}
//Comprobación para IceBrowser
else if (window.createRequest) {
peticionHttp = window.createRequest();
}//Si el navegador no soporta ajax retornamos null
else {
peticionHttp = null;
}
}catch (e2) {
return null;
}
return peticionHttp;
}
Luego creen un archivo index.html con lo siguiente:
Y el archivo horaservidor.php con lo siguiente:
echo "Hola, son las ".date("H:i:s");
?>
Por ultimo hay que aumentar unas funciones ya personalizadas que ya varian del metodo de programar de cada quien, aqui un ejemplo pequeño pero donde se puede comprender perfectamente como funciona todo esto ( En el mismo archivo ajax.js)
function ObtenerDatosASinc(url, tipoResultado, metodo, parametrosPost,cacheDatos, funcionPintarDatos){
try {//Obtenemos la instancia del objeto XmlHttpObject
var objAjax = ObtenerObjetoAjax();
//Nos suscribimos al evento onreadystatechange para manejar los
//posibles estados de la petición para que se lance la
//función recibida por parámetro
objAjax.onreadystatechange = function() {
switch (objAjax.readyState) {
//Petición no inicializada
case 0:break;
//Conexión con el servidor establecida
//(llamada a send)
case 1:break;
//Enviando petición
case 2:
//Aquí se podría mostrar un gif que indicase
//que se está realizando la petición al servidor
//Habría que ocultarlo en el caso 4,
//cuando ya se ha recibido la respuesta
break; //Recibiendo petición
case 3:break;
//Respuesta del servidor recibida
case 4://Si el status code de la respuesta es 200,
//todo ha ido bien
if (objAjax.status == 200) {
switch (tipoResultado) {
case 'XML': funcionPintarDatos(objAjax.responseXML);
break;
case 'TEXT': funcionPintarDatos(objAjax.responseText);
break;
default: funcionPintarDatos(objAjax.responseText);
break;
}
}//Si no, no ha ido bien y retornamos el texto
//equivalente al status code
else {
switch (tipoResultado) {
case 'XML':funcionPintarDatos('' + objAjax.statusText + '');
break;
case 'TEXT':funcionPintarDatos(objAjax.statusText);
break;
default:funcionPintarDatos(objAjax.statusText);
break;
}
}
break;
//No hay más estados en la petición,
//por lo que no hacemos nada
default:break;
}
};
//Si realizamos la petición por POST
if (metodo == 'POST') {
//Si no recibimos parámetros ponemos la variable a null
if (parametrosPost == 'undefined' || !parametrosPost) {
parametrosPost = null;
}
objAjax.open('GET', url, true);
objAjax.setRequestHeader('Content-type','application/x-www-form-urlencoded');
objAjax.send(parametrosPost);
}
//Si no la realizamos por GET.
else {
//Internet Explorer cachea las peticiones por GET,
//por lo que agregamos un parametro random si se
//quiere evitar
if (!cacheDatos) {
var separadorUrl =(url.indexOf('?') > -1) ? '&' : '?';
url += separadorUrl + 'rndCache=' + Math.random();
}
objAjax.open('GET', url, true);
objAjax.send(null);
}
}catch (e) {
//Si hay un error mostramos su mensaje
alert(e.message);
}
}
//Realiza una petición asíncrona al servidor para obtener la hora
function ObtenerHora() {
ObtenerDatosASinc('horaservidor.php', 'TEXT', 'GET', null, false, PintarHora);
}
//Función para pintar los datos recibidos del servidor
function PintarHora(datos) {
document.getElementById('idDivDestino').innerHTML = datos;
}
Con esto ya tenemos el ejemplo mas sencillo de ajax, no es cosa de otro mundo, funciones de javascript, saber bien php, asp, java, o el lenguaje con el que se trabajara y ser ordenado.
A continuacion un resumen explicando como funciona esto:
Index.html La pagina que carga primero por defecto, el boton llama a un evento que esta en el archivo ajax.js (en index.html esta declarada previamente la libreria ajax.js, de lo contrario no pasara nada en lo absoluto).
Ajax.js motor principal de la pagina, en esta se guarda el metodo para la creacion del objeto XMLHttpRequest y las funciones mas basicas, de estas ya podemos enviar a otras librerias mas extensas en php, asp, java, js, etc etc.
horaservidor.php Pagina desde donde se devuelve el resultado (la hora) y con la que se actualiza la pagina index.htm.
Sencillo verdad ???? Desde mi punto de vista la practica hace al maestro asi que ahora pueden cambiar las opciones de este ejemplo, hacer que conecte a una BD, que imprima tablas, imagenes, etc etc. AJAX es mucho mas completo, y como se definio antes en las ventajas ahorra muchisimos recursos para no estar actualizando constantemente las paginas.
Espero les haya servido el brevisimo tutorial y a practicar.
