AJAX and Fetch

AJAX

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

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:

XML
<dog>
    <name>Sophie</name>
    <age>3</age>
    <weight>20</weight>
</dog>

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.

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

// use fetch on the /posts route, then pass the response along
fetch(base + "/posts").then(response => {
    // with the response, convert it to JSON, then pass it along
    response.json().then(json => {
        // print that JSON
        console.log(json);
    });
});

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.

Resources

• AJAX - MDN Web Docs
• Fetch - MDN Web Docs

• Support Us
• Discord
• Share
• Post
• Share