Forem: Chinmay Agrawal

Make API Calls Using XMLHttpRequest : AJAX

Chinmay Agrawal — Wed, 19 Oct 2022 05:43:59 +0000

XMLHttpRequest object is used to send and receive data from server. In other words it is used to communicate to the server.

Today in this article we are going to know how to fetch data from the source(text file/JSON file/API) by making calls using xmlhttprequest object, and that too asynchronously. Yes this xmlhttprequest object make calls asynchronously means the user can do other task while this object is fetching data. So you will get the knowledge of what called AJAX i.e. Asynchronous JavaScript XML.

Disclaimer: This blog is specifically for absolute beginners. And also this should be noted that in today's modern era this method is not used too much to make api calls, instead more modern methods like fetch() or axios are used. But as a beginner, as i always recommend, your foundations should be clear. So by this article you will get the knowledge of fetching data from different sources, and after that you can apply this knowledge to study other modern methods.

🚀Setting up environment 🚀

Now first make folder structure like this:

So as of now we have 4 files in our folder and each file looks like this👇

In index.html file we will insert data in the h1 tag when button is clicked.
In script.js file we will write code for fetching data from various files using XMlHttpRequest.
data.txt and data.json are the source files from where we will fetch data.

So, now what we are going to do is, we will fetch data from the text & JSON files and display that data into the webpage. Also later in the blog we will also make API calls to GET & POST data.

To use XMLHttpRequest() object we need to follow the following 4 basic steps. We will follow these steps throughout this tutorial:

Make XMLHttpRequest() object.
Open file and specify request method.
Send request
Handle the response which we receive.

👨‍💻 Fetch Data from Text File

In the real world scenario we don't generally need to fetch data from the text files. But still I am explaining it here so that you will get the foundations clear of XMLHttpRequest object.
So you should pay attention to this section as in this we will discuss the basics of xmlhttprequest and how to use it.

// capture the button by using its id and add a eventlistner to it
document.getElementById("ajaxdata").addEventListener("click", getData)

//capture the element in which we will insert the data
let el = document.getElementById("head")

//function definition for our event handling
function getData(){
    console.log("button clicked")
    const xhr = new XMLHttpRequest(); // make object of XMLHttpRequest
    xhr.open('GET', 'data.txt')
    xhr.send();
    xhr.onload = () => {
        if(xhr.status === 200){
            el.innerText = xhr.response
        } else {
            console.log('no data received')
        }
    };
}

In the above code first we are creating object xhr of XMLHttpRequest() to do various operations on it. Now after creating object we will use this object to perform various operations.

Now to target the file from which we want to fetch the data(data.txt in our case). We have xhr.open() method to open a file. It takes two mandatory parameters

first one is method of request it can be 'GET', 'POST', 'PUT', 'DELETE', etc.
Second is the location of file from which we have to fetch data.

After targeting the file, we will send the request using xhr.send() method.

After sending request we will handle the response which we receive. For this we will use xhr.onload() method.
After receiving request first we will check the status of request that if the request is success or not with the help of xhr.status. If status contained 200 then we can proceed further otherwise we can return some error message.

Now if receive xhr.status == 200 then we can proceed with our received data. Now we just have to inject the received data into the html page. So the data which we receive from xhr object can be accessed by xhr.respone method.

If you know the little bit of JavaScript then this will be very easy task for you. You just have to add this line to the code
el.innerText = xhr.response.

Now save the files and open the index.html with live server(if you are using VScode). And click on the Get Data button. And Hurray!!!🚀🚀...you make your first http request

👨‍💻 Fetch Data from JSON File

So now as you know how to fetch data from text file, you can easily do the same for JSON files also with just tiny tweaks. Let me directly show you the code.

// capture the button by using its id and add a eventlistner to it
document.getElementById("ajaxdata").addEventListener("click", getData)

//capture the element in which we will insert the data
let el = document.getElementById("head")

//function definition for our event handling
function getData(){
    console.log("button clicked")
    const xhr = new XMLHttpRequest(); // make object of XMLHttpRequest
    xhr.open('GET', 'data.json')
    xhr.responseType = "json"
    xhr.send();
    xhr.onload = () => {
        if(xhr.status === 200){
            el.innerText = xhr.response.name
        } else {
            console.log('no data received')
        }
    };
}

In the above code we have changed the filename to data.json and also added this new line: xhr.responseType = "json"
The purpose of this line is to convey that the data which we are receiving should be converted from JSON to JavaScript object.

And now we can access the data as normally as we access the JS Object, by using the key of the data.

Now you can test the above code in browser and you will get the data in your webpage.

👨‍💻 Get Data from API

Now we are heading to the main Section of the Blog. We are going to make API calls. For the purpose of this tutorial we are going to use this fake API to GET the data https://jsonplaceholder.typicode.com/posts/1

This above API Link gives the following response:

{
  "userId": 1,
  "id": 1,
  "title": "sunt aut facere repellat provident occaecati excepturi optio reprehenderit",
  "body": "quia et suscipit\nsuscipit recusandae consequuntur expedita et cum\nreprehenderit molestiae ut ut quas totam\nnostrum rerum est autem sunt rem eveniet architecto"
}

As we know, how to fetch data from JSON file, it is going to be super easy for us to make API calls. So lets directly jump into the code.

// capture the button by using its id and add a eventlistner to it
document.getElementById("ajaxdata").addEventListener("click", getData)

//capture the element in which we will insert the data
let el = document.getElementById("head")

//function definition for our event handling
function getData(){
    console.log("button clicked")
    const xhr = new XMLHttpRequest(); // make object of XMLHttpRequest
    xhr.open('GET', 'https://jsonplaceholder.typicode.com/posts/1')
    xhr.responseType = "json"
    xhr.send();
    xhr.onload = () => {
        if(xhr.status === 200){
            el.innerText = xhr.response.body
        } else {
            console.log('no data received')
        }
    };
}

From the above code you can see that we just have minor changes like, instead of file name we have given the URL of API.
And we are using the received data according to our need(Here I am showing you to use only body value, and I hope you can use the other also according to your need).

Now you can test the above code in your browser.

👨‍💻 POST Data to API

Until now we studied how to get the data. But in real world application we also need to send some data to the server. So for this we need to make POST request to the API.
For this tutorial we are going to use this dummy API https://dummy.restapiexample.com/api/v1/create

This accepts data in the following format:

{"name":"geek","salary":"404","age":"23"}

And in success response we get:

{
    "status": "success",
    "data": {
        "name": "test",
        "salary": "123",
        "age": "23",
        "id": 25
    }
}

So we will POST the data to the API. So without wasting any further time let directly jump into the code.

// capture the button by using its id and add a eventlistner to it
document.getElementById("ajaxdata").addEventListener("click", getData)

//capture the element in which we will insert the data
let el = document.getElementById("head")

//function definition for our event handling
function getData(){
    console.log("button clicked")
    const xhr = new XMLHttpRequest(); // make object of XMLHttpRequest
    xhr.open('POST', 'https://dummy.restapiexample.com/api/v1/create')
    xhr.responseType = "json"
    mydata = '{"name":"test","salary":"123","age":"23"}'
    xhr.send(mydata);
    xhr.onload = () => {
        if(xhr.status === 200){
            el.innerText = xhr.response.status
        } else {
            console.log('no response received')
        }
    };
}

Here we have a variable mydata which contains the data which we want to send. And we are passing this variable in xhr. send() method. So that when making the request we can sent the data also.

When you run the above code you will get the success message displayed in browser. Which shows the data is saved into your browser.
Also one thing to noted is that in the given example we are manually sending data, but in real world scenarios the data generally comes from the form so with little bit of JavaScript you can easily do that too.

👨‍💻 Conclusion

We have covered all the primary topics in the blog that are needed to work with XMLHttpRequest() These are enough for you to get started with world of AJAX. You know how to:

Get the data from text file.
Get the data from JSON file.
Get the data from API.
Post the data to API.

But remember, this XMLHttpRequest is slowly loosing its popularity. As we have now more modern methods to make API calls such as fetch() or axios. If you want me to write articles on modern methods then tell me in comment section. I will write the blog on it.

Build Cross Platform Applications without having a high-spec Laptop/Computer using Flutter & Flutlab

Chinmay Agrawal — Tue, 25 May 2021 12:24:32 +0000

For Whom this blog is for?

If you want to build cross-platform applications using Flutter, but you don't have a good laptop/computer which can run the heavy softwares like Android Studio & can't handle the dependencies like flutter SDK, dart SDK, emulator etc.(which also requires the huge amount of disk space and up-to-date OS) OR your machine is running out of space, OR you just want to try the flutter, then this blog is for you.

What do you need ?

All you need is just:-

Laptop in working condition(No system requirements, any laptop will work fine).
A browser like Chrome, Firefox, Safari or whichever you like.
Internet Connection.

Yes,that's it. You really do not need anything apart from that.

Okay, So now enough of talking, Now Let's start ..!!

Introducing Flutlab

Let me introduce you with the website by which you can do your complete application development without installing a single software on your machine.

And the name of website is flutlab.io

Flutlab is an online IDE designed to build cross-platform applications using flutter. Complete process from writing the code to running it in the emulator is going to be done in the cloud, and you will get the experience like you are developing an application in your local machine. And bonus is that it is free, you can go for paid plans if you need.

Let's Get Started...

Now we are going to cover this section in 4 sub sections:-

Step 1: Setting up Environment

First go to flutlab.io
At first our homepage will look like this.
If you want to just try it out you can simply just click on the get started button, but it will not save your work for future use.
If you want to save your work for future use and want to build real world applications then you have to create a free account by clicking on the sign in button.
As of now you don’t have an account so let's create one by clicking the sign up button.
Now fill up the form fields and complete your account verification process.
Now after verification you have to login to your account again and after successful login you will see this kind of page.

Note - As you can see you can make upto 2 projects and you are provided with 250mb. It is more than enough for learning purpose and make basic applications.

Step 2: Building our First Project

Now let's create our first application by clicking the new
project button.
Now first you have to select the default codebase from the dropdown menu for your project. For now, to keep this simple, we are going to select the StateLess Hello World.
Now you have to give a name to your project. And Click Create button.
Note- For now you can leave the package field blank.
Now after successful creation of a project you have to open it by clicking on it.

Step 3: Modify Our Project

Now when you open the project for the first time, you will see the screen like this. Now you will notice that, interface is pretty much familiar with the VScode.
Now just remove all the code which is written in the main.dart file and type the code which is given below.

import 'package:flutter/material.dart';

void main() {
  runApp(
    Text(
      "Hello Flutter",
      textDirection: TextDirection.ltr,
    ),
  );
}

Note- We can also move further with the default code, but i want to show you something important, that's why I also highly recommend you to type the code which is given above(yes not even copy/paste, you should type it).

Now while typing the code you may notice that there are no or very less typing suggestions, also there is no bug highlight and context action, which is useful for every developer's productivity and to write code more smoothly.(This is the thing which i want't to show you, so now let's fix it).
So to fix it you first have to click on the setting icon on the left most side of the screen.
Now go to the analyzer section and toggle the analyzer 2.0 button to turn it on. After that close the settings dialog box.
You will notice that as soon as you turn on the analyzer, it will start analyzing the code and within 5 minutes it will start giving more helpful code suggestions, immediate code highlighting, etc. as soon you start typing. You will feel like you are doing coding in Android Studio or VScode.

Step 4: Running our Application

We are almost done, now only building and running our project is left.
For that first you have to hover on the play icon.
As soon as you hover on this, it will expand and show you the
different options for building projects. Each has their own purpose, but for now leave it as it is and click on that icon.
Now after clicking you will have a prompt like this. At this point you have to sit back and keep calm and would have to wait
Now after a successful build you will be able to see the emulator like this.

Hurray..!! You have built your first application.
Congratulations!!

Now the last but important step.
As you notice for the first time when you run an application, you have to run the build. But after that you don't need to re-build the application again & again. You can just hot reload it.
Let's change the text of the Text() Widget. And hot reload it by clicking the hot reload button.
It will display the changes accordingly, And you will experience the hotness of Flutter.

Other Special Features of Flutlab

Flutlab is not only limited to just writing code and running on emulators, it is more than that. Some of its special features are listed below:-

VCS integration: Yes, you can also integrate the github/bitbucket/gitlab account to Flutlab IDE, and can perform various operations like creating a repository, commit, checkout, etc. You can even clone a repository from VCS directly into your flutlab account.
Figma to Flutter: If you are a UI designer then I am sure you heard about figma. You can convert your figma designs to Flutter using flutlab.
Firebase: If your app needs to store some data of your users, then you can integrate your app with the Firebase.
Emulators: You can test your app on various sizes of screens right from the FLutlab emulator only, you don't need to go anywhere.
App on mobile: You can also generate apk of your app to test on real devices. FLutlab also has an app by which you can directly test your apps on your device.

There are many other Features of FLutlab, but I can't explain each of them in this article. If you want to know more about features and want me to write articles, then you can ask for them in the comments section.