Bueno, hacia tiempo que queria poner un post/tutorial para iniciarse en el mundo del Ajax, la verdad es que realmente es un mundo muy pequeño, pero muy interesante.
Para empezar tenemos que entender el concepto, la wikipedia nos la define como una técnica de desarrollo web para crear aplicaciones interactivas mediante la combinación de tres tecnologías ya existentes (Javascript, XML y XHTML).
Partiendo de esta base, tenemos que entender que el Ajax unicamente es una forma de programar, no un lenguaje, sino un concepto.
El concepto es el siguiente:
- Mediante la implementación de la función (que explicaremos más abajo) generamos un código que actuará a un evento originado por el usuario.
- Este código, realizará una llamada a un página dinámica (PHP, ASP, JSP,….) de la cual devolveremos un resultado (XML o xHTML).
- Luego con el resultado obtenido lo tratamos y lo mostramos por pantalla mediante un div u otro elemento destinado anteriormente para ello.
La idea es simple, pero quizas algo rara si no se vé un poco de codigo.
Unicamente necesitamos una función con la que generaremos el objeto que realiza la conexión.
[code]
function getXmlHttpObject()
{
var xmlhttp;
/*@cc_on
@if (@_jscript_version >= 5)
try
{
xmlhttp = new ActiveXObject(”Msxml2.XMLHTTP”);
}
catch (e)
{
try
{
xmlhttp = new ActiveXObject(”Microsoft.XMLHTTP”);
}
catch (e)
{
xmlhttp = false;
}
}
@else
xmlhttp = false;
@end @*/
if (!xmlhttp && typeof XMLHttpRequest != ‘undefined’)
{
try
{
xmlhttp = new XMLHttpRequest();
}
catch (e)
{
xmlhttp = false;
}
}
return xmlhttp;
}
[/code]
Esta función crea un objeto HttpRequest con el cual podremos realizar una llamada a otra página. El objeto HttpRequest, tiene una serie de atributos y metodos que nos permiten trabajar con él perfectamente.
Los más importantes son los destinados a llevar un control de la conexión actual.
[code]
Estado del Objeto:
0 = uninitialized
1 = loading
2 = loaded
3 = interactive
4 = complete
[/code]
A nosotros por el momento nos importará el estado 4 o complete, ya que es el que controlaremos para completar la conclusión de nuestro programa.
Ahora solo nos queda verlo todo funcionando y montado.
Lo vamos a montar en 2 ficheros (uno HTML y otro un PHP), luego esto va a gusto del consumidor.
El HTML
[code]
<html>
<head>
<script>
// declaramos el objeto http.
var http = getXmlHttpObject();
// Función que dependiendo del navegador crea un objeto.
function getXmlHttpObject()
{
var xmlhttp;
/*@cc_on
@if (@_jscript_version >= 5)
try
{
xmlhttp = new ActiveXObject(”Msxml2.XMLHTTP”);
}
catch (e)
{
try
{
xmlhttp = new ActiveXObject(”Microsoft.XMLHTTP”);
}
catch (e)
{
xmlhttp = false;
}
}
@else
xmlhttp = false;
@end @*/
if (!xmlhttp && typeof XMLHttpRequest != ‘undefined’)
{
try
{
xmlhttp = new XMLHttpRequest();
}
catch (e)
{
xmlhttp = false;
}
}
return xmlhttp;
}
function ejecuta_busqueda()
{
variable = ‘&id=’+escape(searchV);<br />
//abre la pagina, uso escape para evitar caracteres extraños
http.open(”GET”, url + variable, true);</p>
http.onreadystatechange = handleHttpResponse;
//send nada
http.send(null);
}
// Funcion que se realiza cuando se completa el estado.
function handleHttpResponse()
{
if (http.readyState == 4)
{
results = http.responseText;
//innerHTML es para llenar el div resultado con info, recuerden javascript es casesensitive (una variable a != A)
document.getElementById(’resultado’).innerHTML = results;
}
}
</script>
</head>
<body>
<input type=”text” name=”textSearch” id=”search” onclick=”ejecuta_busqueda(this.value);”/></p>
<div id=”resultado”></div>
</body>
</html>
[/code]
El PHP
[code]
<ul>
<?
// Conectamos con la base de datos
include (”conexion.php”);
//
if ($_GET['id'])
{
?>
<li>Resultados:
<?
$result = mysql_query(”SELECT * FROM “.TABLA.” WHERE search = ‘”.$_GET['id'].”‘;”);
while($row = mysql_fetch_row($result))
{
?>
<li>< ?php echo $row[1];?></li>
<? } ?>
<?
}
else
{
?>
<li>Resultados:</li>
<?
}
?>
</ul>
[/code]
En este ejemplo usamos el metodo responseText del objeto HttpRequest, que nos devuelve en formato xHTML lo tratado en la pagina PHP.
Espero que os haya servido de algo, he intentado hacerlo lo más mundano posible, evitar tecnicismos y profundizar demasiado para no liar a la gente, prometo ir poniendo más cositas de estas.
El código no lo he probado y puede que de algún error, pero el concepto creo que queda bastante claro.
Más Informacion:
Herramientas interesantes:
- XHConn, función javascript que facilita mucho la conexión.
Lista de aplicaciones hechas con Ajax: Denken Über
Explicación detallada: Denken Über
Personalmente opino que hay que saber donde usarlo, y para que usarlo.
Hola, unas preguntas que se me ocurren al ver el código. ¿El resultado de la llamada ajax podría ser texto sin ningún formato?
¿La variable url que figura en ejecutar_busqueda no la veo definida, qué es? ¿Qué es y el que aparecen en la misma función javascript en las dos primeras líneas? Parece que la división por navegadores la haces por IE antes y despúes del 5 y luego para todos los demás, ¿qué pasa si el navegador es un Safari? ¿Basta con comprobar el estado del objeto para escribir la respuesta? ¿Es necesario activar el modo de compilación condicional en jscript (que no javascript) para hacer la división por navegadores? ¿Se podría hacer esto mismo con javascript estándar? ¿qué le pasas a la función ejecuta_busqueda en el input? ¿y el que le metes luego?
Sólo son curiosidades. Interesante post. Me parece genial que la gente se acerque a las nuevas tecnologías, pero he leído que AJAX tiene una serie de pegas que hace de la usabilidad de la página un verdadero problema. ¿Tú que piensas? ¿En que circustancias usarías AJAX? Me preocupa este tema porque en mi trabajo hay gente que ha aprendido esto del AJAX y por lo que he visto por ahora, nos da más problemas que beneficios. Otra curiosidad, y perdona que abuse de tu tiempo, ¿cómo funciona en entornos donde la accesibilidad es imprescindible? Quiero decir, ¿cómo crees que un lector de pantalla para gente con discapacidades visuales, soporta el tema que partes de la página se recargen bajo demanda y no inicialmente?
Gracias y de nuevo. Gran trabajo.