AJAX and Fetch: Retrieving Data

AJAX and Fetch: Retrieving Data


AJAX is a technique for sending or requesting data without have to perform a page load. If you've ever used a single-page application like Gmail and Google Maps, this is how you're able to go through your inbox and navigate through the map without changing the page you're on.

AJAX stands for Asynchronous JavaScript and XML. Asynchronous code is code that runs in parallel with something else, so in this case, you can request or send data without affecting your browsing experience.


XML, standing for eXtensible Markup Language, is similar to HTML but is used for data transfer, just like JSON. The only problem is that XML is typically heavily, harder to read and doesn't integrate as gracefully as JSON does with JavaScript.

Here's an example of some XML:


Because of XML's downsides, AJAX, originally created to be used in conjunction with XML, is now more popularly used with JSON instead.

Making AJAX Calls with Fetch

Instead of making AJAX calls using the original method, via an XMLHttpRequest, we'll be using the more modern fetch instead.

We'll be using JSONPlaceholder as the source of the information, and get their posts. If you were to click here, you'll see the data that we're going to try and fetch.

    // base url
    const base = 'https://jsonplaceholder.typicode.com';

    // use fetch on the /posts route, then pass the response along
    fetch(base + "/posts").then(function(response) {
        // with the response, convert it to JSON, then pass it along
        response.json().then(function(json) {
            // print that JSON
The result of using fetch.
The result of using fetch.

With that data, you can then do whatever it is that you'd like with it. You can add it to the page, perform calculations on it, or pretty much anything.

Transferring JSON via AJAX from a server isn't the only way you can provide your website with the data it needs to function. You can take advantage of client-sided methods of storing information, like cookies.