AJAX Introduction

AJAX, short for Asynchronous JavaScript and XML, is a technique used in web development to make asynchronous requests to a server and update parts of a web page without requiring a full page reload or refresh. It involves a combination of browser APIs and technologies, including the XMLHttpRequest object and JavaScript with the HTML DOM.

Here's a breakdown of AJAX:

XMLHttpRequest: AJAX utilizes the browser's built-in XMLHttpRequest object to send HTTP requests to a web server in the background. It allows the retrieval of data from the server without interfering with the user's interaction on the web page.
Asynchronous Communication: AJAX is asynchronous, meaning that the web page can continue executing code and interacting with the user while the request is being processed in the background. This asynchronous nature enables a more responsive and interactive user experience.
Update Web Page: After receiving a response from the server, AJAX enables the developer to manipulate the web page's Document Object Model (DOM) dynamically. This allows for the seamless updating of specific portions of the page without requiring a full page reload. Developers can use JavaScript to process the received data and update the HTML content, apply styling changes, or trigger other actions based on the retrieved information.
Data Exchange Format: Although AJAX initially stood for Asynchronous JavaScript and XML, it is not limited to XML data. While XML was popular in the past, modern AJAX implementations often use other data exchange formats like JSON (JavaScript Object Notation) for more efficient data transfer. JSON is lightweight, easy to parse in JavaScript, and has become the de facto standard for data interchange in AJAX applications.

Overall how AJAX Works

1. When an event occurs on a web page (the page is loaded, a button is clicked)

2. JavaScript creates an XMLHttpRequest object

3. The above XMLHttpRequest object sends a request to a web server

4. The server gets the request and processed accordingly

5. The server sends the response back to the web page(to the client)

6. The response is read by JavaScript

7. Proper action (like page update) is performed by JavaScript

Input:-

<!DOCTYPE html>

<html>

<body>

 

<h2>The Example for XMLHttpRequest Object</h2>

 

<p id="result">AJAX will change this text.</p>

 

<button type="button" onclick="loadFileContent()">Change Content</button>

 

<script>

function loadFileContent() {

  var xhttp = new XMLHttpRequest();

  xhttp.onreadystatechange = function() {

    if (this.readyState == 4 && this.status == 200) {

      document.getElementById("result").innerHTML = this.responseText;

    }

  };

  xhttp.open("GET", "ajax_content_file.txt", true);

  xhttp.send();

}

</script>

 

</body>

</html>

Test Yourself

Output (Before click):-

Output (After click):-

Help Us to Improve our content

Let's Talk

AJAX Introduction

Here's a breakdown of AJAX:

Overall how AJAX Works

Help Us to Improve our content

Important Links

Company

Others

Explore

AJAX Introduction

Here's a breakdown of AJAX:

Overall how AJAX Works

Help Us to Improve our content

Important Links

Follow us on social :

Company

Others

Explore

Subscribe to Our News Letter!

Follow us on social :