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 register a handler to be called when the Ajax request begins using jQuery?
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>
425 Views
