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 TypeScript
- Getting Started with Solid
- Git Tutorial: Learn how to use Version Control
- How to Serve Static Files with Nginx and Docker
- How to deploy a .NET app using Docker
- Getting Started with Deno
- How to deploy a MySQL Server using Docker
- How to deploy a Node app using Docker
- Getting Started with Sass
- Build a Real-Time Chat App with Node, Express, and Socket.io
- Getting User Location using JavaScript's Geolocation API
- Setting Up Stylus CSS Preprocessor