EDUCBA

Home Software Development Software Development Tutorials jQuery Tutorial jQuery Ajax async

jQuery Ajax async

Updated April 6, 2023

jQuery Ajax async

 

 

Introduction to jQuery Ajax async

The jQuery Ajax async is handling Asynchronous HTTP requests in the element. It is a procedure to send a request to the server without interruption. It is an Asynchronous method to send HTTP requests without waiting response. It is a function to working on a server without associating more than on request. It is sending a request to the server using HTTP but does not need any server’s response. It is a Boolean condition to decide more than one request’s complete or not. It is a parameter working inside of the ajax() method. It is working on the asynchronous HTTP request.

Start Your Free Software Development Course

Web development, programming languages, Software testing & others

Syntax of jQuery Ajax async

Given below is the syntax mentioned:

The jQuery Ajax async is using the ajax method.

$.ajax( { url , parameter : value })

The ajax method can use the only parameter.

$.ajax( { parameter : value, parameter : value })

It is using for Boolean condition.

  • Becomes true
async: true
  • Becomes false
async: false

A parameter is using inside of the method.

$.ajax( { url : "link", async : true})

Or

$.ajax( { url : "link", async : false })

Explanation of syntax:

  • The url is using to send HTTP server request.
  • The async is a parameter to work on more than one request.

The jQuery Ajax async syntax is below.

$(document).ready (function () {
$("selector").click (function (){
$.ajax( { url : "link", async : false, success: function (output)
{
$(selector).html (output)
}});
});
});

Explanation of syntax:

  • The ajax method is using to contain URL requests and parameters.
  • A parameter is using inside of the jQuery function.

How does Ajax async Function Work in jQuery?

The HTML page is created through filename with .html extension.

Example:

Code:

jQueryAsync.html

jQuery files placing inside of the jQueryAsync.html file in the body section.

The link needs to either download the jQuery library or use the jQuery CDN version link.

  • Download the latest development version or product version of jQuery from jQuery.com.
  • The user can use offline jQuery in the web application through the jQuery library.
  • The jQuery version place inside of the HTML page.

The jQuery link is below:

<script src = "https://ajax.googleapis.com/ajax/libs/jQuery/3.5.1/jQuery.min.js">
</script>
  • The user can use online jQuery in the web application through the jQuery CDN version link.
  • The <script> tag is placing inside of the body section on the HTML page.
<script> write a jQuery Ajax async code here… </script>
<script>
$(document).ready(function(){
$("#async").click(function(){
$.ajax({url: "https://www.w3schools.com/jQuery/ajax_ajax.asp", async: true, success: function(output){
$("p").html(output);
}});
});
});
</script>

Use of syntax in the jQuery script tag.

  • Becomes true
async: true,

The “async: true” is send HTTP requests without waiting for another server’s request completion.

  • Becomes false
async: false,

The “async: true” is sending an HTTP request while waiting to complete other server requests.

Write an HTML code in the body section of the web page.

<body>
<div id = "ajax">
<h3> JQuery AJAX Async example </h3>
</div>
<input type = "button" value = "jQuery Ajax async" id = "async" />
</body>

Combine the working procedure of the function.

<!DOCTYPE html>
<html>
<head>
<title> Ajax async example copy </title>
<script src = "https://ajax.googleapis.com/ajax/libs/jQuery/3.5.1/jQuery.min.js">
</script>
<script>
$(document).ready(function(){
$("#async").click(function(){
$.ajax({url : "jQuery.txt",
async: true,
success : function(output)
{
$("#div").html(output);
}
});
});
});
</script>
</head>
<body>
<div id = "ajax">
<h3> JQuery AJAX Async example </h3>
</div>
<input type = "button" value = "jQuery Ajax async" id = "async" />
</body>
</html>

Examples of jQuery Ajax async

Given below are the examples mentioned:

Example #1

A true example is below.

Code:

<!DOCTYPE html>
<html>
<head>
<meta content = "text/html; charset = utf-8" http-equiv = "Content-Type">
<meta content = "utf-8" http-equiv = "encoding">
<title> Ajax async example copy </title>
<script src = "https://ajax.googleapis.com/ajax/libs/jQuery/3.5.1/jQuery.min.js">
</script>
<script>
$(document).ready (function () {
$("#async").click (function () {
$.ajax({ url : "jQuery.txt",
async: true,
success: function (output){
$("#ajax").html (output);
}
});
});
});
</script>
</head>
<body>
<h3> JQuery AJAX Async example </h3>
<div id = "ajax">
</div>
<input type = "button" value = "jQuery Ajax async" id = "async" />
</body>
</html>

Output:

Before button click:

jQuery Ajax async 1

After button click:

jQuery Ajax async 2

Example #2

A false example is below.

Code:

<!DOCTYPE html>
<html>
<head>
<meta content = "text/html; charset = utf-8" http-equiv = "Content-Type">
<meta content = "utf-8" http-equiv = "encoding">
<title> AJax async example copy </title>
<script src = "https://ajax.googleapis.com/ajax/libs/jQuery/3.5.1/jQuery.min.js">
</script>
<script>
$(document).ready (function (){
$("#async").click (function (){
$.ajax({url : "jQuery.txt",
async: false,
success: function (output){
$("#ajax").html (output);
}
});
});
});
</script>
</head>
<body>
<h3> JQuery AJAX Async example </h3>
<div id = "ajax">
</div>
<input type = "button" value = "jQuery Ajax async" id = "async" />
</body>
</html>

Output:

Before button click:

jQuery Ajax async 3

After button click:

 After button click

Example #3

With weblink, an example is below.

Code:

<html>
<head>
<meta content = "text/html; charset = utf-8" http-equiv = "Content-Type">
<meta content = "utf-8" http-equiv = "encoding">
<title> Ajax async example copy </title>
<script src="https://ajax.googleapis.com/ajax/libs/jQuery/3.5.1/jQuery.min.js">
</script>
<script>
$(document).ready (function () {
$("#async").click (function () {
$.ajax({url: "https://www.google.com",
async: true,
success: function(output){
$("#div").html (output);
}
});
});
});
</script>
</head>
<body>
<div id = "ajax">
<h3> JQuery AJAX Async for web link example </h3>
</div>
<input type = "button" value = "jQuery Ajax async" id = "async" />
</body>
</html>

Output:

with web link

Conclusion

It is providing web application interaction easy and user friendly. It is helping to get multiple web requests without interrupting the receiver. This function saves time and memory for the users and developer. It is making web applications more elegant, attractive and fast.

Recommended Articles

This is a guide to jQuery Ajax async. Here we discuss the introduction; how does the ajax async function work in jQuery? And examples, respectively. You may also have a look at the following articles to learn more –

  1. jQuery Select Option
  2. jQuery zindex
  3. jQuery width
  4. jQuery id Selector
quiz