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.
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;
}
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.
Estado del Objeto:
0 = uninitialized
1 = loading
2 = loaded
3 = interactive
4 = complete
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
<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>
El PHP
<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>
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
3 comentarios, 23 referencias
+
#