JAVASCRIPT : AJAX AND FETCH

INTRODUCTION:-

AJAX

AJAX is a technique for sending or requesting data without have to perform a page load. If you have ever used a single-page application like Gmail and Google Maps, this is how you are able to go through your inbox and navigate through the map without changing the page you are 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 experiences.

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.

<dog>  <name>Rishi</name>  <age>10</age>  <weight>30</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 and XMLhttpRequest, we will be using the modern fetch instead.

We will be using JSONplaceholder as the source of the information, and get their posts. If you were to click here, you will see the data that we are going to try and fetch.

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

// base urllet base = '<u>https://jsonplaceholder.typicode.com</u>';//use fetch on the /posts route, then pass the response alongfetch(base + "/posts").then(function(response){      // with the response, convert it to JSON, then pass it along      response.json().then(function(response){           //print that JSON           console.log(json);     });});

Transferring JSON via AJAX from a server is not 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.

Follow for more.