Efficient AJAX Handling in jQuery: Custom Wrapper for Aborting & Error Management

Optimizing AJAX Requests with a Custom Wrapper in jQuery Introduction In modern web applications, efficient network communication is crucial for performance and user experience. One common issue arises when multiple duplicate API requests are triggered, leading to unnecessary network traffic and potential data inconsistencies. To mitigate this, we can implement a custom AJAX wrapper in jQuery. This article explores two approaches: Cancelling Only Duplicate Requests: This approach tracks active requests using a unique request ID and cancels only duplicate API calls. Cancelling All Active Requests: This approach cancels all pending AJAX requests before initiating a new one, which is useful when repeated button clicks trigger the same set of API calls. We'll provide implementation details and highlight the benefits of each approach. Approach 1: Cancelling Only Duplicate Requests Core Concept This implementation ensures that: Each API request is assigned a unique ID based on the URL and method. Active requests are stored in a Map. When a duplicate request is detected, the previous one is aborted. Requests are automatically removed from tracking once completed. Code Implementation // JQUERY AJAX WRAPPER var x_activeXHRsMap = new Map(); // Map to store active XHR requests with unique IDs function overrideAjaxCalls($, utils) { var originalAjax = $.ajax; $.ajax = function (options) { if (!utils.isIrServicePath(options.url)) { return originalAjax.call($, options); } const requestId = utils.generateRequestId(options.url, options.method || "GET"); if (x_activeXHRsMap.has(requestId)) { const existingXHR = x_activeXHRsMap.get(requestId); if (existingXHR && existingXHR.readyState !== 4) { existingXHR.abort(); console.log(`Aborted duplicate API call: ${options.url}`); } } let xhr = originalAjax.call($, options); let originalFailHandlers = []; xhr.fail((xhrObj, status, error) => { if (status === "abort") { console.warn(`Request aborted: ${options.url}`); } else { originalFailHandlers.forEach((fn) => fn.apply(this, [xhrObj, status, error])); } }); xhr.fail = function (callback) { if (typeof callback === "function") { originalFailHandlers.push(callback); } return this; }; x_activeXHRsMap.set(requestId, xhr); xhr.always(() => { x_activeXHRsMap.delete(requestId); }); return xhr; }; } Approach 2: Cancelling All Active Requests Core Concept This implementation cancels all ongoing AJAX requests before initiating a new one. This is particularly useful when clicking a button triggers multiple requests in quick succession, ensuring that only the latest request is processed. Code Implementation // JQUERY AJAX WRAPPER var activeXHRs = []; // Array to store active XHR requests function overrideAjaxCalls($) { var originalAjax = $.ajax; $.ajax = function (options) { // Abort all active XHR requests before starting a new one activeXHRs.forEach(xhr => xhr.abort()); activeXHRs = []; // Clear the array let xhr = originalAjax.call($, options); let originalFailHandlers = []; xhr.fail((xhrObj, status, error) => { if (status === "abort") { console.warn(`Request aborted: ${options.url}`); } else { originalFailHandlers.forEach((fn) => fn.apply(this, [xhrObj, status, error])); } }); xhr.fail = function (callback) { if (typeof callback === "function") { originalFailHandlers.push(callback); } return this; }; activeXHRs.push(xhr); xhr.always(() => { activeXHRs = activeXHRs.filter(activeXhr => activeXhr !== xhr); }); return xhr; }; } Comparison of Both Approaches Feature Cancelling Duplicate Requests Cancelling All Active Requests Use Case Avoid duplicate API calls Cancel all requests before new one Request Tracking Tracks using unique request ID No tracking, just abort all Performance Impact More efficient, avoids redundant API calls Can be useful for UI responsiveness but may cancel needed requests Best For APIs where duplicate calls should be prevented Scenarios where repeated button clicks trigger multiple requests Conclusion Both approaches provide effective ways to manage AJAX requests in jQuery. The best choice depends on your use case: Use Approach 1 (Cancelling Duplicate Requests) when you need to ensure no redundant API calls occur while allowing different requests to proceed. Use Approach 2 (Cancelling All Active Requests) when dealing with repeated button clicks triggering the same API set. By implementing these strategies, developers can optimize network usage, improve performance, and enhance user experience in web applications. More Details: Get all articles related t

Mar 19, 2025 - 06:18

Efficient AJAX Handling in jQuery: Custom Wrapper for Aborting & Error Management

Optimizing AJAX Requests with a Custom Wrapper in jQuery

Introduction

In modern web applications, efficient network communication is crucial for performance and user experience. One common issue arises when multiple duplicate API requests are triggered, leading to unnecessary network traffic and potential data inconsistencies. To mitigate this, we can implement a custom AJAX wrapper in jQuery. This article explores two approaches:

Cancelling Only Duplicate Requests: This approach tracks active requests using a unique request ID and cancels only duplicate API calls.
Cancelling All Active Requests: This approach cancels all pending AJAX requests before initiating a new one, which is useful when repeated button clicks trigger the same set of API calls.

We'll provide implementation details and highlight the benefits of each approach.

Approach 1: Cancelling Only Duplicate Requests

Core Concept

This implementation ensures that:

Each API request is assigned a unique ID based on the URL and method.
Active requests are stored in a Map.
When a duplicate request is detected, the previous one is aborted.
Requests are automatically removed from tracking once completed.

Code Implementation

// JQUERY AJAX WRAPPER
var x_activeXHRsMap = new Map(); // Map to store active XHR requests with unique IDs

function overrideAjaxCalls($, utils) {
  var originalAjax = $.ajax;

  $.ajax = function (options) {
    if (!utils.isIrServicePath(options.url)) {
      return originalAjax.call($, options);
    }

    const requestId = utils.generateRequestId(options.url, options.method || "GET");

    if (x_activeXHRsMap.has(requestId)) {
      const existingXHR = x_activeXHRsMap.get(requestId);
      if (existingXHR && existingXHR.readyState !== 4) {
        existingXHR.abort();
        console.log(`Aborted duplicate API call: ${options.url}`);
      }
    }

    let xhr = originalAjax.call($, options);
    let originalFailHandlers = [];

    xhr.fail((xhrObj, status, error) => {
      if (status === "abort") {
        console.warn(`Request aborted: ${options.url}`);
      } else {
        originalFailHandlers.forEach((fn) => fn.apply(this, [xhrObj, status, error]));
      }
    });

    xhr.fail = function (callback) {
      if (typeof callback === "function") {
        originalFailHandlers.push(callback);
      }
      return this;
    };

    x_activeXHRsMap.set(requestId, xhr);

    xhr.always(() => {
      x_activeXHRsMap.delete(requestId);
    });

    return xhr;
  };
}

Approach 2: Cancelling All Active Requests

Core Concept

This implementation cancels all ongoing AJAX requests before initiating a new one. This is particularly useful when clicking a button triggers multiple requests in quick succession, ensuring that only the latest request is processed.

Code Implementation

// JQUERY AJAX WRAPPER
var activeXHRs = []; // Array to store active XHR requests

function overrideAjaxCalls($) {
  var originalAjax = $.ajax;

  $.ajax = function (options) {
    // Abort all active XHR requests before starting a new one
    activeXHRs.forEach(xhr => xhr.abort());
    activeXHRs = []; // Clear the array

    let xhr = originalAjax.call($, options);
    let originalFailHandlers = [];

    xhr.fail((xhrObj, status, error) => {
      if (status === "abort") {
        console.warn(`Request aborted: ${options.url}`);
      } else {
        originalFailHandlers.forEach((fn) => fn.apply(this, [xhrObj, status, error]));
      }
    });

    xhr.fail = function (callback) {
      if (typeof callback === "function") {
        originalFailHandlers.push(callback);
      }
      return this;
    };

    activeXHRs.push(xhr);

    xhr.always(() => {
      activeXHRs = activeXHRs.filter(activeXhr => activeXhr !== xhr);
    });

    return xhr;
  };
}

Comparison of Both Approaches

Feature	Cancelling Duplicate Requests	Cancelling All Active Requests
Use Case	Avoid duplicate API calls	Cancel all requests before new one
Request Tracking	Tracks using unique request ID	No tracking, just abort all
Performance Impact	More efficient, avoids redundant API calls	Can be useful for UI responsiveness but may cancel needed requests
Best For	APIs where duplicate calls should be prevented	Scenarios where repeated button clicks trigger multiple requests

Conclusion

Both approaches provide effective ways to manage AJAX requests in jQuery. The best choice depends on your use case:

Use Approach 1 (Cancelling Duplicate Requests) when you need to ensure no redundant API calls occur while allowing different requests to proceed.
Use Approach 2 (Cancelling All Active Requests) when dealing with repeated button clicks triggering the same API set.

By implementing these strategies, developers can optimize network usage, improve performance, and enhance user experience in web applications.

More Details:

Get all articles related to system design
Hastag: SystemDesignWithZeeshanAli

systemdesignwithzeeshanali

Git: https://github.com/ZeeshanAli-0704/SystemDesignWithZeeshanAli