Ajax con Jquery

Ajax es una técnica en el desarrollo web muy utilizada en lo que se denomina web 2.0 y nos ayuda a crear aplicaciones más interactivas.

En esta entrada voy a mostrar una manera sencilla de enviar a procesar un formulario con ajax y para eso vamos a utilizar la librería JQUERY.

Jquery es una librería muy potente, las funciones y utilidades relacionadas con ajax son parte fundamental de jquery. El método principal para realizar peticiones ajax en $.ajax(). Las sintaxis es básicamente $.ajax(opciones), donde opciones hace referencia a un array asociativo.


Yo por cuestiones de compatibilidad con antiguos navegadores utilizo la versión 1.7.1 de Jquery, y específicamente la versión mín.
Esta versión min es una versión comprimida de jquery con las mismas funcionalidades, se le ha quitado los espacios en blanco y comentarios con el fin de ganar velocidad al momento de cargar la página. Yo en lo personal recomiendo utilizar esta versión comprimida en entornos de producción.
Link de descarga de Jquery 1.7.1 min : code.jquery.com/jquery-1.7.1.min.js

Un uso básico de la función ajax sería el siguiente:
$.ajax({
    url: 'pagina.php o pagina.jsp o servlet', //página que va a procesar la petición
    type: 'POST', //puede ser GET o POST
    async:true, //por default es true, indica si la petición es asíncrona o no
    data: 'variable=valor&variable2=valor', //por aquí se pasan las variables
    error: función que procesa el error,
    success: función que procesa la respuesta
});

Ejemplo: Enviar a procesar un formulario Html por Ajax.

El primer paso es agregar la librería de Jquery en nuestra página, esto se lo hace llamando al archivo js dentro de la etiqueta head.

El siguiente es el código de un formulario html de login.

 


   
Correo Electrónico:
  
                        
   

  

   
Contraseña:
  

   

  

   

                    
      
     
   
  

Por medio de Jquery vamos a controlar el evento click del botón enviar para que realice una petición ajax a un servlet de java (ingreso.do).
Esta petición va a ser de tipo POST y se enviará todo el formulario frm1 serializado.

Este código debe ir entre las etiquetas -script- en el head de la página.

$(document).ready(function (){
$('#enviar').click(function(){   
$('#enviar').css("display", "none");
$("#loadgif").show();
$.ajax({
   type : "POST",
   url  : "/servlet/ingreso.do",
   data : $("#frm1").serialize(),
   error : function(jqXHR, textStatus, errorThrown) {
     //*Ocurrió un eror en la petición ajax
     $("#loadgif").hide();
     $('#enviar').css("display", "block");
   },
   success : function(data){   
     //*se ejecuta después de realizarse la petición ajax
     //*la variable data contiene el html resultante.
     $("#loadgif").hide();
     $('#enviar').css("display", "block");
     alert(data);
  }                                                                
});        
});
}); 

El código anterior genera una petición ajax y para evitar que el usuario de click varias veces en el mismo botón, oculto el botón enviar durante la ejecución del ajax y en la función de error o success lo vuelvo a mostrar.
Mientras no se muestra el botón se muestra una imagen gif para que de la sensación al usuario que se está realizando algo.

En el servlet ingreso.do se recibe normalmente los parametros por Post y luego el html resultante es devuelto en la variable data de success.

String user_nick = request.getParameter("user");
String pass_nick = request.getParameter("clave");
out.println("Ok datos recibidos.");

en esta ocasión se mostrará el texto "ok datos recibidos.", pero se puede devolver todo un html complejo, se puede utilizar una página jsp en lugar de un servlet para recibir los datos, e incluso se puede redireccionar a otra url con document.location.href= data; donde data es la url recibida como parámetro en la función success del ajax.

Descargar Código de ejemplo: http://adf.ly/jMpNR
Este es el link con la documentación oficial de Jquery Ajax : https://api.jquery.com/jQuery.ajax/