Using XMLHttpRequest in Modern JavaScript

Learn how to use XMLHttpRequest to send and receive HTTP requests in JavaScript. This guide covers setup, request methods, response handling, and practical examples for AJAX-style communication.

In the Browser (Dev Tools)
Most modern browsers let you throttle network speed:
Chrome / Edge / Firefox
1. Open DevTools (F12 or right-click → Inspect).
2. Go to the Network tab.
3. Find the Throttling dropdown (usually top-left).
4. Choose a preset like:
• Slow 3G
• Fast 3G
• Or create a custom profile
This affects all network requests, including XMLHttpRequest, fetch and image loads.

At the time of writing these examples are not working well in web containers, the onprogress events are not firing. The code can be downloaded and run locally to see them working, the files are editable and runnable.

demo
upload-server.js
xhr-upload.html
download-server.js
xhr-download.html
files
xhr-upload.html
upload-server.js
xhr-download.html
download-server.js