[Jquery-Es] Ayuda con AJAX

[Choan Gálvez]

Hola.

On 18/04/2008, at 17:47, carlos campderrós wrote:
> Hola,
>
> 2008/4/18 José Flores <jronal en gmail.com>:
>
>> Hola a todos,
>> tengo una duda respecto a la función ajax, como podría colocar un  
>> loader,
>> mientras se esperan los datos del server.
>>
>>
>> en que parte inserto un mensaje que diga cargando...
>>
>
> Yo lo que he usado ha sido el método load. Pierdo la parte de  
> control de
> errores si la petición sale mal, aunque en principio no es algo que me
> preocupa.
>
> $("#destino").html("<blink>loading...</blink>").load("
> http://mi.servidor.com/ajax.php?foo=bar");
>
> No me maten por el <blink> xD. Otra opción es usar una imagen. El
> funcionamiento es sencillo: Tan solo activarse esta linea de  
> código, el
> contenido de #destino es eliminado para ser sustituido por
> <blink>loading</blink> y a continuación se hace la petición ajax.  
> Cuando la
> petición llega, vuelve a sustituir el contenido de #destino (en  
> este caso el
> <blink>) por el resultado ajax.
>
> Obviamente, ahí solo puedo colocar el loading en el mismo sitio  
> donde cargo
> los datos, no puedo hacer una capa superpuesta a toda la pantalla con
> semitransparencia con el loading...

Otra opción es utilizar observadores globales para las peticiones  
Ajax. Me cito a mí mismo (de una magna obra en proceso):

 >>>
[...] Los métodos ajaxStart, ajaxSuccess y ajaxError nos permiten  
observar los cambios de estado de las peticiones Ajax. Cuando se  
inicie una petición, cuando finalice con éxito y cuando falle,  
tocaremos las clases de #spinner para mostrar uno u otro icono  
mediante CSS.

// con removeClass dejamos vacío el atributo class
// contuviera o no alguna clase, con addClass añadimos la que nos  
interesa
$('#spinner')
   .ajaxStart(function() { // cada vez que se inicia una petición ajax
     $(this).removeClass().addClass('loading');
   })
   .ajaxSuccess(function() { // cada vez que una petición finaliza  
con éxito
     $(this).removeClass().addClass('success');
   })
   .ajaxError(function() { // cada vez que una petición falla
     $(this).removeClass().addClass('error');
   });

<<<

Por supuesto, en lugar de jugar con las clases podemos añadir y  
quitar contenido, etc.

Un saludo.
-- 
Choan Gálvez, que escribe sobre javascript en Scriptia
<http://blog.scriptia.net/>