Open In App

What are the types of post back in AJAX ?

Improve
Improve
Like Article
Like
Save
Share
Report

Post Back in Ajax is the process of requesting information from the server by making an Ajax Request. We can provide a JavaScript event handler on the appropriate client event of the control that should initiate postback requests. For instance, a postback request happens when we click on a button/link for submitting a form. There are two types of postbacks in AJAX:

  • Synchronous Postback
  • Asynchronous Postback

Synchronous Postback: The code would wait around on the server when the request was made and not continue until a response was received. By setting the value for async as false in the AJAX request, then the Synchronous Postback method will be used to get the response and you can’t send another request without getting the response from the server.

Syntax: The following code is the syntax for the Synchronous JQuery Ajax postback:

// JQuery Ajax Synchronous Postback:
$.ajax({
    url: "/path",
    type: "POST",
    async: false,
    success: function(response) {
        // task ...
    }
});

 

where, 

  • path: It specifies from where you want to get the response.
  • type: It specifies the Method for requested data
  • async: It specifies synchronous Ajax Call

We will understand the above concept by creating the directory ‘ajaxpostbacks,’ which contains 2 PHP files, i.e. index.php, & update.php.  

Example 1: In this example, we are requesting the data from the update.php file through the index.php file by making a synchronous postback request:

  • Index.php:

HTML




<!DOCTYPE html>
<html lang="en">
  
<head>
    <!-- JQuery CDN Link -->
    <script type="text/javascript" src=
      </script>
</head>
  
<body>
    <h1 style="color: green;">
        GeeksforGeeks
    </h1>
  
    <h3>Ajax Post Back</h3>
  
    <!-- Button will call ajax Request 
         when Click event will occur -->
    <button onclick="show()">
        Click Here
    </button>
  
    <script type="text/javascript">
  
        // Calling the function through onclick event
        function show() {
  
            // Synchronous Ajax Postback 
            $.ajax({
                url: "update.php",
                type: "POST",
                async: false,
                success: function (response) {
  
                    // Success function for displaying
                    alert(response); // The response in alert
                }
            })
        }        
    </script>
</body>
  
</html>


  • update.php:

PHP




<?php
    echo "GeeksforGeeks - Ajax Synchronous Postbacks";
?>


Output: From the below output, we are getting the response from the update.php by making a synchronous Ajax Request.

 

Asynchronous Postback: Users can still use the form (and even call other JavaScript methods) while the server is processing this request in the background. By setting the value for the async as true in the AJAX request, then the Asynchronous Postback method will be used to get the response.

Syntax: The following code is the syntax for the Asynchronous JQuery Ajax postback:

// JQuery Ajax Synchronous Postback:
$.ajax({
    url: "/path",
    type: "POST",
    async: true,
    success: function(response) {
        // task ...
    }
});

where,

  • path: It specifies from where you want to get the response.
  • type: It specifies the Method for requested data.
  • async: It specifies an Asynchronous Ajax Call by setting its value to true

Example 2: In this example, we are requesting the data from the update.php file through the index.php file by making an Asynchronous postback request, along with updating the Ajax Request in the previous index.php file and making async as true.

  • Index.php:

HTML




<!DOCTYPE html>
<html lang="en">
  
<head>
    <title>Types of post back in AJAX</title>
  
        <!-- JQuery CDN Link -->
    <script type="text/javascript" src=
    </script>
</head>
  
<body>
    <h1 style="color: green;">
        GeeksforGeeks
    </h1>
    <h3>Ajax Post Back</h3>
  
    <!-- Button will call ajax Request 
        when Click event will occur -->
    <button onclick="show()">Click Here</button>
  
    <script type="text/javascript">
        function show() {
  
            $.ajax({
                url: "update.php",
                type: "POST",
                async: true,  // Asynchronous Ajax Call
                success: function (response) {
                    alert(response);
                }
            })
            alert("GeeksforGeeks");
        }
    </script>
</body>
  
</html>


  • update.php:

PHP




<?php
    echo "GeeksforGeeks - Ajax Asynchronous Postbacks";
?>


Output: From the below output, we can see the ajax request is made to the server but it executed the next line of code without getting a response. The Response is coming after executing the next instruction.

 

Note: By default async is true, the process will be continuing in jQuery ajax without waiting for a request. If the async is set to false, then it means it will not go to the next step until the response will come. 

Difference between Synchronous Postback & Asynchronous Postback:

Asynchronous Postback

Synchronous Postback

An asynchronous postback only renders the relevant portion of the page.

The synchronous postback renders the complete page for any postback.

When two buttons are performing asynchronous postback, only one postback is executed at a time.

In contrast, Synchronous postback does all of the operations simultaneously.

When a postback is raised asynchronously, only the update panel is changed

When it is raised synchronously, the entire page is changed



Last Updated : 28 Dec, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads