AJAX Introduction

AJAX Introduction

AJAX stands for Asynchronous JavaScript and XML.

It is not a programming language, but rather a powerful technique for accessing web servers from a webpage.

What Does AJAX Do?

AJAX allows web pages to be updated entirely asynchronously.

This means you can exchange data with a web server in the background, behind the scenes.

As a result, you can update parts of a web page without reloading the whole page!

How AJAX Works

When an event occurs on a webpage (like a button click), JavaScript creates an XMLHttpRequest object.

This object securely sends a request over the internet to a backend web server.

The server processes the request, creates a response, and sends the data back to the browser.

function loadData() {
  const xhttp = new XMLHttpRequest();
  
  // Define a callback function to handle the server's response
  xhttp.onload = function() {
    document.getElementById("demo").innerHTML = this.responseText;
  }
  // Send a request to a text file on the server
  xhttp.open("GET", "ajax_info.txt");
  xhttp.send();
}

SEO and Modern Alternatives

Fast-loading, highly responsive web pages are a massive ranking factor for modern search engines.

AJAX is the foundational technology that makes modern Single-Page Applications (SPAs) possible.

While the XMLHttpRequest object is the traditional way to write AJAX, modern developers often prefer the newer Fetch API.