Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to attach a function to be executed before an Ajax request is sent 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>
1K+ Views
