Using AJAX with vanilla JavaScript to get Data from External API.

4 min readAug 22, 2020

The first time I heard about API,it seemed to me like something complex so I never bothered to learn about it . Recently,I had to work on an external API and I can say I love the experience, my mind which has been programmed to think API concept will be complex made working with API seem difficult at first,but after going through it again,it became easier to understand.

In this post,I will be writing on how to use AJAX to call external API. This article is for people like me that believe API concept is somewhat difficult to grasp,also for myself so that I can always fall back to this to refresh my understanding of the topic.

API
API (Application Programming Interfaces) are programming features that allow developers to create complex functionality more easily. API is like a messenger that helps you get something from another website or browser which can be used in your program or website.

Think of API this way: you want to get something(let’s say money 😄) from your father,so you tell your mother to help you collect it from him and give it to you. In this sense,your mother is the API.You are where you are(probably in your room) and your father is where he is(probably his room),your mother delivers your message to him then bring the money back to you without you leaving your room. This is how API works.

Many APIs are available for use in client-side JavaScript,we have the Browser APIs and Third party APIs . Browser APIs are built into web browser to get data from browser and surrounding computer environment,which can useful for complex things,examples of browser APIs include the DOM API,Geolocation API. Third party APIs’ code and information have to be retrieved from somewhere on the web because they are not built into the web browser by default,third-party APIs include twitter,google API.

AJAX

AJAX (Asynchronous JavaScript And XML) is a set of web technologies that enables web applications to send and retrieve data from a server asynchronously without interfering with the behavior of the current page.

How AJAX Works
A request is made to a server from a client,the URL is provided which makes a common request to the server and the server sends a common response back. With AJAX, we get to make the requests asynchronously without going to another page or having to reload the entire page. Some kind of API call has to be made which can be done with plain JavaScript or with some kind of library like jQuery,HTTP library etc.

XMLHttpRequest (XHR) Object
XHR object is the keystone of AJAX, it is responsible for the exchange of data with a server behind the scenes. XHR object is an API in form of an object provided by the browser’s JavaScript environment. It can be used with other protocols aside HTTP and can also work with data other than XML.

Making AJAX calls with plain Javascript to get data from External API
To get started with external API, you have to; get an API key (it might be free or you might have to pay for it),a URL which will be provided,then you can make your request and get your result.The results or data of external APIs are mostly in JSON.

Making AJAX Calls
- You should have your HTML file,your JavaScript file

<html>
<head>
   <script src = 'script.js' async></script></head>
<body>
   <h1> Trying to make an AJAX call with JS to get data from an external API
   </h1>
   <p> Click on the button below to view the result </p>
   <button> Click Here </button>
   <p id='para></p></body>
</html>
<!-- This is your html file -->

The AJAX request code is written in the script.js file. Since it is the button tag in the html file that will display the data gotten, it will be accessed by JavaScript using DOM manipulation. Add an event listener to the button element,you them make the request in the function.
In the event listener function,create XHR object,then write another function (this is for the object created) called OPEN which takes 3 parameters; type of request,URL (the url provided by the API), async(this will be true or false).
You then write another function (also for the xhr object),this is the function called when an XHR transaction completes successfully.

Amother function which will send the request is then written

let button= document.getEementByTagName('button');
button.addEventListener('click',getData);
function getData(){    // create XHR object
     let xml = new XMLHttpRequest();
    // the function with the 3 parameters
      xml.open('GET',' The provided URL with your API key',true );
      // the function called when an xhr transaction is completed
        xml.onload  = function(){
        if(this.status ==200){
                document.getElementById('para').innerHTML=this.responseText;}}
   // the function that sends the request
   xml.send();  }

The open,onload and send functions are inbuilt functions of the XHR object.
HTTP request has different status codes, 200 means the response is successful,hence why I used it. You can check other HTTP status codes and also some other inbuilt functions of the XHR object which you can use. this.responseText is the result gotten from the API call,it might be returned in JSON format so you might to parse it if you want it in strings.

Making AJAX calls can be sort of of confusing at first,but once you try it you will understand it better. However,fetch API is a very good way of getting data from API,it is easier and the code is shorter. I am already learning the fetch API and hopefully,I will write an article on it.

Using AJAX with vanilla JavaScript to get Data from External API.

Written by Munirat Olayiwola