Amigos del blog, este es el primer post técnico del año el cual espero les sea de su agrado, y vamos a ver como podemos indicarle al usuario que se esta realizando una operación AJAX en la página, ya que siempre que se realiza un llamado AJAX realmente el usuario si se esta realizando alguna operación o no en la página.

El ejemplo es sencillo (no tiene nada de diseño) pero ya ustedes lo podrán mejorar.

Entonces manos a la obra, vamos a tener una interfaz sencilla, la cual consta de principalmente de una caja de texto en la que mostraremos el nombre de un usuario devuelto por el servidor, en resumen nuestro HTML será algo como:

1: <div> 2: <h1>jQuery | Informando que esta realizando una petición AJAXh1> 3: <hr/> 4: <label>Usuario:label> 5: <asp:TextBoxID="txtUsuario"runat="server">asp:TextBox> 6: <imgid="imgAjax"src="images/loader.gif"alt="Procesando"title="Buscando Usuario"class="ajaxLoader"/> 7: <asp:ButtonID="btnEjecutar"runat="server"Text="Buscar Usuario"/> 8: div>

Luego de tener lista ya nuestra complicada interfaz jaja, procedemos a escribir el código jQuery:

1: $(function () { 2: var imgAjax = $("#imgAjax"); 3: var campoTxt = $("#<%= txtUsuario.ClientID %>"); 4: $("#<%= btnEjecutar.ClientID %>").click(function (e) { 5: e.preventDefault(); 6: campoTxt.val(''); 7: imgAjax.removeClass('ajaxLoader'); 8: $.ajax({ 9: type: "POST", 10: url: "Home.aspx/ObtenerUsuario", 11: contentType: "application/json; chartset=utf-8", 12: dataType: "json", 13: success: function (resul) { imgAjax.addClass('ajaxLoader'); campoTxt.val(resul.d); }, 14: error: function () { imgAjax.addClass('ajaxLoader'); alert('Se ha producido un error.');} 15: }) 16: }) 17: })

Ahora voy a explicar el código jQuery anterior:

  • Línea 2 y 3: Guardamos en variables los selectores (elementos) que necesitamos.
  • Linea 4: Iniciamos la estructura de la petición AJAX.
  • Línea 5: Le cancelamos al botón su comportamiento por defecto para que no realice postback.
  • Línea 6: Limpiamos el campo de texto.
  • Línea 7: Removemos la clase ajaxLoader a la imagen, es decir ahora la imagen se muestra.
  • Linena 13 y 14: Lo importante acá es que a imgAjax le añadimos la clase ajaxLoader, esto es para que la imagen se oculte.

Y el evento en el lado del servidor:

1: 2: PublicSharedFunction ObtenerUsuario() AsString 3: Thread.Sleep(4000) 4: Return"Julio Avellaneda!!" 5: End Function

Para que la ejecución de la función tarde un poco le hacemos un Sleep al servidor de 4 segundos, y luego continuará con la ejecución de la función, en este caso por simplicidad le he colocado que siempre devuelva la misma cadena de texto, pero en una aplicación muy seguramente vamos a tener una lógica mucho más compleja.

Finalmente cuando iniciemos con nuestro llamado AJAX vamos a ver que al lado del campo de texto se muestra una imagen que indica que se esta realizando una acción:

Imagen1

Espero les sea de utilidad, como siempre les dejo el código del ejemplo:

Descarga el ejemplo! (el archivo se llama jQueryAJAXIndicator)