This content originally appeared on DEV Community 👩‍💻👨‍💻 and was authored by Prerna02
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 url
let base = '<u>https://jsonplaceholder.typicode.com</u>';
//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(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.
This content originally appeared on DEV Community 👩‍💻👨‍💻 and was authored by Prerna02
Prerna02 | Sciencx (2023-01-29T17:57:44+00:00) JAVASCRIPT : AJAX AND FETCH. Retrieved from https://www.scien.cx/2023/01/29/javascript-ajax-and-fetch/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.