Ajax, petición http asincrona

Implementar AJAX en tu web

Ajax es la tecnología que permite recibir respuestas del servidor sin necesidad de recargar la página. Esta tecnología ya viene integrada en JavaScript mediante el objeto XMLHttpRequest, pero lo más habitual es usar jQuery como framework de trabajo, ya que permite realizar peticiones Ajax con pocas líneas de código.

Tomando JQuery como punto de partida, la implementación de Ajax se puede realizar de 2 formas distintas, dependiendo de como se hayan enviado los datos al servidor:

  • GET – Solicita datos de un recurso especificado
  • POST – Hace lo mismo que GET pero las variables enviadas al servidor están ocultas. Además tiene otras características.

Método JQuery $.get()

El método $.get() solicita datos del servidor mediante solicitudes HTTP GET

Sintaxis:

$.get(URL,callback);

Método JQuery $.post()

El método $.post() recupera datos del servidor usando el formato de solicitud HTTP POST

Sintaxis:

$.post(URL,data,callback)

Existe un tercer método, que es mi favorito por ser el más completo y el más versátil.

Método JQuery $.ajax()

El método $.ajax() permite realizar consultas HTTP asíncronas al servidor y es una versión extendida de los dos métodos anteriores.

Sintaxis:

$.ajax({name:value, name:value, …})

Para entender como funciona este método, fijémonos en el siguiente ejemplo, donde se usan los parámetros más habituales:

	  $.ajax({
	  	url: "./backend.php", 
	  	data:{querybtn:"get list"},
	  	type:"POST",
	  	datatype: "json",
	  	beforeSend: function(){
	     $("#estado").show();
	     let mensaje="Procesando lista...";
	     $("#estado").html(mensaje);
	     myInterval=setInterval(function () {
	     	mensaje=mensaje+".";
	     	$("#estado").html(mensaje)
	     }, 1000);
	     //Desactivamos el botón para evitar que el usuario sobrecargue el servidor con solicitudes
	     $('#att_buttonid').prop("disabled",true);
	   },
	   
	  	success: function(result){
	  		clearInterval(myInterval);
	  		
	     $("#estado").html("");
	    $("#estado").html("Consulta finalizada");
        //Volvemos a activar el botón que previamente desactivamos.
        $('#att_buttonid').prop("disabled",false);
	    //$("#estado").html(result);
	    console.log( result );

	   	createExcelFromJSON(result);
		
	    },
		error: function (request, status, error) {
	        //alert(request.responseText);
	        console.log(request.responseText);
	    }
	});

Para entender el código de arriba, dividamos el código en 2 partes:

  • Declaración de variables. Al principio del script se indica el tipo y formato de los agentes que intervienen en la solicitud:
    • URL: Aquí pasamos la url del servidor que contendrá el script escrito en PHP responsable de procesar nuestra solicitud. La ruta puede ser absoluta o relativa. En el ejemplo se ha pasado una ruta relativa.
    • data: Este es un objeto que contiene las variables que pasamos al script del servidor.
    • type: Este parámetro define la forma en como enviamos el objeto data. Si como POST o GET
    • datatype: Este parámetro define la forma en como el servidor devolverá los datos. En el ejemplo, se espera que el servidor devuelva un objeto Json.
  • Tratamiento de los datos. Son las funciones que formatearán los datos de entrada y salida y por tanto, la ejecución de estas funciones, por lo general, llevará un orden:
    • beforeSend: () => {} Esta función es ideal para mostrar preloaders. Por ejemplo, podemos mostrar un gift animado o aplicar una animación css que indique al usuario que la aplicación está funcionando y a la espera de mostrar resultados.
    • success: (param) => {} Esta función es la que procesa el valor devuelto por el servidor. En el ejemplo se devuelve un objeto Json, que se lee como param[‘prop1’][‘prop2’][‘prop3’] o param.prop1. El tratamiento que hagamos sobre este objeto es lo que aparecerá en nuestra página y se realizará en este apartado.
    • error: (request, status, error) => {console.log(request.responseText)}. En realidad esta función la suelo copiar siempre y es muy util para identificar el tipo de error y averiguar por qué no funciona nuestra petición ajax.

Deja un comentario

Tu dirección de correo electrónico no será publicada.