What are the differences between XMLHttpRequest and fetch() in JavaScript and browsers?

XMLHttpRequest (XHR) and fetch() API are both used for asynchronous HTTP requests in JavaScript (AJAX). fetch() offers a cleaner syntax, promise-based approach, and more modern feature set compared to XHR. However, there are some differences:

• XMLHttpRequest uses event callbacks, while fetch() utilizes promise chaining.
• fetch() provides more flexibility in headers and request bodies.
• fetch() supports cleaner error handling with catch().
• Handling caching with XMLHttpRequest is difficult, but caching is supported by fetch() by default via the cache value of the second parameter to fetch() or Request().
• fetch() requires an AbortController for cancelation, while XMLHttpRequest provides an abort() method.
• XMLHttpRequest has good support for progress tracking, which fetch() lacks.
• XMLHttpRequest is only available in the browser and not natively supported in Node.js environments. On the other hand fetch() is part of the JavaScript language and is supported on all modern JavaScript runtimes.

These days fetch() is preferred for its cleaner syntax and modern features.

<br>

Read the detailed answer on GreatFrontEnd which allows progress tracking, contains more code samples, and useful resources.