Search code examples
javascriptajaxxmlhttprequestfetch-api

Difference between fetch, ajax, and xhr

What is the difference between these 3 calling methods? I'm using fetch in my current project and don't see any real difference between them. Why does there need to be 30 different ways to do things in javascript XD.

Thanks.

Solution

  • Ajax is a buzzword meaning "Making an HTTP request from JavaScript without leaving the page".

    XMLHttpRequest and fetch are APIs, provided by browsers, which allow HTTP requests to be made from JavaScript.

    XMLHttpRequest has been around since the 90s and is event-driven, requiring that you bind event listeners to detect when data has arrived.

    fetch is newer and built around Promises, which are now the prefered way to do asynchronous operations in JavaScript. It is sufficiently well established to be supported everywhere significant except in Internet Explorer. It does, however, lack certain features (such as progress monitoring) that XMLHttpRequest provides.

    So in short, there are two (not 30) purpose-built ways to do Ajax, and one of them is modern.

    For practical introductions on how to use either of them, MDN has you covered:

    There are also various libraries which wrap around fetch or XMLHttpRequest to provide APIs which are situationally more convenient (e.g. a consistent API between Node.js and browsers or integration with a framework like Angular).