How to register a handler to be called when the Ajax request begins using jQuery?

Front End Technology jQuery Web Development

jQuery is a feature-rich JavaScript library. We can perform a lot of actions with the help of jQuery which would otherwise require writing large pieces of code. It makes DOM manipulation, event handling, animation, ajax, etc. very easy.

In this tutorial, we will learn how to register a handler to be called when the first Ajax request begins using jQuery. Ajax requests are typically HTTP requests that are called by the browser for different tasks such as GET, POST, etc. So when the tasks are performed, we can register a handler using the ajaxStart() function of jQuery. This function is always triggered when the request is to be made or it can be said when the request will start. It registers the handler when the request starts.

Syntax

Use the following syntax to register a handler after every ajax request −

$(document).ajaxStart(function () {
   console.log('Registered handler.')
})

Example 1

In the following example, we show the message when the ajax request begins using the ajaxStart() function.

<!DOCTYPE html>
<html>
<head>
   <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
   <title>TutorialsPoint | jQuery</title>
</head>
<body>
   <center>
      <h1>jQuery ajaxStart() Method</h1>
      <strong>Register a handler to be called when the first Ajax request begins.</strong>
      <br />
      <br />
      <button id="loadBtn">Load page</button>
      <div id="tutorials"></div>
      <div id="loaded"></div>
   </center>
   <script>
      $(document).ajaxStart(function () {
         $('#loaded').text('The AJAX request have been started.')
      })
      $('#loadBtn').click(function () {
         $('#tutorials').load('https://www.tutorialspoint.com/index.htm')
      })
   </script>
</body>
</html>

Example 2

In the following example, we have a loading screen above the webpage that is removed when the request is started.

<!DOCTYPE html>
<html>
<head>
   <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
   <title>TutorialsPoint | jQuery</title>
   <style>
      .loader {
         border: 16px solid #f3f3f3; /* Light grey */
         border-top: 16px solid #3498db; /* Blue */
         border-radius: 50%;
         width: 120px;
         height: 120px;
         animation: spin 2s linear infinite;
      }
      @keyframes spin {
         0% {
            transform: rotate(0deg);
         }
         100% {
            transform: rotate(360deg);
         }
      }
   </style>
</head>
<body>
   <center>
      <h1>jQuery ajaxStart() Method</h1>
      <strong>Register a handler to be called when the first Ajax requestBegins.</strong>
      <br />
      <br />
      <button id="loadBtn">Load page</button>
      <div class="loader"></div>
      <div id="loaded"></div>
   </center>
   <script>
      $('.loader').hide()
      $(document).ajaxStart(function () {
         $('#loaded').text('The AJAX request have started.')
         $('.loader').hide()
      })
      $('#loadBtn').click(function () {
         $('.loader').show()
         $(document).load('https://www.tutorialspoint.com/javascript/index.htm')
      })
   </script>
</body>
</html>