Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Attach Function Before AJAX Request Using jQuery
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>
2K+ Views
