AJAX and Fetch
Table of Contents
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
- Getting Started with Svelte
- Create an RSS Reader in Node
- Git Tutorial: Learn how to use Version Control
- How to Set Up Cron Jobs in Linux
- Best Visual Studio Code Extensions for 2022
- How to deploy a PHP app using Docker
- Getting Started with Deno
- How to deploy a Node app using Docker
- Using Puppeteer and Jest for End-to-End Testing
- Getting User Location using JavaScript's Geolocation API
- Building a Real-Time Note-Taking App with Vue and Firebase
- Getting Started with Moon.js