Métodos ajaxStart y ajaxStop en jQuery

Estos dos métodos se pueden asociar a un objeto de tipo jQuery, tienen como parámetro una función, la función de ajaxStart() se dispara cuando se inicia la petición al servidor y nos puede servir para mostrar en pantalla al usuario que están llegando datos del servidor y la ajaxStop() se dispara esta función cuando finalizar la petición de datos al servidor.

Método ajaxStart ()

El método ajaxStart () especifica una función que se ejecutará cuando se inicie una solicitud AJAX.
Nota: A partir de la versión 1.8 de jQuery, este método solo debe adjuntarse al documento.

Sintaxis

$(document).ajaxStart(function())

function()Necesario. Especifica la función que se ejecutará cuando se inicie la solicitud AJAX

Ejemplo: Este ejemplo cambia el contenido del elemento <h1> tomando los datos del servidor. Cuando se inicia la solicitud, la página dice que se inició la solicitud AJAX .

<!DOCTYPE html> 
<html> 
<head> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> </script> 
<script> 
$(document).ready(function() { 
            $(document).ajaxStart(function() {        
                       alert("El requerimiento AJAX ha comenzado"); 
            }); 
          $("button").click(function() {
           $("#paragraph").load("demo26.txt");  });   }); 
</script>
<style> 
body { text-align: center;   } 
</style> 
</head> 
<body> 
   <div id="div_content">          
    <p id="paragraph"  style="font-size: 20px;"> Contenido a reemplazar al apretar el boton </p> 
</div><button>Cambiar contanido</button> 
</body>
</html>

Ver ejemplo anterior

Método ajaxStop()

El método ajaxStop () especifica una función que se ejecutará cuando TODAS las solicitudes AJAX se hayan completado.

Cuando se completa una solicitud AJAX, jQuery verifica si hay más solicitudes AJAX. La función especificada con el método ajaxStop () se ejecutará si no hay otras solicitudes pendientes.

Nota: A partir de la versión 1.8 de jQuery, este método solo debe adjuntarse al documento.

Sintaxis

$(document).ajaxStop(function())

function()Necesario. Especifica la función que se ejecutará cuando se inicie la solicitud AJAX

Ejemplo: Este ejemplo cambia el contenido del elemento <h1> tomando los datos del servidor. Cuando se termina la solicitud, la página dice que se finalizo la solicitud AJAX .

<!DOCTYPE html> 
<html> 
<head> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> </script> 
<script> 
$(document).ready(function() { 
            $(document).ajaxStop(function() {        
                       alert("El requerimiento AJAX ha finalizado"); 
            }); 
          $("button").click(function() {
           $("#paragraph").load("demo26.txt");  });   }); 
</script>
<style> 
body { text-align: center;   } 
</style> 
</head> 
<body> 
   <div id="div_content">          
    <p id="paragraph"  style="font-size: 20px;"> Contenido a reemplazar al apretar el boton </p> 
</div><button>Cambiar contenido</button> 
</body>
</html>

Ver ejemplo anterior

(adsbygoogle = window.adsbygoogle || []).push({});

Métodos ajaxStart y ajaxStop en jQuery

Método ajaxStart ()

Método ajaxStop()