Updated March 30, 2023
Definition of jQuery Ajax synchronous
JQuery Ajax synchronous is an operating procedure to stop the process and wait for the server to send a reply for the continuing procedure. This process works using API synchronous calls. The procedure or call sends the request to the server for the operation synchronously.
It is an attribute or property of the JQuery Ajax technology for the system. This function sets Ajax to sever requests in synchronous format for handling multiple request operations. It sets using the “async” property and the “false” default value in the Ajax function. This function requires for URL or server for sending a request using jQuery technology.
What is jQuery Ajax Synchronous?
- It is a mode of the web application page using jQuery and Ajax technology for server or HTTP requests.
- JQuery Ajax is setting server requests asynchronously by default to handle multiple operations at a time.
- It is a setting using Ajax property and its default value in the script tag.
- JQuery Ajax provides a function or flag for setting HTTP requests synchronously for systematic operation.
- It is a stop request until the server sends execution completed request.
- It sends the HTTP or URL request after completion of the previous request and it works one by one operation.
How to make JQuery AJAX request synchronous?
- The jQuery ajax asynchronous syntax shows below.
async : false,- The “async” property uses in the ajax function.
- The “false” value sets for the synchronous function.
- Use jQuery link or online file in the head tag of the html file.
<script src = "https://ajax.googleapis.com/ajax/libs/jQuery/3.5.1/jQuery.min.js">
</script>- Create script tag.
<script> write code here… </script>- Use jQuery functions and methods for the Ajax synchronous.
$(document).ready(function(){ write code here… }- Use Ajax function for url for getting request of the link.
$.ajax({url: "sync_test.txt"
});- Use synchronous method for systematic operation.
$.ajax({url: "sync_test.txt", method: 'get', async: false,
});- Write success function for display output
$(document).ready(function(){
$("button").click(function(){
$.ajax({url: "sync_test.txt", async: false,
success: function(result){ $("#divisions").html(result);
}});
});
});- If you want to create user interface tags then use buttons and forms.
<div id = "divisions">Write or display server data here…
</div>
<button> click here... </button>Create jQuery Ajax synchronous
- Use jQuery source link in the script tag of the head part of a file.
<script src = "https://ajax.googleapis.com/ajax/libs/jQuery/3.5.1/jQuery.min.js">
</script>- Create script tag and with the other methods.
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jQuery/3.5.1/jQuery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$.ajax({url: "demo_test.txt", method: 'get',
async: false,
success: function(result){ $("#divisions").html(result);
}});
});
});
</script>
</head>Description
-
- The jQuery function uses to contain Ajax function and other events.
- The ajax function contains url, async and success functions.
- Create url link with the attribute and information
- Use jQuery ajax synchronous request using the “async” attribute and the “false” value.
- The success function displays or explores link data or event information.
- Use div tag to display data and create button for the click function.
<body>
<div id = "divisions">
<h3>Let jQuery AJAX Change synchronous
</h3>
</div>
<button> click here... </button>
</body>Description
-
- Create the div tag for containing information and displaying required data.
- The button tag creates for using clicking event using jQuery AJAX.
Examples
Example #1
The basic example and its output
<!DOCTYPE>
<html>
<head>
<script src = "https://ajax.googleapis.com/ajax/libs/jQuery/3.5.1/jQuery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$.ajax({ url: "demo_test.txt", method: 'get',
async: false,
success: function(result){ $("#divisions").html(result);
}});
});
});
</script>
</head>
<body>
<div id = "divisions">
<h3>
jQuery AJAX synchronous example
</h3>
</div>
<button> click here... </button>
</body>
</html>Output before clicking
Output after clicking the button
Example #2
Alert method example and output shows below
<!DOCTYPE>
<html>
<head>
<script src = "https://ajax.googleapis.com/ajax/libs/jQuery/3.5.1/jQuery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$.ajax({ url: "sync_test.txt", method: 'get',
async: false,
success: function(result){ alert("jQuery AJAX synchronous done successfully!");
}});
});
});
</script>
</head>
<body>
<div id = "divisions">
<h3>
jQuery AJAX synchronous
</h3>
</div>
<button> click here... </button>
</body>
</html>Output before clicking button
Output after clicking the button
Example #3
Alert method example and output shows below.
<!DOCTYPE>
<html>
<head>
<script src = "https://ajax.googleapis.com/ajax/libs/jQuery/3.5.1/jQuery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$.ajax({ url: "sync_test.txt", method: 'get',
async: false,
success: function(result){ document.write("jQuery AJAX synchronous done successfully!");
}});
});
});
</script>
</head>
<body>
<div id = "divisions">
<h3>
jQuery AJAX synchronous
</h3>
</div>
<button> click here... </button>
</body>
</html>Output before clicking button
Output after clicking the button
Example #4
Wrong URL request example and output shows below
<!DOCTYPE>
<html>
<head>
<script src = "https://ajax.googleapis.com/ajax/libs/jQuery/3.5.1/jQuery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$.ajax({
url: "/app-url/relative-url", type: "GET",
async: false,
dataType: 'json',
})
.done (function(data, textStatus, jqXHR) { alert("jQuery AJAX synchronous done successfully!" );
})
.fail (function(jqXHR, textStatus, errorThrown) { alert("jQuery AJAX synchronous shows error!");
})
.always (function(jqXHROrData, textStatus, jqXHROrErrorThrown) {
alert("jQuery AJAX synchronous complete");
});
});
});
</script>
</head>
<body>
<div id = "divisions">
<h3>
jQuery AJAX synchronous
</h3>
</div>
<button> click here... </button>
</body>
</html>Output before clicking the button
Output after clicking the button
Output after clicking OK button
Example #5
Right URL request example and output shows below
<!DOCTYPE>
<html>
<head>
<script src = "https://ajax.googleapis.com/ajax/libs/jQuery/3.5.1/jQuery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$.ajax({
url: "sync_test.txt",
async: false,
})
.done (function(data, textStatus, jqXHR) { alert("jQuery AJAX synchronous done successfully!" );
})
.fail (function(jqXHR, textStatus, errorThrown) { alert("jQuery AJAX synchronous shows error!");
})
.always (function(jqXHROrData, textStatus, jqXHROrErrorThrown) {
alert("jQuery AJAX synchronous complete");
});
});
});
</script>
</head>
<body>
<div id = "divisions">
<h3>
jQuery AJAX synchronous
</h3>
</div>
<button> click here... </button>
</body>
</html>Output before clicking the button
Output after clicking the button
Output after clicking OK button
Conclusion
This function is used to get systematic and elegant server requests and their responses. This method creates easy, simple, and fast web applications with complicated data servers. It creates user-friendly, user-interactive, and attractive web application pages. This operation sends server requests with minimum code and uses easy functions.
Recommended Articles
This is a guide to jQuery Ajax synchronous. Here we discuss the Definition, What is jQuery Ajax Synchronous, How to make JQuery AJAX request synchronous? You may also have a look at the following articles to learn more –
