AJAX - AJAX Request Cancellation Techniques

AJAX applications often send multiple requests to the server while the user interacts with a webpage. Sometimes earlier requests become unnecessary before they finish. For example, when a user types quickly in a search box, several requests may be sent for each character typed. If older requests are not cancelled, they may waste network resources and display outdated results.

AJAX request cancellation is the process of stopping an ongoing request before it completes.

Why Request Cancellation is Important

  1. Improves performance by preventing unwanted server calls.

  2. Reduces network traffic and server load.

  3. Prevents outdated responses from appearing on the screen.

  4. Enhances user experience in real-time applications.

Common Situations Where Cancellation is Used

  • Live search suggestions

  • Auto-complete forms

  • Filtering large datasets

  • Rapid button clicking or repeated actions

  • Page navigation before request completion

Cancelling Requests Using XMLHttpRequest

The traditional AJAX method uses the XMLHttpRequest object. It provides an abort() method to stop a request.

Example:

let xhr = new XMLHttpRequest();
xhr.open("GET", "data.json", true);
xhr.send();

// Cancel request
xhr.abort();

When abort() is called, the request immediately stops and no response is processed.

Cancelling Requests Using Fetch API

Modern web applications commonly use the Fetch API. Fetch requests cannot be cancelled directly, so an AbortController is used.

Example:

const controller = new AbortController();
const signal = controller.signal;

fetch("data.json", { signal })
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.log("Request cancelled"));

// Cancel request
controller.abort();

AbortController allows developers to cancel fetch requests safely.

Practical Example: Search Box Optimization

When a user types in a search field:

  • Cancel the previous request.

  • Send a new request for the latest input.

  • Display only the newest results.

This avoids showing results related to older search terms.

Best Practices

  • Always cancel unnecessary requests in dynamic interfaces.

  • Use debounce or throttle techniques along with cancellation.

  • Handle cancellation errors properly.

  • Avoid updating the interface after a request is aborted.

Conclusion

AJAX request cancellation techniques help developers build faster and more efficient web applications. By stopping unnecessary server communication, applications remain responsive, accurate, and resource-efficient.