AJAX Introduction

AJAX (Asynchronous JavaScript and XML) is a web development technique that empowers web applications to communicate with servers asynchronously. This implies that data can be exchanged between the server and the client without requiring the entire webpage to reload, enhancing the user experience.

AJAX stands for Asynchronous JavaScript and XML. It's a set of web development techniques that use JavaScript to make asynchronous requests to a web server.

Key Benefits

• Improved User Experience: Users can interact with the application seamlessly while data is being fetched or sent in the background.
• Reduced Server Load: AJAX requests only transfer the required data, minimizing bandwidth usage and improving server performance.
• Rich Interactions: AJAX enables dynamic and responsive web applications, offering features similar to desktop applications.

The Keystone of AJAX: The XMLHttpRequest Object

At the heart of AJAX lies the XMLHttpRequest object. This powerful JavaScript object is the key to making asynchronous HTTP requests. It allows JavaScript to fetch data from a server or send data to a server without interrupting the user's current activity on the webpage.

The XMLHttpRequest object supports a variety of HTTP methods like GET, POST, PUT, and DELETE, enabling versatile interactions with web servers.

To start using AJAX, you need to create an instance of the XMLHttpRequest object:

var xhr = new XMLHttpRequest();

Define a Callback Function

A callback function is the heart of AJAX. It is a function that is executed when the server responds to your request. It processes the received data and determines what actions to take based on the server's response.

Example: 

xhr.onload = function() { 
      if (xhr.status >= 200 && xhr.status < 300) { 
        console.log('Response:', xhr.responseText); // Handle successful response 
      } else { 
        console.error('Request failed with status:', xhr.status); // Handle errors 
      } 
    };

To configure the request, you use the open() method:

Syntax: 

xhr.open(method, url, async);

• method: The HTTP method (e.g., "GET", "POST").
• url: The URL of the server endpoint to send the request to.
• async: A boolean indicating whether the request should be asynchronous. The default is true, meaning the request will be sent in the background without blocking the user's interaction.

Send a Request to a Server

Once you've configured the request using the open() method, you can send it using the send() method.

xhr.send();

Example of Sending a GET Request

xhr.open('GET', 'https://jsonplaceholder.typicode.com/posts', true); 
    xhr.send();

AJAX - Server Response

Properties of the XMLHttpRequest Object

• xhr.status: Returns the HTTP status code of the response. For example, a successful response will have a status code of 200.
• xhr.responseText: Contains the text of the response returned from the server.
• xhr.readyState: Indicates the current state of the request. It takes on the following values:
  • 0: UNSENT
  • 1: OPENED
  • 2: HEADERS_RECEIVED
  • 3: LOADING
  • 4: DONE

• xhr.abort(): Cancels the request if it is still pending.
• xhr.getResponseHeader(headerName): Returns the value of a specified response header.
• xhr.getAllResponseHeaders(): Returns all response headers as a string.

AJAX Database

AJAX can interact with databases through server-side scripts (such as PHP, Node.js, or Python). These scripts act as intermediaries, handling the communication between your JavaScript code and the database. AJAX can fetch data from a database or send data to be updated or inserted into the database.

This capability allows you to create dynamic applications that can display real-time data updates from a database without refreshing the entire page. For example, you could build a real-time chat application, a news feed, or a social media platform.

AJAX Application

• Single Page Applications (SPAs): AJAX is a core component of SPAs, allowing you to load content dynamically without requiring a full page reload. This creates a smooth and seamless user experience.
• Form Submissions: AJAX can submit forms asynchronously, meaning the user can continue interacting with the page while the form data is sent to the server. This results in a faster response and a better user experience.
• Live Search: AJAX powers live search features, enabling instant results as the user types in a search box. This significantly improves search performance and makes the process more intuitive.

AJAX Example

Complete Example of Making an AJAX Call

// Create XMLHttpRequest object
    var xhr = new XMLHttpRequest();
    
    // Define callback function
    xhr.onload = function() { 
      if (xhr.status >= 200 && xhr.status < 300) { 
        var data = JSON.parse(xhr.responseText); // Parse the JSON response
        console.log(data); // Handle the server response
      } else { 
        console.error('Request failed with status:', xhr.status); 
      } 
    };
    
    // Open the request
    xhr.open('GET', 'https://jsonplaceholder.typicode.com/posts', true);
    
    // Send the request
    xhr.send();

Summary

• AJAX is a powerful technique for building dynamic and responsive web applications.
• The XMLHttpRequest object is the core component of AJAX, enabling asynchronous communication with servers.
• AJAX offers significant benefits, including improved user experience, reduced server load, and rich interactions.
• Error handling and CORS considerations are important when working with AJAX.