Jitesh Chawla

Complete Guide to Retrieve data using AJAX

Jitesh Chawla's photo
Jitesh Chawla
·

4 min read

Ajax is a Web development technique which helps to create the asynchronous web application. It is mainly use to send and retrieve data from the server asynchronously without interfering with the display of the page.

In this Article, we will learn how to retrieve data from: 1)Local Sample.txt File 2)Local JSON File 3)External API

1) Local Sample.txt File

In this, we will retrieve the data from the local sample file. Here the method is GET and we will be using XMLHttpRequest to execute the function

XMLHttpRequest means to request data from the server here server is sample.txt

document.getElementById('button').addEventListener('click',loadText);

        function loadText(){


            // Create a XHR Object
            var xhr = new XMLHttpRequest();
            // OPEN - type, url/file, async
            xhr.open('GET','sample.txt',true);

            xhr.onload = function(){         
                if(this.status == 200){
                    console.log(this.responseText);
                    document.getElementById('text').innerHTML = this.responseText;
                }
                else if(this.status == 404){
                    document.getElementById('text').innerHTML = "Not Found";

                }
            }

        xhr.send();

2) Local JSON File In this, we will be retrieving data from the Local JSON File 'Users.json'. As we are retrieving the data, we will be using the GET Method.

document.getElementById('button1').addEventListener('click',loadUsers);
function loadUsers(){
            var xhr = new XMLHttpRequest;
            xhr.open('GET','users.json',true);
            xhr.onload = function(){
                if(this.status == 200){

                    var users = JSON.parse(this.responseText);

                    var output = '';
                    for(var i in users){
                        output += '<ul>'+ '<li> ID: ' + users[i].id + '</li>'+
                        '<li> NAME: ' + users[i].name + '</li>'+'<li> EMAIL: ' 
                        + users[i].email + '</li>'+
                        '</ul>'; 
                    }

                    document.getElementById('users').innerHTML = output;
                }
            }

            xhr.send();

        }

In the loop in which we are printing the users, id, and email, we can also use ES6 class by using ``. Using ES6 class is much better to approach as code is cleaner but You should know both ES5 and ES6.

3) External Api In this, we are using external API by Github link is => api.github.com/users

document.getElementById('button1').addEventListener('click',loadUsers);
        //Load Github Users
        function loadUsers(){
            var xhr = new XMLHttpRequest;
            xhr.open('GET','https://api.github.com/users',true);
            xhr.onload = function(){
                if(this.status == 200)
                {
                    var users = JSON.parse(this.responseText);
                    var output = '';
                    for(var i in users)
                    {
                        output += '<div class="user">' +
                       '<img src = "'+users[i].avatar_url+'" widht = "70" height = "70">' + 
                       '<ul>' + '<li> ID: '+users[i].id+'</li>'+
                       '<li> LOGIN: '+users[i].login+'</li>'+'</ul>'+'</div>';
                    }
                    document.getElementById('users').innerHTML = output;
                }
            }
            xhr.send();
        }

Here in this API, we are retrieving the image,userid, and login email of the user so we can use CSS to style the output from the external API(Optional)

So We have learned how to retrieve data from the server using ajax.

If you like the article share it with fellow developers and I will see you with the next one.

Ajax