Para que la tecnología AJAX funcione necesita varios elementos, todos indispensables:
1. La página web, por supuesto. En ella más adelante aprenderemos a colocar espacios bien definidos para depositar la respuesta del servidor.
2. Un canal de comunicación silencioso, llamado "objeto XMLHTTPRequest"
3. Un contenido previamente registrado en el servidor, que será la respuesta a nuestra solicitud.
Normalmente cuando queremos "cargar" una página en el navegador, escribimos la URL en la barra de direcciones y listo!
Pues bien, básicamente el objeto AJAX hace lo mismo pero sin que nadie lo vea (esta es una de las formas que tiene para solicitar la información al servidor). Cuando obtiene el resultado, se ejecuta el siguiente paso que consiste en colocar ese resultado a la vista del usuario, en una zona de la página preparada para esto.
Cómo creamos el objeto AJAX?
Lo primero es "declararlo" y ponerle nombre. Todos los navegadores modernos (IE7, Firefox, Safari y Opera) tienen ya incluido el objeto, por lo que se puede declarar así:
variable=new XMLHttpRequest();
Ahora bien, para versiones antiguas de Internet Explorer como IE5 y IE6, se necesita declarar distinto:
variable=new ActiveXObject("Microsoft.XMLHTTP");
En definitiva, para lograr que funcione bien se declara verificando la forma en que funcione bien para cualquier navegador:
var ajax;
if (window.XMLHttpRequest)
{// codigo para IE7+, Firefox, Chrome, Opera, Safari
ajax=new XMLHttpRequest();
}
else
{// codigo para IE6, IE5
ajax=new ActiveXObject("Microsoft.XMLHTTP");
}
Y... donde coloco eso?
Un sitio adecuado para empezar sería la cabecera de la página, para hacer pruebas o cuando no tiene más que una página en su proyecto, es decir entre las etiquetas <head> y </head>, sin embargo yo recomendaría preparar un archivo .js separado, y hacer una llamada a ese archivo en la cabecera de la página.
Creamos un archivo javascript:
function nuevoAjax()
{
var ajax = false;
if (window.XMLHttpRequest)
{// codigo para IE7+, Firefox, Chrome, Opera, Safari
ajax=new XMLHttpRequest();
}
else
{// codigo para IE6, IE5
ajax=new ActiveXObject("Microsoft.XMLHTTP");
}
return ajax;
}
Lo guardamos con el nombre que mas nos guste, en mi caso lo llamaré (por pura originalidad) ajax.js
Luego, cargamos el archivo ajax.js en la cabecera de la página donde deseamos usar la técnica AJAX.
Para este ejemplo crearé una página html nueva y la nombraré principal.html.
<html>
<head>
<title>Mi pagina con AJAX</title>
<script type="text/javascript" src="ajax.js"></script>
</head>
<body>
</body>
<body>
</body>
Listo! ya estará disponible la función que crea "instancias" del objeto AJAX para que lo usemos cada vez que lo necesitemos.
Que datos voy a capturar del servidor?
Si bien la técnica AJAX hace referencia al uso del XML como lenguaje de transporte de datos, no se limita a este lenguaje. AJAX devolverá el contenido tal como lo consiga en el servidor, salvo pequeñas limitaciones relacionadas con el idioma y la codificación del contenido.
Lo lógico es que se trate de datos que varíen constantemente, o cuyo origen se quiera mantener en secreto, o resultados de fórmulas complejas con muchas variables en juego, o cosas por el estilo.
Por ahora solo necesitaremos algún contenido para hacer nuestras pruebas. En mi caso escribiré un archivo con la palabra Neeos y lo guardaré como dato.html en el servidor.
Luego haremos una llamada con AJAX para que el servidor nos devuelva el contenido del archivo dato.html. En la zona <head> de nuestra página principal.html, después de la linea donde llamamos al archivo ajax.js escribimos:
<script language="JavaScript" type="text/JavaScript">
function cargarDatos()
{
var respuesta;
var objeto_ajax=nuevoAjax();
objeto_ajax.open("GET", "dato.html", true);
objeto_ajax.onreadystatechange=function() {
if (objeto_ajax.readyState==4)
{
respuesta = objeto_ajax.responseText;
}
}
objeto_ajax.send(null);
}
</script>
Expliquemos esto: la función tiene como objetivo capturar el contenido del archivo dato.html en silencio, sin que el usuario lo note.
- Creamos una variable vacía para la respuesta:
var respuesta;
- Creamos una instancia del objeto XMLHTTPRequest del que hablamos al principio, usando la función nuevoAjax() que preparamos en el archivo ajax.js:
var objeto_ajax=nuevoAjax();
- Abrimos el archivo dato.html usando el método GET, es decir, enviando la información al servidor por URL.
objeto_ajax.open("GET", "dato.html", true);
Debo mencionar un par de cosas con respecto a esta línea. Con el método GET podemos enviar al servidor datos para que este sepa que respuesta darnos. por ejemplo:
objeto_ajax.open("GET", "dato.php?id=325&date=22/10/2000", true);
En este caso le diríamos al servidor que necesitamos un contenido relacionado con el ítem número 325 para la fecha 22/10/2000. Hemos llamado al archivo que procesa esta solicitud dato.php porque en nuestro ejemplo imaginario se hace uso del PHP para consultar la base de datos y obtener una respuesta.
Otra cosa a tomar en cuenta es la palabra "true", que significa que la consulta se hará de manera Asíncrona. Eso quiere decir que si existen otras cosas que necesiten realizarse en la página, estas se harán sin esperar la respuesta del servidor. Eso le da tiempo al servidor a "pensar bien su respuesta antes de hablar" ;-)
- Le indicamos al objeto AJAX que debe esperar una respuesta, en este caso el estado 4 significa "respuesta recibida":
objeto_ajax.onreadystatechange=function() {
if (objeto_ajax.readyState==4)
{
respuesta = objeto_ajax.responseText;
}
}
Ponemos esa respuesta en la variable "respuesta".
- Desencadenamos toda la funcion con la orden objeto_ajax.send(null); Aquí es donde realmente empieza a trabajar el objeto AJAX.
Si decidimos usar el método POST en lugar de GET, los datos adicionales que se le envían al servidor se colocarían en lugar de null.
y ahora que hago con la respuesta?
Para demostrar como funciona la técnica AJAX, vamos a usar dos ejemplos:
Ejemplo 1: campo de texto
En la zona <body> de la página principal.html colocamos un campo de texto vacío y un botón para ejecutar la función cargarDatos()
<body>
<input type="button" name="cargar" onclic="cargarDatos();" value=" Cargar Datos " />
<br />
<input type="text" name="resultado" id="resultado" value="" />
</body>
Luego hacemos una pequeña modificación a la función cargarDatos() para que ponga los resultados en el campo de texto resultado:
function cargarDatos()
{
var respuesta;
var objeto_ajax=nuevoAjax();
objeto_ajax.open("GET", "dato.html", true);
objeto_ajax.onreadystatechange=function() {
if (objeto_ajax.readyState==4)
{
respuesta = objeto_ajax.responseText;
document.getElementById('resultado').value = respuesta;
}
}
objeto_ajax.send(null);
}
Ejemplo 2: Zona DIV contenedora
La otra forma de hacerlo es similar, pero en lugar de un campo de texto, usaremos una zona contenedora para la respuesta:
<body>
<input type="button" name="cargar" onclic="cargarDatos();" value=" Cargar Datos " />
<div id="resultado"></div>
</body>
Y nuevamente hacemos una pequeña modificación a la función cargarDatos() para que ponga los resultados en la zona DIV resultado:
function cargarDatos()
{
var respuesta;
var objeto_ajax=nuevoAjax();
objeto_ajax.open("GET", "dato.html", true);
objeto_ajax.onreadystatechange=function() {
if (objeto_ajax.readyState==4)
{
respuesta = objeto_ajax.responseText;
document.getElementById('resultado').innerHTML = respuesta;
}
}
objeto_ajax.send(null);
}
Has tus propias pruebas y coméntanos que tal te fue, si dieron los resultados esperados. Aun nos queda mucho que aprender de esta simpática tecnología.
No hay comentarios:
Publicar un comentario