A Complete Guide to AJAX in JavaScript

Payal PorwalPayal Porwal
11 min read

Table of contents

AJAX (Asynchronous JavaScript and XML) is a technique used in web development to send and receive data from a server asynchronously without reloading the entire web page. It improves the user experience by making web applications more dynamic and interactive.

What is AJAX?

AJAX is not a programming language; rather, it is a combination of several web technologies:

  • JavaScript – To handle AJAX requests.

  • XMLHttpRequest (XHR) or Fetch API – To send requests to a server.

  • HTML & CSS – For page structure and styling.

  • Server-side languages (like PHP, Node.js, Python, etc.) – To handle and respond to AJAX requests.

AJAX allows a web page to update only a specific part of the content instead of reloading the entire page.

How AJAX Works?

AJAX follows these basic steps:

  1. User triggers an action (like clicking a button).

  2. JavaScript creates an XMLHttpRequest (XHR) object or uses the Fetch API.

  3. The request is sent to the server asynchronously.

  4. The server processes the request and sends back a response (often in JSON or XML format).

  5. JavaScript processes the response and updates the web page dynamically.

AJAX Syntax (Using XMLHttpRequest)

Basic AJAX Request Syntax

var xhr = new XMLHttpRequest(); // Create XMLHttpRequest object
xhr.open("GET", "data.json", true); // Initialize request (GET request to "data.json")
xhr.onreadystatechange = function () {
    if (xhr.readyState == 4 && xhr.status == 200) {
        console.log(xhr.responseText); // Process response
    }
};
xhr.send(); // Send request to server

Explanation of Code:

  • XMLHttpRequest() – Creates an AJAX request object.

  • open(method, url, async) – Initializes the request (GET or POST method, target URL, and whether it's asynchronous).

  • onreadystatechange – Defines a function that executes when the request state changes.

  • readyState == 4 – Checks if the request is complete.

  • status == 200 – Ensures a successful response from the server.

  • send() – Sends the request.

AJAX Using Fetch API (Modern Approach)

fetch("data.json")
    .then(response => response.json())  // Convert response to JSON
    .then(data => console.log(data))    // Process the data
    .catch(error => console.error("Error:", error)); // Handle errors

Explanation:

  • fetch(url) – Makes a request to the specified URL.

  • .then(response => response.json()) – Parses the response as JSON.

  • .then(data => console.log(data)) – Uses the fetched data.

  • .catch(error => console.error("Error:", error)) – Catches any errors.

Real-Life Example: AJAX in Action

Example 1: Fetching Data from a Server Without Reloading the Page

Scenario: A user clicks a button to fetch and display a list of users from a JSON file.

HTML Code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AJAX Example</title>
</head>
<body>
    <button id="fetchData">Load Users</button>
    <ul id="userList"></ul>

    <script>
        document.getElementById("fetchData").addEventListener("click", function() {
            var xhr = new XMLHttpRequest();
            xhr.open("GET", "users.json", true);
            xhr.onreadystatechange = function() {
                if (xhr.readyState == 4 && xhr.status == 200) {
                    var users = JSON.parse(xhr.responseText);
                    var userList = document.getElementById("userList");
                    userList.innerHTML = "";
                    users.forEach(user => {
                        var li = document.createElement("li");
                        li.textContent = user.name + " - " + user.email;
                        userList.appendChild(li);
                    });
                }
            };
            xhr.send();
        });
    </script>
</body>
</html>

users.json (Sample JSON File):

[
    { "name": "John Doe", "email": "john@example.com" },
    { "name": "Jane Smith", "email": "jane@example.com" }
]

How It Works:

  1. Clicking the Load Users button sends an AJAX request to fetch users.json.

  2. Once the response is received, it is parsed into JavaScript objects.

  3. The list of users is displayed dynamically without refreshing the page.

Example 2: Submitting Form Data Using AJAX

Scenario: A user submits a form, and the data is sent to the server without reloading the page.

HTML Code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AJAX Form</title>
</head>
<body>
    <form id="contactForm">
        <input type="text" id="name" placeholder="Enter your name" required>
        <input type="email" id="email" placeholder="Enter your email" required>
        <button type="submit">Submit</button>
    </form>
    <p id="responseMessage"></p>

    <script>
        document.getElementById("contactForm").addEventListener("submit", function(event) {
            event.preventDefault(); // Prevent form from refreshing the page

            var name = document.getElementById("name").value;
            var email = document.getElementById("email").value;

            var xhr = new XMLHttpRequest();
            xhr.open("POST", "submit.php", true);
            xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

            xhr.onreadystatechange = function() {
                if (xhr.readyState == 4 && xhr.status == 200) {
                    document.getElementById("responseMessage").textContent = xhr.responseText;
                }
            };

            xhr.send("name=" + encodeURIComponent(name) + "&email=" + encodeURIComponent(email));
        });
    </script>
</body>
</html>

PHP (submit.php - Backend Code Example):

<?php
if ($_SERVER["REQUEST_METHOD"] == "POST") {
    $name = $_POST['name'];
    $email = $_POST['email'];
    echo "Hello, " . htmlspecialchars($name) . "! Your email (" . htmlspecialchars($email) . ") has been submitted successfully.";
}
?>

How It Works:

  1. When the form is submitted, the submit.php file receives the data.

  2. The server processes the data and returns a success message.

  3. JavaScript updates the page dynamically with the response.

Advantages of AJAX

✅ Better User Experience – No full-page reloads, making web apps faster.
✅ Asynchronous Communication – Fetches data in the background.
✅ Reduced Server Load – Only necessary data is retrieved.
✅ More Interactive Applications – Used in real-time apps like chat apps and stock price updates.

Disadvantages of AJAX

❌ SEO Limitations – Content loaded via AJAX may not be indexed by search engines.
❌ Complex Debugging – Requires handling multiple states and asynchronous responses.
❌ Security Issues – Exposing API endpoints can lead to security vulnerabilities.

Conclusion

AJAX is a powerful tool for building dynamic and interactive web applications. Whether you use the older XMLHttpRequest method or the modern Fetch API, AJAX helps in making applications faster and more user-friendly.

Would you like me to guide you through implementing AJAX in a real-world project?
If yes then see below examples ⬇️⬇️

Real-World Implementation of AJAX in a Web Project

To help you understand AJAX in a real-world scenario, let's build a Live Search Feature where users can type in a search box, and AJAX will fetch matching results from a server dynamically without reloading the page.

Project Overview: Live Search with AJAX

How It Works:

  • The user types in a search box.

  • AJAX sends the input to a PHP file on the server.

  • The server searches for matching records in a database and returns the results.

  • JavaScript dynamically updates the webpage with the search results.

Step 1: Create the HTML Frontend

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Live Search with AJAX</title>
    <style>
        body { font-family: Arial, sans-serif; }
        #searchResults { border: 1px solid #ccc; max-width: 300px; padding: 10px; }
        .result-item { padding: 5px; border-bottom: 1px solid #ddd; }
    </style>
</head>
<body>

    <h2>Live Search Example</h2>
    <input type="text" id="searchBox" placeholder="Search users...">
    <div id="searchResults"></div>

    <script>
        document.getElementById("searchBox").addEventListener("keyup", function() {
            var query = this.value;
            if (query.length > 0) {
                var xhr = new XMLHttpRequest();
                xhr.open("GET", "search.php?q=" + encodeURIComponent(query), true);
                xhr.onreadystatechange = function() {
                    if (xhr.readyState == 4 && xhr.status == 200) {
                        document.getElementById("searchResults").innerHTML = xhr.responseText;
                    }
                };
                xhr.send();
            } else {
                document.getElementById("searchResults").innerHTML = "";
            }
        });
    </script>

</body>
</html>

How It Works?

  • The user types in the input field (#searchBox).

  • JavaScript captures the text and sends an AJAX request to search.php with the input value.

  • If the user clears the search box, the results are cleared.

  • The response from search.php is displayed inside the #searchResults div.

Step 2: Create a MySQL Database and Table

Run the following SQL query to create a database and a table with sample user data:

CREATE DATABASE ajax_demo;
USE ajax_demo;

CREATE TABLE users (
    id INT AUTO_INCREMENT PRIMARY KEY,
    name VARCHAR(255) NOT NULL,
    email VARCHAR(255) NOT NULL
);

INSERT INTO users (name, email) VALUES 
('John Doe', 'john@example.com'),
('Jane Smith', 'jane@example.com'),
('Mike Johnson', 'mike@example.com'),
('Emily Brown', 'emily@example.com'),
('David Wilson', 'david@example.com');

Step 3: Create the PHP Backend (search.php)

This file receives the search query, fetches matching results from the database, and returns them as HTML.

<?php
$servername = "localhost";
$username = "root"; 
$password = ""; 
$dbname = "ajax_demo";

// Create connection
$conn = new mysqli($servername, $username, $password, $dbname);

// Check connection
if ($conn->connect_error) {
    die("Connection failed: " . $conn->connect_error);
}

// Get search query
if (isset($_GET['q'])) {
    $search = $conn->real_escape_string($_GET['q']);

    // Query the database for matching users
    $sql = "SELECT * FROM users WHERE name LIKE '%$search%' OR email LIKE '%$search%'";
    $result = $conn->query($sql);

    if ($result->num_rows > 0) {
        while ($row = $result->fetch_assoc()) {
            echo "<div class='result-item'>" . $row['name'] . " - " . $row['email'] . "</div>";
        }
    } else {
        echo "<div class='result-item'>No results found</div>";
    }
}

$conn->close();
?>

Step 4: Running the Project

1. Start a Local Server (XAMPP, WAMP, or LAMP)

  • Move the project files (index.html and search.php) inside the htdocs folder (for XAMPP).

  • Start Apache and MySQL from the XAMPP Control Panel.

2. Open the Project in the Browser

  • Go to http://localhost/ajax_demo/index.html.

  • Start typing in the search box, and you will see instant search results appear below it.

Expected Output (Live Search in Action)

Search QueryResults
"Jo"John Doe - john@example.com
"Jane"Jane Smith - jane@example.com
"m"Mike Johnson - mike@example.com, Emily Brown - emily@example.com

If no results match, it will display:
❌ "No results found"

Why is This Example Useful in the Real World?

✅ Improves User Experience – No page reloads, instant search results.
✅ Efficient Data Retrieval – Only fetches required results instead of loading everything.
✅ Can Be Used for Many Applications – Search in e-commerce sites, social media platforms, etc.

Bonus: Convert the Code to Use Fetch API Instead of XMLHttpRequest

If you prefer modern JavaScript, replace the AJAX part in index.html with this:

document.getElementById("searchBox").addEventListener("keyup", function() {
    let query = this.value;
    if (query.length > 0) {
        fetch("search.php?q=" + encodeURIComponent(query))
        .then(response => response.text())
        .then(data => {
            document.getElementById("searchResults").innerHTML = data;
        })
        .catch(error => console.error("Error:", error));
    } else {
        document.getElementById("searchResults").innerHTML = "";
    }
});

Conclusion

This project demonstrates how AJAX can be used to create a real-time live search feature. You can integrate similar functionality into your e-commerce sites, dashboards, or any web applications that require dynamic content updates.

Would you like me to suggest improvements or add a feature like pagination or search suggestions? 😊

If yes then see below examples ⬇️⬇️

Enhancements for Live Search Feature

Now that we have built a basic Live Search with AJAX, let's improve it by adding:

  1. Search Suggestions (Autocomplete Feature)

  2. Pagination for Large Datasets

1. Adding Search Suggestions (Autocomplete Feature)

Instead of displaying full search results, we will show autocomplete suggestions as the user types.

Modify the HTML (index.html)

Add a <div> to display suggestions under the search box.

<input type="text" id="searchBox" placeholder="Search users...">
<div id="suggestions" style="border: 1px solid #ccc; max-width: 300px; display: none;"></div>

Modify JavaScript for Autocomplete

document.getElementById("searchBox").addEventListener("keyup", function() {
    let query = this.value;
    if (query.length > 0) {
        fetch("suggestions.php?q=" + encodeURIComponent(query))
        .then(response => response.text())
        .then(data => {
            let suggestionsBox = document.getElementById("suggestions");
            suggestionsBox.innerHTML = data;
            suggestionsBox.style.display = "block";
        })
        .catch(error => console.error("Error:", error));
    } else {
        document.getElementById("suggestions").style.display = "none";
    }
});

// Close suggestions when clicking outside
document.addEventListener("click", function(e) {
    if (!document.getElementById("searchBox").contains(e.target)) {
        document.getElementById("suggestions").style.display = "none";
    }
});

Create a PHP File (suggestions.php)

<?php
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "ajax_demo";

$conn = new mysqli($servername, $username, $password, $dbname);
if ($conn->connect_error) {
    die("Connection failed: " . $conn->connect_error);
}

if (isset($_GET['q'])) {
    $search = $conn->real_escape_string($_GET['q']);
    $sql = "SELECT name FROM users WHERE name LIKE '%$search%' LIMIT 5";  
    $result = $conn->query($sql);

    if ($result->num_rows > 0) {
        while ($row = $result->fetch_assoc()) {
            echo "<div class='suggestion' onclick='selectSuggestion(\"" . $row['name'] . "\")'>" . $row['name'] . "</div>";
        }
    } else {
        echo "<div class='suggestion'>No suggestions found</div>";
    }
}
$conn->close();
?>

<script>
function selectSuggestion(name) {
    document.getElementById("searchBox").value = name;
    document.getElementById("suggestions").style.display = "none";
}
</script>

How It Works?

✔️ As the user types, AJAX fetches suggestions from suggestions.php.
✔️ The user can click a suggestion, which will auto-fill the search box.

2. Adding Pagination to Search Results

If a database has too many users, we need pagination to load results page by page instead of all at once.

Modify JavaScript (AJAX with Pagination)

function fetchResults(query, page = 1) {
    fetch("search.php?q=" + encodeURIComponent(query) + "&page=" + page)
    .then(response => response.text())
    .then(data => {
        document.getElementById("searchResults").innerHTML = data;
    })
    .catch(error => console.error("Error:", error));
}

document.getElementById("searchBox").addEventListener("keyup", function() {
    let query = this.value;
    if (query.length > 0) {
        fetchResults(query);
    } else {
        document.getElementById("searchResults").innerHTML = "";
    }
});

Modify PHP File (search.php)

<?php
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "ajax_demo";

$conn = new mysqli($servername, $username, $password, $dbname);
if ($conn->connect_error) {
    die("Connection failed: " . $conn->connect_error);
}

$limit = 3;  // Number of results per page
$page = isset($_GET['page']) ? (int)$_GET['page'] : 1;
$offset = ($page - 1) * $limit;

if (isset($_GET['q'])) {
    $search = $conn->real_escape_string($_GET['q']);
    $sql = "SELECT * FROM users WHERE name LIKE '%$search%' OR email LIKE '%$search%' LIMIT $limit OFFSET $offset";
    $result = $conn->query($sql);

    if ($result->num_rows > 0) {
        while ($row = $result->fetch_assoc()) {
            echo "<div class='result-item'>" . $row['name'] . " - " . $row['email'] . "</div>";
        }

        // Pagination Links
        $countQuery = "SELECT COUNT(*) as total FROM users WHERE name LIKE '%$search%' OR email LIKE '%$search%'";
        $countResult = $conn->query($countQuery);
        $totalRows = $countResult->fetch_assoc()['total'];
        $totalPages = ceil($totalRows / $limit);

        echo "<div id='pagination'>";
        for ($i = 1; $i <= $totalPages; $i++) {
            echo "<button onclick='fetchResults(\"$search\", $i)'>$i</button> ";
        }
        echo "</div>";
    } else {
        echo "<div class='result-item'>No results found</div>";
    }
}
$conn->close();
?>

How It Works?

✔️ Only 3 results per page are loaded to avoid performance issues.
✔️ AJAX updates the results when the user clicks on a page number.

Final Outcome with Enhancements

🔹 Search Suggestions (Autocomplete) – Provides real-time hints as the user types.
🔹 Pagination – Displays results in pages instead of showing everything at once.
🔹 Better Performance – Efficiently loads data without slowing down the page.🚀

1
Subscribe to my newsletter

Read articles from Payal Porwal directly inside your inbox. Subscribe to the newsletter, and don't miss out.

Adding Pagination serachAjaxajax flexjsJavaScriptjavascript frameworkJavascript libraryjavascript modulesJSXpagespeedjavascript JSON Web Tokens (JWT)LoopsLoops in Javascript

Written by

Payal Porwal
Payal Porwal

Hi there, tech enthusiasts! I'm a passionate Software Developer driven by a love for continuous learning and innovation. I thrive on exploring new tools and technologies, pushing boundaries, and finding creative solutions to complex problems. What You'll Find Here On my Hashnode blog, I share: 🚀 In-depth explorations of emerging technologies 💡 Practical tutorials and how-to guides 🔧Insights on software development best practices 🚀Reviews of the latest tools and frameworks 💡 Personal experiences from real-world projects. Join me as we bridge imagination and implementation in the tech world. Whether you're a seasoned pro or just starting out, there's always something new to discover! Let’s connect and grow together! 🌟