What is AJAX?

The short answer

AJAX (Asynchronous JavaScript and XML) is a technique for making HTTP requests from the browser without reloading the page. It lets you fetch data from a server, send form data, or update parts of the page — all in the background. Despite the name, modern AJAX uses JSON instead of XML and fetch instead of XMLHttpRequest.

How it works

Before AJAX, every interaction with the server required a full page reload. Clicking a link or submitting a form would send a request, and the server would return an entirely new HTML page.

With AJAX, JavaScript sends a request in the background, receives the response, and updates just the part of the page that needs to change. The user never sees a page reload.

Modern AJAX with fetch

Copy
// GET request
async function getUsers() {
  const response = await fetch('/api/users');
  const users = await response.json();
  return users;
}
// POST request
async function createUser(name, email) {
  const response = await fetch('/api/users', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ name, email }),
  });
  return response.json();
}

The old way: XMLHttpRequest

Before fetch, we used XMLHttpRequest:

Copy
const xhr = new XMLHttpRequest();
xhr.open('GET', '/api/users');
xhr.onload = function () {
  if (xhr.status === 200) {
    const users = JSON.parse(xhr.responseText);
    console.log(users);
  }
};
xhr.onerror = function () {
  console.log('Request failed');
};
xhr.send();

fetch is simpler, returns promises, and is the standard today. XMLHttpRequest is only used in legacy code or when you need features like upload progress tracking.

AJAX in React

In React, you typically make AJAX calls inside useEffect:

Copy
function UserList() {
  const [users, setUsers] = useState([]);
  useEffect(() => {
    fetch('/api/users')
      .then((res) => res.json())
      .then((data) => setUsers(data));
  }, []);
  return (
    <ul>
      {users.map((user) => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
}

Or use a data fetching library like React Query that handles caching, loading states, and error handling automatically.

Why interviewers ask this

AJAX is foundational to modern web development. Every single-page application uses it. Interviewers want to see if you understand the concept, know the modern API (fetch), and can implement it in practice.