What is the difference between fetch and jquery ajax?

Fetch and AJAX (typically referring to asynchronous requests using XMLHttpRequest) are two technologies used in web development for exchanging data between the client and server. While both can perform asynchronous HTTP requests, there are key differences in their usage and functionality:

fetch

• Modern Standard: Fetch is a modern, promise-based API that integrates well with modern JavaScript's asynchronous features (e.g., async/await).
• Concise API: It is typically more concise as it is based on Promises, avoiding nested callback functions.
• No Extra Libraries Required: It can run without additional libraries like jQuery.
• Default Behavior: By default, it does not send or receive cookies unless you explicitly specify the credentials option.
• Streams Interface: Supports the Streams API, allowing you to process data as it arrives without waiting for the entire data to be received.
• Better Control: Provides finer-grained control over requests and responses (e.g., controlling the redirect mode of requests).

ajax (XMLHttpRequest)

• Early Standard: XMLHttpRequest is an older technology that is not compatible with Promises and relies on callback functions.
• Broad Compatibility: Due to its longer history, it has good support in older browsers.
• Complex Configuration: Compared to Fetch, its API is relatively more complex, requiring more code to handle equivalent operations.
• Default Behavior: By default, it sends cookies for same-origin requests.
• No Streams Interface: Does not support the Streams API, requiring you to wait for all data to be transmitted before processing.
• Status and Events: Requests and responses can be handled by listening to different events and checking status codes.

Here is a simple comparison example:

Fetch Usage Example:

javascript
fetch('http://example.com/data', { method: 'GET' })
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error(error));

XMLHttpRequest Usage Example:

javascript
var xhr = new XMLHttpRequest();
xhr.open('GET', 'http://example.com/data', true);

xhr.onreadystatechange = function () {
  if (xhr.readyState === 4) {
    if (xhr.status === 200) {
      console.log(JSON.parse(xhr.responseText));
    } else {
      console.error(xhr.statusText);
    }
  }
};

xhr.onerror = function () {
  console.error(xhr.statusText);
};

xhr.send(null);

Although XMLHttpRequest still works across all browsers, Fetch has become the preferred API for many developers due to its simplicity and modern features.