Contenido

Primer contacto con Ajax

6 Dic

+ 26

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:

  1. 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.
  2. Este código, realizará una llamada a un página dinámica (PHP, ASP, JSP,….) de la cual devolveremos un resultado (XML o xHTML).
  3. 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

  • 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.

  • Buenas monkeyDeveloper.
    Me has mareado con tantas preguntas, pero voy a intentar resolverlas todas, de forma clara.

    Quiero que antes de nada tengas en cuenta que este es uno de los primeros posts que hice y que ahora no haría las cosas tal y como estan aqui, pero asi y todo como base puede ir bien.

    Me preguntas por la variable url, tendría que haberla puesto en mayuscula para indicar que ahi iba la URL (fallo mio), osea ahi es donde ha de ir la url de destino a donde estamos realizando la llamada.

    El tema de Safari u otros navegadores son cosas que he ido aprendiendo con el paso del tiempo, y me he dado cuenta que ahora mismo hasta que la W3C diga de sacar al especificación seguimos con el mismo problema de estandarización. Y es una lástima. Por eso los desarrolladores tenermos que ser más astutos y probar nuestras aplicaciones deshabilitando el javascript (por ejemplo). Este theme no cuenta xDD

    El estado del objeto es esencial para saber si esta listo para mostrar datos o simplemente esta todavia cargando o a terminado mal la cosa, pero tambien debemos controlar el valor de respuesta con status, una propiedad del objeto XMLHttpRequest, otra vez cosas que he ido descubriendo con el uso.

    Desconozco por completo a que te refieres con compilación condicional de jscript. Si tienes un minuto me gustaría que lo comentaras.

    A la función ejecuta_busqueda se le pasa this.value, es el valor del texto introducido en el input.

    Lo que hacemos luego es insertar en el div el resultado de la llamada, dependiendo del valor introducido en el input.

    El tema de las pegas sobre Ajax… la wikipedia lo explica mejor 😛
    Personalmente opino que hay que saber donde usarlo, y para que usarlo.
    Cuando empecé con el tema, recuerdo que monté una página que sin interacción de usuario de autorecargaba para obtener unos datos dependiendo de paises… una chapuza que un buen amigo me criticó y aún me echa en cara para reirse de mi xDD

    Con esto quiero decir que hay que saber cuando y para que usarlo, el como al final sale.

    El tema de la accesibilidad para mi aún es algo muy nuevo y no he mirado mucho el tema de javascript orientado a Accesibilidad, pero en cuento tenga algo de tiempo y ganas, esta en mi lista de cosas pendientes.

    Espero haberte ayudado en lo que sabía, la misión de este foro aparte de ofrecer las cosillas que voy descubriendo es aprender y que la gente como tu me enseñe cosas. Y asi aprendemos todos.

    Un saludo y gracias por tus preguntas 😉

  • Hola Andrés, sigo habitualmente tu Blog pues para mi es una gran referencia. Estoy ahora inmerso en programación de la API de Google para mapas y pretendo utilizar tecnologia AJAX para ciertas aplcaciones. El caso es que no consigo utilizar la respuesta que ofrece el método XMLHttpRequest para gestionar variables. Me explico con: document.getElementById(’resultado’).innerHTML = results consigo una respuesta en forma de cadena que se muestra en pantalla pero no se como utilizar esta respuesta para usos posteriores dentro de una variable simple o bien dentro de arrays de Javascript.

Comentar

#

Me reservo el derecho de eliminar y/o modificar los comentarios que contengan lenguaje inapropiado, spam u otras conductas no apropiadas en una comunidad civilizada. Si tu comentario no aparece, puede ser que akismet lo haya capturado, cada día lo reviso y lo coloco en su lugar. Siento las molestias.