AJAX
AJAX stands for Asynchronous JavaScript and XML.
It is a technique that lets a web page fetch new data from the server in the background and update part of the page without reloading it.
Despite the name, modern AJAX code usually uses the fetch() API and JSON rather than XMLHttpRequest and XML.
<!DOCTYPE html>
<html lang="en">
<body>
<h1>Student Info</h1>
<div id="student"></div>
<button type="button" id="load">Load student</button>
<script>
document.getElementById("load").addEventListener("click", async () => {
const response = await fetch("/api/students/10001");
if (!response.ok) return;
const student = await response.json(); // e.g. { "name": "Lakshman", "age": 15 }
document.getElementById("student").textContent = student.name + ", age " + student.age;
});
</script>
</body>
</html>