Hola, yo lo hago de una manera en la que quiza te puedas guiar:
Tengo el codigo asi:
Código HTML:
<input type="button" value="Consultar" onclick="cargarImagen(); xajax_cargarContenido()" />
<div id="contenido"></div>
Código HTML:
<script>
function cargarImagen(){
document.getElementById('contenido').innerHTML = '<center><img src="cargando.gif" border="0" /></center>';
}
</script> y en el PHP asi:
Código PHP:
function cargarContenido(){
//aqui va el codigo que genera cualquier cosa
$resultado_php = 'Hola Mundo';
$respuesta = new $xajaxResponse();
$respuesta->assign('contenido','innerHTML',$resultado_php);
return $respuesta;
}
Ahora explico:
Cuando le das click al boton, ejecutas la funcion javascript cargarImagen y xajax_cargarContenido, en cargarImagen le estas diciendo que en el div "contenido" inserte la imagen de cargando mientras se genera la respuesta ajax, inmediatamente sale la imagen se ejecuta la otra funcion y cuando el resultado ajax se genere el xajax reemplazará la imagen que colocaste de cargando por el resultado que hayas obtenido en el php mediante el metodo "innerHTML" ya que cuando lo usas reemplazas todo lo que tengas por lo que le estes enviando.
Espero te haya servido.