AJAX and Fetch explained in simple words

Dmitry Polyakov — Mon, 18 Nov 2019 02:33:55 +0000

In this article I'd like to share with you 2 simple templates that will help you grab data from servers

They are copy-paste ready-to-use templates. Some changes need to be done depending on how you want to use received data. In my examples I explain basic principles of retrieving data from servers just logging it to a console. Everything is explained with simple terms and words.

All data is stored on servers in JSON format. They are always objects consisting of strings.

The URL with JSON data that I'm using for my examples is: https://jsonplaceholder.typicode.com/users

AJAX / XMLHttpRequest

This code sends a GET request to a server. It means that we just receive some data from a server without sending anything back and not modifying any data stored on a server

On line 1 we save a URL which we are sending our request to.
On line 2 we create a new XMLHttpRequest and give it a name 'xhr'.
On lines 10-11 we open and send our request to a server.

Inside the function on lines 4-9 we write everything that we want to do with the data that we receive from a server.

Data is returned from a server as a JSON object. All data inside JSON objects is always a string. To be able to use this data we need to convert it into a JavaScript object using JSON.parse() method. We do that on line 6 and save it into a variable 'res'. Now the data stored in the 'res' variable is an array of JavaScript objects represented by key:value pairs. Each of the objects in our array looks like this:

After that we use map() method and a callback function passed in inside map() to iterate over each object inside an array stored in a 'res' variable and grab data that we need.

The callback function in our case is an arrow function. It's parameter 'item' represents each individual object.

As we could see in the picture above each object has multiple keys ('address', 'company', 'email', etc). By appending key names to our parameter 'item' we are able to access corresponding values.

In our example on line 7 we access the key 'name' and log its values from all the objects to a console (item => console.log(item.name)). The result will be the names from all the object logged to a console one after the other.

Fetch

When we send a request to a server using fetch() method we receive a JSON object and save it in a variable 'res'. You can give a variable any name you like. Make sure that you don't put semicolon after fetch().

On the next line we append a .then() method to our fetch() request. .then() method grasps data returned on the previous step, does something new with it and returns the result. To handle this returned data we pass in a callback function inside .then(). In our first .then() we convert JSON object into JavaScript object (res => res.json()).

After that we append another .then(). The second .then() grasps the data returned by the previous .then(), which is an array of JavaScript objects, iterates over all objects and logs all the name to a console.

The final result in a console will be absolutely identical to what we saw when we sent a AJAX/XMLHttpRequest above.

How to fix a footer at the bottom of the page

Dmitry Polyakov — Mon, 30 Sep 2019 03:34:12 +0000

I believe all beginning developers at some point come across this problem while building web pages. Sometimes you have too little content on your page, then your footer ‘jumps up’ and follows the rest of the content somewhere in the center of a page. See picture below.

I’ll share with you an easy way how to fix that step by step.

Markup of the page is very simple. Inside the body we have a main section and a footer. The main section contains a heading and a paragraph with some lorem ipsum text to fill in some space. As we can see the footer is in the middle of the page.

If you want you footer to be attached to the bottom of the screen and you are not going to change its content a lot you can give it a fixed height. My footer is 35px high. Basic styling is below.

We need just 3 lines of code to force it to the bottom of the page.

To do that we need to give our footer a position of fixed, this will take it out of the normal flow of the document. After that we can place it anywhere on the page, in our case we change its position to 0px from the bottom and 0px from the left.

Now our footer is attached to the bottom of the page.

We might think we are done now. Not yet…

As we add more content onto the page we get into trouble. In our case I’ll add more lorem ipsum text so that it reaches the bottom. As we do that we find out that we don’t see the end of the lorem ipsum text. The footer is overlapping it. Even if you scroll to the very bottom of the page some part of the text is covered by the footer.

This can be fixed with one line of code.

We know that our footer is 35px high. It means that to be able see all the content of the section that goes before the footer we need to move the bottom of that section up by 35px. We can do that by giving our main section a margin-bottom of 35px. This way the bottom edge of our main section and the top edge of the footer are not overlapping any more, they are now attached to each other, and the content is not covered by the footer.

This is my first article that I wrote with the intention to help beginning developers to find easy solutions to common issues that 100% of beginners face.

Hopefully I’ll help you make your life easier.

DEV Community: Dmitry Polyakov

AJAX and Fetch explained in simple words

In this article I'd like to share with you 2 simple templates that will help you grab data from servers

AJAX / XMLHttpRequest

Fetch

How to fix a footer at the bottom of the page