What is AJAX Synchronous and Asynchronous?

AJAX (Asynchronous JavaScript and XML) allows web pages to update dynamically by exchanging data with a web server in the background. There are two primary ways AJAX can be used: Synchronous (Sync) and Asynchronous (Async).

Synchronous (Sync) AJAX: Blocks the execution of code until the request is completed.
Asynchronous (Async) AJAX: Allows the execution of other code while waiting for the request to complete.

🔄 Difference Between AJAX Synchronous and Asynchronous

Feature	AJAX Sync	AJAX Async
Execution Flow	Blocks the program until completion	Allows other code to run while waiting for the request
User Experience	Can make the UI unresponsive	Keeps the UI responsive and smooth
Default Behavior	Default for XMLHttpRequest	Default for Fetch API
Performance Impact	May result in slower user experience	Faster and better for real-time apps

🧪 Example of AJAX Synchronous (Sync) Request

<!DOCTYPE html>
<html>
<head>
  <title>AJAX Sync Example</title>
</head>
<body>
  <h2>AJAX Synchronous Request Example</h2>
  <button onclick="loadDataSync()">Load Data Sync</button>
  <div id="result"></div>

  <script>
    function loadDataSync() {
      const xhr = new XMLHttpRequest();
      xhr.open("GET", "https://jsonplaceholder.typicode.com/posts/1", false);  // 'false' makes it synchronous

      xhr.onload = function() {
        if (xhr.status === 200) {
          const data = JSON.parse(xhr.responseText);
          document.getElementById("result").innerHTML = `
            <h3>${data.title}</h3>
            <p>${data.body}</p>
          `;
        }
      };

      xhr.send();  // Blocks code execution here until the response is received
    }
  </script>
</body>
</html>

Explanation of AJAX Sync:

Synchronous request: The xhr.open method uses the third parameter as false, making the request synchronous. This means the code execution will pause until the request is completed.
Blocking Behavior: While waiting for the server response, other JavaScript code will not run, leading to a potentially frozen UI.

🧪 Example of AJAX Asynchronous (Async) Request

<!DOCTYPE html>
<html>
<head>
  <title>AJAX Async Example</title>
</head>
<body>
  <h2>AJAX Asynchronous Request Example</h2>
  <button onclick="loadDataAsync()">Load Data Async</button>
  <div id="result"></div>

  <script>
    function loadDataAsync() {
      const xhr = new XMLHttpRequest();
      xhr.open("GET", "https://jsonplaceholder.typicode.com/posts/1", true);  // 'true' makes it asynchronous

      xhr.onload = function() {
        if (xhr.status === 200) {
          const data = JSON.parse(xhr.responseText);
          document.getElementById("result").innerHTML = `
            <h3>${data.title}</h3>
            <p>${data.body}</p>
          `;
        }
      };

      xhr.send();  // Non-blocking behavior, allowing code execution to continue
    }
  </script>
</body>
</html>

Explanation of AJAX Async:

Asynchronous request: The xhr.open method uses the third parameter as true, making the request asynchronous.
Non-blocking Behavior: While waiting for the server response, other code can continue executing, ensuring that the UI remains responsive.

📝 Conclusion on AJAX synchronous and asynchronous

AJAX synchronous and asynchronous refers to whether an AJAX request blocks code execution (Sync) or allows it to continue (Async) while waiting for the response.
Synchronous requests should be used with caution as they can freeze the user interface.
Asynchronous requests are preferred in modern web development because they provide a smoother, more responsive user experience.

At Online Learner, we're on a mission to ignite a passion for learning and empower individuals to reach their full potential. Founded by a team of dedicated educators and industry experts, our platform is designed to provide accessible and engaging educational resources for learners of all ages and backgrounds.

Disclaimer About Us