JavaScript Fundamentals: Fetching Data from a server

In this article, we’ll be looking at how we can go about retrieving data from a server. Modern websites and applications need to be able to do this seamlessly — that is, update sections of a web page without needing to reload the entire page. We’ll be looking at two technologies that make this possible: XMLHttpRequest and the Fetch API.

This article continues on from my previous: Understanding APIs. If you’re new to working with APIs, be sure to check it out first!

🤓 Want to stay up to date with web dev?
🚀 Want the latest news delivered right to your inbox?
🎉 Join a growing community of designers & developers!

Subscribe to my newsletter here → https://easeout.eo.page

The old way..

Page loading on the web using old methods was quite simple — you would send a request for a website to a server, and if nothing went wrong, any assets that made up the page would be downloaded and displayed on your computer or device.

This was the way websites worked for years. However it had a number of flaws.. whenever you wanted to update any part of the page, for example, to display a new set of products or submit a form, the entire page had to load again. This practice is very resource heavy and results in a poor UX, especially as pages grow and become more complex.

The solution: AJAX

This problem was resolved as technologies were created that allowed web pages to request small chunks of data (such as HTML, XML, JSON, or plain text) and display them only when needed.

This is achieved by using APIs like XMLHttpRequest or the Fetch API. These technologies allow web pages to directly handle making HTTP requests for specific resources available on a server and formatting the resulting data as needed before it is displayed.

This technique is what is called “Ajax”, or Asynchronous JavaScript and XML. Originally it mainly used XMLHttpRequest to request XML data (hence the “and XML”). However, these days you'd be more likely to use XMLHttpRequest or Fetch to request JSON — but the result is still the same so the term "Ajax" stuck.