JavaScript AJAX: AJAX Intro · XMLHttpRequest · Sending Requests · Handling Responses · XML Files · PHP & ASP Integration · Database Communication · AJAX Applications & Examples

// Creating the courier
const xhr = new XMLHttpRequest();

console.log(typeof xhr); // Output: "object"

// Legacy compatibility pattern (rarely needed today)
let xhr;

if (window.XMLHttpRequest) {
  xhr = new XMLHttpRequest();          // Modern browsers
} else {
  xhr = new ActiveXObject("Microsoft.XMLHTTP"); // Old IE
}

console.log("XHR object ready:", xhr); // Output: XHR object ready: XMLHttpRequest {}

const xhr = new XMLHttpRequest();
console.log(xhr.readyState); // Output: 0  (UNSENT)

xhr.open("GET", "https://api.example.com/data");
console.log(xhr.readyState); // Output: 1  (OPENED)

// After a successful request:
console.log(xhr.status);     // Output: 200
console.log(xhr.statusText); // Output: "OK"

// After a successful request returning JSON text:
console.log(xhr.responseText);
// Output: '{"name":"Tunde","balance":50000}'

// Parse it into a real JavaScript object:
const data = JSON.parse(xhr.responseText);
console.log(data.name);    // Output: "Tunde"
console.log(data.balance); // Output: 50000

const xhr = new XMLHttpRequest();

xhr.onreadystatechange = function() {
  console.log("State changed to:", xhr.readyState);
};

xhr.open("GET", "data.json");
xhr.send();

// Output (in sequence):
// "State changed to: 1"
// "State changed to: 2"
// "State changed to: 3"
// "State changed to: 4"

xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    console.log("Success! Data:", xhr.responseText);
  }
};

// ❌ WRONG — readyState is checked before send() completes
const xhr = new XMLHttpRequest();
xhr.open("GET", "data.json");
xhr.send();
console.log(xhr.responseText); // Output: "" (empty — request not done yet!)

// ✅ CORRECT — check inside the event handler
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    console.log(xhr.responseText); // Output: actual data
  }
};

const xhr = new XMLHttpRequest();     // Step 1: Create
xhr.open("GET", "products.json");     // Step 2: Configure
xhr.send();                           // Step 3: Send

xhr.open(method, url, async, user, password);

// GET request (most common for reading data)
xhr.open("GET", "/api/products");

// POST request (for sending/creating data)
xhr.open("POST", "/api/orders");

// With explicit async flag (true is the default)
xhr.open("GET", "/api/users", true);

// Fetching all products
xhr.open("GET", "/api/products");
xhr.send(); // No body needed for GET

// Fetching with query parameters
xhr.open("GET", "/api/products?category=electronics&maxPrice=100000");
xhr.send();
// The URL becomes: /api/products?category=electronics&maxPrice=100000

const xhr = new XMLHttpRequest();
xhr.open("POST", "/api/orders");

// Tell the server what format we're sending
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

// Data goes into send(), not the URL
xhr.send("product=iPhone&quantity=2&price=450000");

xhr.setRequestHeader(headerName, headerValue);

// Tell server you're sending URL-encoded form data
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

// Tell server you're sending JSON
xhr.setRequestHeader("Content-Type", "application/json");

// Add an authorization token
xhr.setRequestHeader("Authorization", "Bearer eyJhbGciOiJIUzI1NiJ9...");

// Tell server what format you accept back
xhr.setRequestHeader("Accept", "application/json");

xhr.send(body);

// GET — no body
xhr.open("GET", "/api/data");
xhr.send();   // OR: xhr.send(null);

// POST with URL-encoded data
xhr.open("POST", "/api/register");
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhr.send("name=Babatunde&email=tunde@example.com&city=Lagos");

// POST with JSON
xhr.open("POST", "/api/transfer");
xhr.setRequestHeader("Content-Type", "application/json");
xhr.send(JSON.stringify({
  from: "Tunde",
  to: "Chioma",
  amount: 25000,
  currency: "NGN"
}));

// ❌ Might return cached (stale) data
xhr.open("GET", "/api/stockprice");
xhr.send();

// ✅ Forces a fresh request every time
const timestamp = new Date().getTime(); // e.g., 1718023456789
xhr.open("GET", "/api/stockprice?t=" + timestamp);
xhr.send();
// URL becomes: /api/stockprice?t=1718023456789

const xhr = new XMLHttpRequest();
xhr.open("GET", "/api/data");

// Fires when request completes successfully
xhr.onload = function() {
  if (xhr.status === 200) {
    console.log("Data received:", xhr.responseText);
  }
};

// Fires on network errors (no internet, server down)
xhr.onerror = function() {
  console.log("Network error! Check your connection.");
};

// Fires periodically as data is downloaded (useful for large files)
xhr.onprogress = function(event) {
  if (event.lengthComputable) {
    const percent = (event.loaded / event.total) * 100;
    console.log("Downloaded:", Math.round(percent) + "%");
  }
};

xhr.send();

function loadUserData(userId) {
  const xhr = new XMLHttpRequest();
  xhr.open("GET", "/api/users/" + userId);

  xhr.onreadystatechange = function() {
    // We only care about state 4 (DONE)
    if (xhr.readyState === 4) {
      if (xhr.status === 200) {
        // Success — process the response
        const user = JSON.parse(xhr.responseText);
        document.getElementById("userName").innerText = user.name;
        document.getElementById("userBalance").innerText = "₦" + user.balance.toLocaleString();
      } else {
        // Error — show a message
        document.getElementById("error").innerText =
          "Failed to load user. Status: " + xhr.status;
      }
    }
  };

  xhr.send();
}

// Call it:
loadUserData(42);

// If server returns: {"name":"Babatunde","balance":500000}
// Page updates: userName → "Babatunde", userBalance → "₦500,000"

// Server returns: "Request processed successfully"
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    console.log(xhr.responseText);
    // Output: "Request processed successfully"
  }
};

// Server returns: {"products":[{"name":"Laptop","price":450000},{"name":"Phone","price":150000}]}

xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    const data = JSON.parse(xhr.responseText);
    const products = data.products;

    products.forEach(function(product) {
      console.log(product.name + ": ₦" + product.price.toLocaleString());
    });

    // Output:
    // Laptop: ₦450,000
    // Phone: ₦150,000
  }
};

<?xml version="1.0" encoding="UTF-8"?>
<banks>
  <bank>
    <name>GTBank</name>
    <code>058</code>
  </bank>
  <bank>
    <name>Access Bank</name>
    <code>044</code>
  </bank>
</banks>

xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    const xmlDoc = xhr.responseXML;                      // Already a DOM object
    const banks = xmlDoc.getElementsByTagName("bank");   // Like querySelectorAll

    for (let i = 0; i < banks.length; i++) {
      const name = banks[i].getElementsByTagName("name")[0].childNodes[0].nodeValue;
      const code = banks[i].getElementsByTagName("code")[0].childNodes[0].nodeValue;
      console.log(name + " — Code: " + code);
    }

    // Output:
    // GTBank — Code: 058
    // Access Bank — Code: 044
  }
};

// Method 1: Update text content
document.getElementById("balance").innerText = "₦" + amount.toLocaleString();

// Method 2: Update HTML content (renders HTML tags)
document.getElementById("productList").innerHTML = "<li>Laptop</li><li>Phone</li>";

// Method 3: Build HTML from array data
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    const items = JSON.parse(xhr.responseText);
    let html = "<ul>";

    items.forEach(function(item) {
      html += `<li>${item.name} — ₦${item.price.toLocaleString()}</li>`;
    });

    html += "</ul>";
    document.getElementById("results").innerHTML = html;
  }
};

// ❌ WRONG — server returned plain text, not JSON
const data = JSON.parse("Server error: database unavailable");
// Output: SyntaxError: Unexpected token 'S'

// ✅ CORRECT — always verify before parsing
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    try {
      const data = JSON.parse(xhr.responseText);
      console.log(data);
    } catch (error) {
      console.log("Response is not JSON:", xhr.responseText);
    }
  }
};

xhr.onreadystatechange = function() {
  if (xhr.readyState === 4) {
    console.log(xhr.getAllResponseHeaders());
    // Output (sample):
    // content-type: application/json; charset=utf-8
    // content-length: 245
    // date: Mon, 01 Jan 2025 12:00:00 GMT
  }
};

const contentType = xhr.getResponseHeader("content-type");
console.log(contentType); // Output: "application/json; charset=utf-8"

<?xml version="1.0" encoding="UTF-8"?>
<states>
  <state>
    <name>Lagos</name>
    <capital>Ikeja</capital>
    <region>Southwest</region>
    <population>15000000</population>
  </state>
  <state>
    <name>Kano</name>
    <capital>Kano City</capital>
    <region>Northwest</region>
    <population>13000000</population>
  </state>
  <state>
    <name>Rivers</name>
    <capital>Port Harcourt</capital>
    <region>South-south</region>
    <population>7000000</population>
  </state>
</states>

<!DOCTYPE html>
<html>
<head>
  <title>Nigerian States</title>
</head>
<body>
  <h2>Nigerian States Information</h2>
  <button onclick="loadStates()">Load States</button>
  <div id="statesList"></div>

  <script src="states.js"></script>
</body>
</html>

function loadStates() {
  const xhr = new XMLHttpRequest();
  xhr.open("GET", "nigerian_states.xml");  // Request the XML file

  xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
      displayStates(xhr.responseXML);  // Pass the XML document to our display function
    }
  };

  xhr.send();
}

function displayStates(xmlDoc) {
  // Get all <state> elements from the XML
  const states = xmlDoc.getElementsByTagName("state");
  let html = "<table border='1'>";
  html += "<tr><th>State</th><th>Capital</th><th>Region</th><th>Population</th></tr>";

  for (let i = 0; i < states.length; i++) {
    const name       = getXMLValue(states[i], "name");
    const capital    = getXMLValue(states[i], "capital");
    const region     = getXMLValue(states[i], "region");
    const population = getXMLValue(states[i], "population");

    html += `<tr>
      <td>${name}</td>
      <td>${capital}</td>
      <td>${region}</td>
      <td>${Number(population).toLocaleString()}</td>
    </tr>`;
  }

  html += "</table>";
  document.getElementById("statesList").innerHTML = html;
}

// Helper function: extract text from an XML element by tag name
function getXMLValue(parentNode, tagName) {
  const elements = parentNode.getElementsByTagName(tagName);
  if (elements.length > 0 && elements[0].childNodes.length > 0) {
    return elements[0].childNodes[0].nodeValue;
  }
  return "";
}

// After clicking the button, the page renders:
// | State  | Capital       | Region     | Population |
// | Lagos  | Ikeja         | Southwest  | 15,000,000 |
// | Kano   | Kano City     | Northwest  | 13,000,000 |
// | Rivers | Port Harcourt | South-south| 7,000,000  |

const xmlDoc = xhr.responseXML;

// Get elements by tag name (returns HTMLCollection)
const states = xmlDoc.getElementsByTagName("state");     // All <state> elements
const names  = xmlDoc.getElementsByTagName("name");      // All <name> elements

// Access individual items
const firstState = states[0];                            // First <state> element
const stateName  = names[0].childNodes[0].nodeValue;    // Text content of first <name>

// Get attributes (if the XML uses them)
// e.g., <state code="LA"> → state.getAttribute("code") === "LA"

console.log(states.length);   // Output: 3 (three <state> elements)
console.log(stateName);       // Output: "Lagos"

// ❌ WRONG — XML is not JSON, you cannot use JSON.parse on it
const data = JSON.parse(xhr.responseXML);
// Output: TypeError — responseXML is already a document, not a string

// ❌ WRONG — trying to access XML like object properties
const name = xmlDoc.states.state[0].name;
// Output: TypeError — XML is DOM-based, not object-property-based

// ✅ CORRECT — use DOM methods
const name = xmlDoc.getElementsByTagName("name")[0].childNodes[0].nodeValue;
// Output: "Lagos"

Browser (JavaScript)  →  AJAX Request  →  Server (PHP)
Browser (JavaScript)  ←  Response      ←  Server (PHP output)

<!DOCTYPE html>
<html>
<head>
  <title>Search Nigerian Banks</title>
</head>
<body>
  <h2>Bank Lookup</h2>
  <p>
    <label>Type a bank name:</label>
    <input type="text" id="bankInput" oninput="lookupBank(this.value)">
  </p>
  <div id="suggestions"></div>

  <script>
    function lookupBank(query) {
      if (query.length === 0) {
        document.getElementById("suggestions").innerHTML = "";
        return; // Don't search for empty string
      }

      const xhr = new XMLHttpRequest();
      xhr.open("GET", "lookup_bank.php?q=" + encodeURIComponent(query));

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

      xhr.send();
    }
  </script>
</body>
</html>

<?php
// Sample bank list (in a real app, this comes from a database)
$banks = [
  "Access Bank",
  "GTBank (Guaranty Trust Bank)",
  "First Bank of Nigeria",
  "Zenith Bank",
  "UBA (United Bank for Africa)",
  "Fidelity Bank",
  "Sterling Bank",
  "Polaris Bank",
  "Union Bank",
  "Wema Bank"
];

$query = strtolower($_GET["q"]);  // Get search term from URL parameter
$results = [];

foreach ($banks as $bank) {
  if (strpos(strtolower($bank), $query) !== false) {
    $results[] = "<p>" . $bank . "</p>";
  }
}

if (count($results) === 0) {
  echo "<p>No banks found matching: " . htmlspecialchars($query) . "</p>";
} else {
  echo implode("", $results);
}
?>

JavaScript sends: GET lookup_bank.php?q=zen
PHP finds: "Zenith Bank"
PHP echoes: <p>Zenith Bank</p>
JavaScript inserts into #suggestions div: Zenith Bank appears below input

function processPayment(amount, recipient) {
  const xhr = new XMLHttpRequest();
  xhr.open("POST", "process_payment.php");
  xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

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

  const data = "amount=" + amount + "&recipient=" + encodeURIComponent(recipient);
  xhr.send(data);
}

// Call:
processPayment(50000, "Chioma Okafor");

<?php
$amount    = $_POST["amount"];
$recipient = $_POST["recipient"];

// Validation
if (!is_numeric($amount) || $amount <= 0) {
  echo "Invalid amount.";
  exit;
}

// In real app: process payment via Flutterwave/Paystack API
// Simulate success:
echo "✅ Transfer of ₦" . number_format($amount) . " to " . htmlspecialchars($recipient) . " was successful!";
?>

✅ Transfer of ₦50,000 to Chioma Okafor was successful!

<?php
header("Content-Type: application/json"); // Tell client we're sending JSON

$user = [
  "id"      => 42,
  "name"    => "Babatunde",
  "balance" => 500000,
  "city"    => "Lagos"
];

echo json_encode($user);
// Output: {"id":42,"name":"Babatunde","balance":500000,"city":"Lagos"}
?>

xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    const user = JSON.parse(xhr.responseText);
    console.log("Hello, " + user.name + "!");
    console.log("Your balance: ₦" + user.balance.toLocaleString());
    // Output:
    // Hello, Babatunde!
    // Your balance: ₦500,000
  }
};

<input type="text" id="nameInput" oninput="lookupPerson(this.value)">
<div id="suggestions"></div>

<script>
  function lookupPerson(query) {
    if (query.length === 0) {
      document.getElementById("suggestions").innerHTML = "";
      return;
    }

    const xhr = new XMLHttpRequest();
    xhr.open("GET", "lookup.asp?q=" + encodeURIComponent(query));

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

    xhr.send();
  }
</script>

<%
Dim query
query = LCase(Request.QueryString("q"))

' Sample data (in real app, from database)
Dim names(4)
names(0) = "Babatunde Adewale"
names(1) = "Chioma Okafor"
names(2) = "Emeka Eze"
names(3) = "Funmilayo Okonkwo"
names(4) = "Gbenga Adeleke"

Dim i
For i = 0 To 4
  If InStr(LCase(names(i)), query) > 0 Then
    Response.Write("<p>" & names(i) & "</p>")
  End If
Next
%>

[HttpGet]
[Route("api/users/search")]
public IActionResult SearchUsers(string q) {
    var users = new List<string> { "Babatunde", "Chioma", "Emeka" };
    var matches = users.Where(u => u.ToLower().Contains(q.ToLower())).ToList();
    return Ok(matches); // Returns JSON array
}

xhr.open("GET", "/api/users/search?q=" + encodeURIComponent(query));
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    const names = JSON.parse(xhr.responseText);
    // ["Babatunde", "Chioma"]
    names.forEach(name => {
      document.getElementById("results").innerHTML += "<p>" + name + "</p>";
    });
  }
};
xhr.send();

User types in search box
        ↓
JavaScript creates AJAX request
        ↓
Request goes to server (PHP/Node.js/Python)
        ↓
Server queries database (MySQL/PostgreSQL/MongoDB)
        ↓
Database returns rows/documents
        ↓
Server formats data as JSON
        ↓
AJAX response arrives in browser
        ↓
JavaScript updates the DOM
User sees results — page never reloaded!

| id | name              | email                  | city          | balance  |
|----|-------------------|------------------------|---------------|----------|
| 1  | Babatunde Adewale | tunde@example.com      | Lagos         | 500000   |
| 2  | Chioma Okafor     | chioma@example.com     | Enugu         | 250000   |
| 3  | Emeka Eze         | emeka@example.com      | Abuja         | 750000   |

<h2>Customer Lookup</h2>
<select id="customerId" onchange="loadCustomer(this.value)">
  <option value="">-- Select a Customer --</option>
  <option value="1">Babatunde Adewale</option>
  <option value="2">Chioma Okafor</option>
  <option value="3">Emeka Eze</option>
</select>

<div id="customerCard"></div>

function loadCustomer(id) {
  if (!id) {
    document.getElementById("customerCard").innerHTML = "";
    return;
  }

  const xhr = new XMLHttpRequest();
  xhr.open("GET", "get_customer.php?id=" + id);

  xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
      const customer = JSON.parse(xhr.responseText);

      document.getElementById("customerCard").innerHTML = `
        <div style="border:1px solid #ccc; padding:16px; border-radius:8px;">
          <h3>${customer.name}</h3>
          <p>📧 ${customer.email}</p>
          <p>📍 ${customer.city}</p>
          <p>💰 Balance: ₦${Number(customer.balance).toLocaleString()}</p>
        </div>
      `;
    }
  };

  xhr.send();
}

<?php
header("Content-Type: application/json");

$id = intval($_GET["id"]); // intval prevents SQL injection

// Database connection
$conn = new mysqli("localhost", "db_user", "db_password", "finance_db");

if ($conn->connect_error) {
  echo json_encode(["error" => "Database connection failed"]);
  exit;
}

// Prepared statement (safe from SQL injection)
$stmt = $conn->prepare("SELECT name, email, city, balance FROM customers WHERE id = ?");
$stmt->bind_param("i", $id);
$stmt->execute();
$result = $stmt->get_result();
$customer = $result->fetch_assoc();

$stmt->close();
$conn->close();

echo json_encode($customer);
// Output: {"name":"Babatunde Adewale","email":"tunde@example.com","city":"Lagos","balance":"500000"}
?>

function addProduct(name, price, category) {
  const xhr = new XMLHttpRequest();
  xhr.open("POST", "add_product.php");
  xhr.setRequestHeader("Content-Type", "application/json");

  xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
      const result = JSON.parse(xhr.responseText);
      if (result.success) {
        document.getElementById("message").innerHTML =
          "✅ Product added with ID: " + result.newId;
      } else {
        document.getElementById("message").innerHTML =
          "❌ Error: " + result.error;
      }
    }
  };

  xhr.send(JSON.stringify({ name, price, category }));
}

// Call:
addProduct("Samsung Galaxy A55", 450000, "Electronics");
// Output on page: ✅ Product added with ID: 104

<?php
header("Content-Type: application/json");

$data     = json_decode(file_get_contents("php://input"), true);
$name     = $data["name"];
$price    = $data["price"];
$category = $data["category"];

$conn = new mysqli("localhost", "db_user", "db_password", "shop_db");
$stmt = $conn->prepare("INSERT INTO products (name, price, category) VALUES (?, ?, ?)");
$stmt->bind_param("sis", $name, $price, $category);

if ($stmt->execute()) {
  echo json_encode(["success" => true, "newId" => $conn->insert_id]);
} else {
  echo json_encode(["success" => false, "error" => $stmt->error]);
}

$stmt->close();
$conn->close();
?>

// ❌ DANGEROUS — never do this
$id = $_GET["id"];
$query = "SELECT * FROM customers WHERE id = " . $id;
// If user sends id=1 OR 1=1, they get ALL customers!
// If user sends id=1; DROP TABLE customers--, they can DELETE your entire table!

// ✅ SAFE — always use prepared statements
$stmt = $conn->prepare("SELECT * FROM customers WHERE id = ?");
$stmt->bind_param("i", $id); // "i" = integer — PHP ensures it's a number

<input type="text" id="searchBox" placeholder="Search products..." oninput="search(this.value)">
<div id="searchResults"></div>

let searchTimer; // For debouncing

function search(query) {
  // Debounce: don't fire on every keystroke, wait 300ms after user stops typing
  clearTimeout(searchTimer);

  if (query.length < 2) {
    document.getElementById("searchResults").innerHTML = "";
    return;
  }

  searchTimer = setTimeout(function() {
    const xhr = new XMLHttpRequest();
    xhr.open("GET", "/api/products/search?q=" + encodeURIComponent(query));

    xhr.onreadystatechange = function() {
      if (xhr.readyState === 4 && xhr.status === 200) {
        const products = JSON.parse(xhr.responseText);
        let html = "";

        if (products.length === 0) {
          html = "<p>No products found.</p>";
        } else {
          products.forEach(function(p) {
            html += `<div class="result-item">
              <strong>${p.name}</strong> — ₦${p.price.toLocaleString()}
            </div>`;
          });
        }

        document.getElementById("searchResults").innerHTML = html;
      }
    };

    xhr.send();
  }, 300); // Wait 300ms before sending request
}

let page = 1;
let loading = false;

window.addEventListener("scroll", function() {
  // Check if user is near the bottom of the page
  const nearBottom = window.innerHeight + window.scrollY >= document.body.offsetHeight - 100;

  if (nearBottom && !loading) {
    loadMorePosts();
  }
});

function loadMorePosts() {
  loading = true;
  document.getElementById("loader").style.display = "block";

  const xhr = new XMLHttpRequest();
  xhr.open("GET", "/api/posts?page=" + page + "&limit=10");

  xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
      const posts = JSON.parse(xhr.responseText);

      posts.forEach(function(post) {
        const div = document.createElement("div");
        div.className = "post";
        div.innerHTML = `<h3>${post.title}</h3><p>${post.body}</p>`;
        document.getElementById("feed").appendChild(div);
      });

      page++;
      loading = false;
      document.getElementById("loader").style.display = "none";
    }
  };

  xhr.send();
}

<form id="contactForm">
  <input type="text" id="fullName" placeholder="Full Name" required>
  <input type="email" id="email" placeholder="Email" required>
  <textarea id="message" placeholder="Your message"></textarea>
  <button type="button" onclick="submitForm()">Send Message</button>
</form>
<div id="formStatus"></div>

function submitForm() {
  const name    = document.getElementById("fullName").value.trim();
  const email   = document.getElementById("email").value.trim();
  const message = document.getElementById("message").value.trim();

  // Basic client-side validation
  if (!name || !email || !message) {
    document.getElementById("formStatus").innerHTML =
      '<span style="color:red">❌ Please fill all fields.</span>';
    return;
  }

  const xhr = new XMLHttpRequest();
  xhr.open("POST", "/api/contact");
  xhr.setRequestHeader("Content-Type", "application/json");

  xhr.onreadystatechange = function() {
    if (xhr.readyState === 4) {
      if (xhr.status === 200) {
        document.getElementById("formStatus").innerHTML =
          '<span style="color:green">✅ Message sent! We will reply within 24 hours.</span>';
        document.getElementById("contactForm").reset(); // Clear form
      } else {
        document.getElementById("formStatus").innerHTML =
          '<span style="color:red">❌ Failed to send. Please try again.</span>';
      }
    }
  };

  xhr.send(JSON.stringify({ name, email, message }));
}

function startLiveTracking(orderId) {
  // Poll every 5 seconds
  const intervalId = setInterval(function() {
    const xhr = new XMLHttpRequest();
    xhr.open("GET", "/api/orders/" + orderId + "/status");

    xhr.onreadystatechange = function() {
      if (xhr.readyState === 4 && xhr.status === 200) {
        const order = JSON.parse(xhr.responseText);
        updateTrackingUI(order);

        // Stop polling if order is delivered
        if (order.status === "Delivered") {
          clearInterval(intervalId);
          console.log("Order delivered! Stopped polling.");
        }
      }
    };

    xhr.send();
  }, 5000); // 5000ms = 5 seconds
}

function updateTrackingUI(order) {
  const statusMap = {
    "Processing"  : "🔄 Order is being processed",
    "Dispatched"  : "🚚 Order is on its way",
    "Out_for_delivery": "📦 Out for delivery in your area",
    "Delivered"   : "✅ Order delivered!"
  };

  document.getElementById("orderStatus").innerText =
    statusMap[order.status] || order.status;
}

// Start:
startLiveTracking("ORD-2024-0042");

<input type="file" id="fileInput">
<button onclick="uploadFile()">Upload</button>
<progress id="progressBar" value="0" max="100" style="width:100%"></progress>
<div id="uploadStatus"></div>

function uploadFile() {
  const file = document.getElementById("fileInput").files[0];

  if (!file) {
    alert("Please select a file first.");
    return;
  }

  const formData = new FormData();
  formData.append("file", file);
  formData.append("uploadedBy", "Babatunde");

  const xhr = new XMLHttpRequest();
  xhr.open("POST", "/api/upload");

  // Track upload progress
  xhr.upload.onprogress = function(event) {
    if (event.lengthComputable) {
      const percent = Math.round((event.loaded / event.total) * 100);
      document.getElementById("progressBar").value = percent;
      document.getElementById("uploadStatus").innerText = percent + "% uploaded...";
    }
  };

  xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
      const result = JSON.parse(xhr.responseText);
      document.getElementById("uploadStatus").innerText =
        "✅ File uploaded! URL: " + result.fileUrl;
    }
  };

  xhr.send(formData); // FormData — no Content-Type header needed, browser sets it automatically
}

function loadReadme() {
  const xhr = new XMLHttpRequest();
  xhr.open("GET", "README.txt");

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

  xhr.send();
}

// Assuming README.txt contains: "Welcome to the Cowrywise Learning Platform."
// After calling loadReadme():
// #content element displays: "Welcome to the Cowrywise Learning Platform."

// Load a navigation menu HTML fragment
function loadNavigation() {
  const xhr = new XMLHttpRequest();
  xhr.open("GET", "partials/navigation.html");

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

  xhr.send();
}

// navigation.html contains:
// <nav>
//   <a href="/">Home</a>
//   <a href="/products">Products</a>
//   <a href="/contact">Contact</a>
// </nav>

<label>State:</label>
<select id="stateSelect" onchange="loadLGAs(this.value)">
  <option value="">-- Select State --</option>
  <option value="lagos">Lagos</option>
  <option value="kano">Kano</option>
  <option value="rivers">Rivers</option>
</select>

<label>LGA:</label>
<select id="lgaSelect">
  <option value="">-- Select LGA --</option>
</select>

function loadLGAs(stateCode) {
  if (!stateCode) return;

  const xhr = new XMLHttpRequest();
  xhr.open("GET", "/api/lgas?state=" + stateCode);

  xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
      const lgas = JSON.parse(xhr.responseText);
      const lgaSelect = document.getElementById("lgaSelect");

      // Clear existing options
      lgaSelect.innerHTML = "<option value=''>-- Select LGA --</option>";

      // Populate with new options
      lgas.forEach(function(lga) {
        const option = document.createElement("option");
        option.value = lga.code;
        option.textContent = lga.name;
        lgaSelect.appendChild(option);
      });
    }
  };

  xhr.send();
}

// When "Lagos" is selected:
// Server returns: [{"code":"eti-osa","name":"Eti-Osa"},{"code":"surulere","name":"Surulere"},...]
// LGA dropdown populates automatically

<button id="likeBtn" onclick="toggleLike(42)">
  ❤️ Like (<span id="likeCount">128</span>)
</button>

let liked = false;

function toggleLike(postId) {
  const xhr = new XMLHttpRequest();
  const method = liked ? "DELETE" : "POST";
  xhr.open(method, "/api/posts/" + postId + "/like");
  xhr.setRequestHeader("Content-Type", "application/json");

  xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
      const result = JSON.parse(xhr.responseText);
      document.getElementById("likeCount").innerText = result.totalLikes;
      liked = !liked;
      document.getElementById("likeBtn").style.color = liked ? "red" : "inherit";
    }
  };

  xhr.send();
}

// After clicking "Like":
// Like (129) — button turns red
// After clicking again:
// Like (128) — button returns to normal

// XMLHttpRequest version (traditional)
function getDataXHR() {
  const xhr = new XMLHttpRequest();
  xhr.open("GET", "/api/products");
  xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
      const products = JSON.parse(xhr.responseText);
      console.log(products);
    }
  };
  xhr.send();
}

// Fetch API version (modern — same result, cleaner code)
async function getDataFetch() {
  try {
    const response = await fetch("/api/products");
    const products = await response.json();
    console.log(products);
  } catch (error) {
    console.log("Error:", error.message);
  }
}

// Both output:
// [{"id":1,"name":"Laptop","price":450000},{"id":2,"name":"Phone","price":150000}]

function robustRequest(url, onSuccess, onError) {
  const xhr = new XMLHttpRequest();
  xhr.open("GET", url);

  // Set a timeout (8 seconds)
  xhr.timeout = 8000;

  xhr.onreadystatechange = function() {
    if (xhr.readyState === 4) {
      if (xhr.status >= 200 && xhr.status < 300) {
        // 2xx = success
        try {
          const data = JSON.parse(xhr.responseText);
          onSuccess(data);
        } catch (e) {
          onError("Response is not valid JSON");
        }
      } else if (xhr.status >= 400 && xhr.status < 500) {
        // 4xx = client error
        onError("Client error: " + xhr.status + " " + xhr.statusText);
      } else if (xhr.status >= 500) {
        // 5xx = server error
        onError("Server error: " + xhr.status + " " + xhr.statusText);
      }
    }
  };

  xhr.ontimeout = function() {
    onError("Request timed out after 8 seconds");
  };

  xhr.onerror = function() {
    onError("Network error — check internet connection");
  };

  xhr.send();
}

// Usage:
robustRequest(
  "/api/products",
  function(data) { console.log("Success:", data); },
  function(error) { console.error("Failed:", error); }
);

// This pattern is what you'll use:
const xhr = new XMLHttpRequest();
xhr.open("GET", "some_file.json");
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    console.log(xhr.responseText); // Data is here
  }
};
xhr.send();

// POST pattern:
xhr.open("POST", "/register");
xhr.setRequestHeader("Content-Type", "application/json");
xhr.send(JSON.stringify({ name: "Tunde", course: "JavaScript" }));

// The core pattern for this stage:
function searchProducts(query) {
  const xhr = new XMLHttpRequest();
  xhr.open("GET", "/api/products?q=" + encodeURIComponent(query));
  xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
      renderProducts(JSON.parse(xhr.responseText));
    }
  };
  xhr.send();
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>KongaMart — Live Search</title>
  <style>
    * { box-sizing: border-box; font-family: sans-serif; }
    body { margin: 0; background: #f5f5f5; }

    header {
      background: #e63946;
      color: white;
      padding: 16px 24px;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    header h1 { margin: 0; font-size: 24px; }

    #cartCount {
      background: white;
      color: #e63946;
      border-radius: 50%;
      padding: 4px 10px;
      font-weight: bold;
    }

    .controls {
      padding: 20px 24px;
      display: flex;
      gap: 12px;
      flex-wrap: wrap;
      background: white;
      box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }

    #searchBox {
      flex: 1;
      padding: 10px 16px;
      border: 2px solid #ddd;
      border-radius: 6px;
      font-size: 16px;
      min-width: 200px;
    }

    #categoryFilter {
      padding: 10px 16px;
      border: 2px solid #ddd;
      border-radius: 6px;
      font-size: 16px;
    }

    #status {
      padding: 8px 24px;
      color: #666;
      font-size: 14px;
    }

    #productGrid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
      gap: 16px;
      padding: 16px 24px;
    }

    .product-card {
      background: white;
      border-radius: 8px;
      padding: 16px;
      box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    }

    .product-card h3 { margin: 0 0 8px; color: #333; }
    .product-card .price { color: #e63946; font-size: 20px; font-weight: bold; }
    .product-card .category { color: #888; font-size: 13px; margin-bottom: 12px; }

    .add-btn {
      width: 100%;
      padding: 10px;
      background: #e63946;
      color: white;
      border: none;
      border-radius: 6px;
      cursor: pointer;
      font-size: 14px;
    }

    .add-btn:hover { background: #c1121f; }
    .add-btn:disabled { background: #ccc; cursor: not-allowed; }

    .loading { text-align: center; padding: 40px; color: #888; font-size: 18px; }
    .error { color: red; padding: 20px 24px; }
  </style>
</head>
<body>

<header>
  <h1>🛍️ KongaMart</h1>
  <div>🛒 Cart: <span id="cartCount">0</span></div>
</header>

<div class="controls">
  <input
    type="text"
    id="searchBox"
    placeholder="Search products..."
    oninput="handleSearch(this.value)"
  >
  <select id="categoryFilter" onchange="handleSearch(document.getElementById('searchBox').value)">
    <option value="">All Categories</option>
    <option value="electronics">Electronics</option>
    <option value="fashion">Fashion</option>
    <option value="food">Food & Grocery</option>
    <option value="home">Home & Living</option>
  </select>
</div>

<div id="status"></div>
<div id="productGrid"></div>

<script>
  // ─── State ────────────────────────────────────────────────────────────
  let cartCount = 0;
  let searchTimer = null;

  // ─── Mock product data (simulates a server database) ─────────────────
  const ALL_PRODUCTS = [
    { id: 1, name: "Samsung Galaxy A55", price: 450000, category: "electronics", rating: 4.5 },
    { id: 2, name: "Tecno Camon 20", price: 185000, category: "electronics", rating: 4.2 },
    { id: 3, name: "Infinix Hot 40", price: 120000, category: "electronics", rating: 4.0 },
    { id: 4, name: "Dell Laptop 15\"", price: 850000, category: "electronics", rating: 4.7 },
    { id: 5, name: "Ankara Print Dress", price: 12000, category: "fashion", rating: 4.6 },
    { id: 6, name: "Men's Agbada Set", price: 35000, category: "fashion", rating: 4.4 },
    { id: 7, name: "Adire Tie-Dye Shirt", price: 8500, category: "fashion", rating: 4.1 },
    { id: 8, name: "Dangote Sugar 1kg", price: 1800, category: "food", rating: 4.8 },
    { id: 9, name: "Indomie Noodles (40 packs)", price: 8000, category: "food", rating: 4.9 },
    { id: 10, name: "Golden Morn Cereal", price: 4500, category: "food", rating: 4.3 },
    { id: 11, name: "Polyester Curtains", price: 18000, category: "home", rating: 4.2 },
    { id: 12, name: "Gas Cooker 4-Burner", price: 95000, category: "home", rating: 4.5 },
  ];

  // ─── Simulate an AJAX call with setTimeout (mimics network delay) ─────
  function simulateAJAX(query, category, callback) {
    // Show loading
    document.getElementById("status").innerText = "🔍 Searching...";
    document.getElementById("productGrid").innerHTML = '<div class="loading">Loading products...</div>';

    // Simulate 400ms server response time
    setTimeout(function() {
      let results = ALL_PRODUCTS;

      if (query) {
        results = results.filter(p =>
          p.name.toLowerCase().includes(query.toLowerCase())
        );
      }

      if (category) {
        results = results.filter(p => p.category === category);
      }

      callback(results);
    }, 400);
  }

  // ─── Search handler with debouncing ───────────────────────────────────
  function handleSearch(query) {
    clearTimeout(searchTimer);

    const category = document.getElementById("categoryFilter").value;

    searchTimer = setTimeout(function() {
      simulateAJAX(query, category, function(products) {
        renderProducts(products, query);
      });
    }, 300);
  }

  // ─── Render products to the grid ──────────────────────────────────────
  function renderProducts(products, query) {
    const grid   = document.getElementById("productGrid");
    const status = document.getElementById("status");

    if (products.length === 0) {
      status.innerText = "No products found.";
      grid.innerHTML = '<div class="loading">😕 No results found. Try a different search.</div>';
      return;
    }

    status.innerText = products.length + " product(s) found";
    grid.innerHTML = products.map(function(p) {
      const stars = "⭐".repeat(Math.round(p.rating));
      return `
        <div class="product-card">
          <div class="category">${p.category.toUpperCase()}</div>
          <h3>${p.name}</h3>
          <div class="price">₦${p.price.toLocaleString()}</div>
          <div style="margin-bottom:12px;">${stars} (${p.rating})</div>
          <button class="add-btn" onclick="addToCart(${p.id}, '${p.name}', this)">
            🛒 Add to Cart
          </button>
        </div>
      `;
    }).join("");
  }

  // ─── Add to Cart ──────────────────────────────────────────────────────
  function addToCart(productId, productName, button) {
    button.disabled = true;
    button.innerText = "Adding...";

    // Simulate AJAX call to POST /api/cart
    setTimeout(function() {
      cartCount++;
      document.getElementById("cartCount").innerText = cartCount;
      button.innerText = "✅ Added!";

      setTimeout(function() {
        button.disabled = false;
        button.innerText = "🛒 Add to Cart";
      }, 1500);
    }, 300);
  }

  // ─── Initial load ─────────────────────────────────────────────────────
  handleSearch("");
</script>

</body>
</html>

// Replace simulateAJAX with this:
function fetchProducts(query, category, callback) {
  document.getElementById("status").innerText = "🔍 Searching...";
  document.getElementById("productGrid").innerHTML = '<div class="loading">Loading...</div>';

  const params = new URLSearchParams();
  if (query)    params.append("q", query);
  if (category) params.append("category", category);

  const xhr = new XMLHttpRequest();
  xhr.open("GET", "/api/products?" + params.toString());

  xhr.onreadystatechange = function() {
    if (xhr.readyState === 4) {
      if (xhr.status === 200) {
        try {
          const products = JSON.parse(xhr.responseText);
          callback(products);
        } catch (e) {
          showError("Invalid response from server.");
        }
      } else {
        showError("Server error: " + xhr.status);
      }
    }
  };

  xhr.onerror = function() {
    showError("Network error. Check your connection.");
  };

  xhr.timeout = 10000;
  xhr.ontimeout = function() {
    showError("Request timed out. Server may be slow.");
  };

  xhr.send();
}

function showError(message) {
  document.getElementById("status").innerText = "";
  document.getElementById("productGrid").innerHTML =
    `<div class="error">❌ ${message} <button onclick="handleSearch('')">Retry</button></div>`;
}