How to attach a function to be executed before an Ajax request is sent using jQuery?

Front End TechnologyjQueryWeb Development

In this tutorial, we will learn How to attach a function to be executed before an Ajax request is sent 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 ajaxSend() function of jQuery. This event is called by jQuery whenever an ajax request is to be made.

Syntax

Use the following syntax to register a handler before an ajax request −

$(document).ajaxSend(function () {
   console.log('Triggered ajaxStart. Started Request')
})

We have an Ajax request. Before sending the request, the ajax trigger the ajaxSend() event. We can add the required pieces of code here. Then the request is made.

Note − The ajaxStart() function must always be attached to the document.

Example 1

In the following example, we print the result on the screen to show that the request has been initiated with the help of ajaxSend() function.

<!DOCTYPE html>
<html>
<head>
   <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
   <title>TutorialsPoint | jQuery</title>
   <style></style>
</head>
<body>
   <center>
      <h1>jQuery ajaxSend() Method</h1>
      <strong>Attach a function to be executed before an Ajax request is sent.</strong>
      <br />
      <br />
      <button id="loadBtn">Load page</button>
      <div id="loaded"></div>
      <div id="complete"></div>
   </center>
   <script>
      $(document).ajaxSend(function () {
         console.log('Triggered ajaxStart. Started Request')
         $('#loaded').text('Triggered ajaxStart. Started request.')
      })
      $(document).ajaxStop(function () {
         $('#complete').text('Request Complete')
         $('.loader').hide()
      })
      $('#loadBtn').click(function () {
         $(document).load('https://www.tutorialspoint.com/javascript/index.htm')
      })
   </script>
</body>
</html>

Example 2

In the following example, we have a loading screen on the webpage that is controlled using the ajaxSend() event.

<!DOCTYPE html>
<html>
<head>
   <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
   <title>TutorialsPoint | jQuery</title>
   <style>
      .loader {
         border: 12px solid #f3f3f3; /* Light grey */
         border-top: 12px solid #3498db; /* Blue */
         border-radius: 50%;
         width: 60px;
         height: 60px;
         animation: spin 1s linear infinite;
      }
      @keyframes spin {
         0% {
            transform: rotate(0deg);
         }
         100% {
            transform: rotate(360deg);
         }
      }
   </style>
</head>
<body>
   <center>
      <h1>jQuery ajaxSend() Method</h1>
      <strong>Attach a function to be executed before an Ajax request is sent.</strong>
      <br />
      <br />
      <button id="loadBtn">Load ajax</button>
      <div class="loader"></div>
      <div id="loaded"></div>
      <div id="complete"></div>
   </center>
   <script>
      $('.loader').hide()
      $(document).ajaxSend(function () {
         console.log('Triggered ajaxStart. Started Request')
         $('#loaded').text('Triggered ajaxStart. Started request.')
         $('.loader').show()
      })
      $(document).ajaxStop(function () {
         $('#complete').text('Request Complete')
         $('.loader').hide()
      })
      $('#loadBtn').click(function () {
         $(document).load('https://www.tutorialspoint.com/javascript/index.htm')
      })
   </script>
</body>
</html>
raja
Updated on 20-Jul-2022 09:29:30

Advertisements