Before the Fetch API became standard, nearly all browser-based requests for data were made with XMLHttpRequest, usually shortened to XHR. It is a built-in browser object that lets JavaScript ask a server for a resource — often a JSON file or an API endpoint — without reloading the page. You create an XHR object, open it with an HTTP method and a URL, attach a handler that runs when the response arrives, and then send the request. Because the response arrives as text, you still need JSON.parse() to turn it into a usable JavaScript object or array.
XHR matters in this course for two reasons. First, you will encounter it constantly in existing codebases, tutorials, and older libraries, so you need to be able to read and maintain it. Second, comparing XHR to Fetch sharpens your understanding of what Fetch actually gives you: promises and async/await instead of event handlers and readyState checks, cleaner chaining, and a more predictable structure. Knowing both lets you make an informed choice rather than copying whatever you saw first.
As you watch the videos below, pay attention to the order of the steps (create, open, set a handler, send), to where the response text is converted into an object, and to how status codes and network failures are checked. Notice also how the same task looks when written with Fetch, and keep a short list of the differences you spot — you will need that comparison later in the module.
A short, example-driven walkthrough of making HTTP requests in JavaScript using both XMLHttpRequest and the Fetch API, demonstrated inside Visual Studio Code. Based on its title and description, it is likely to show creating and opening an XHR object, sending it, reading the response, and then writing the equivalent request with fetch(). The code is previewed live, so you can see the request and its response side by side.
It covers the core mechanics of XHR and places them next to Fetch in a single short lesson, which directly serves both the request-handling and the XHR-versus-Fetch comparison subtopics. At under seven minutes it is an efficient first pass that you can pause and retype in your own editor.
The same lesson presented in TypeScript, walking through the Fetch API and XMLHttpRequest with typed code in Visual Studio Code. Expect the same request lifecycle — constructing the XHR object, opening a URL, handling the response event, and sending — with the addition of type annotations on the request and response values. It serves as a useful second look at the pattern from a slightly different angle.
Seeing the identical request pattern expressed with explicit types reinforces what each piece of an XHR call actually is — an object, a string URL, a text response — which helps when you parse the response into real data. It also previews how these APIs appear in typed, production-style codebases.
These two videos support MO3 and MO4 most directly: they demonstrate retrieving data from an external source with XMLHttpRequest, handling the response when it arrives, and then show the Fetch equivalent so you can weigh event-handler-based legacy code against modern promise-based syntax. Because an XHR response arrives as text, the step where it is converted into a usable object also reinforces MO2 and the JSON.parse() distinction. They are a starting point rather than full coverage — you will still need the module readings and practice work for detailed error handling, HTTP status checking, and the DOM rendering required by MO1 and MO5.
These videos were chosen from YouTube on October 3, 2026. Each has captions; the player turns them on. Videos on YouTube can be changed or removed — if one no longer plays, tell your instructor. If a player does not appear, use its Watch on YouTube link.