API Example

Application Programming Interface

API Example

This post is going to show the usage of a API with a simple example, if you want to know about API read this article first " Application Programming Interface. "

First of all let us understand how a simple API works.

Let us consider a web API. The API is the middleman between your application and the web server providing the API, The API call is the request that your application will be sending.

Usually for a web based API the simplest request is usually a URL where you can either simply request the URL or send some values along with the API.

For example there is a site https://dog.ceo/ which provides an API to fetch a dog image.

The simplest request that you can send to the API is by calling the URL https://dog.ceo/api/breeds/image/random

You can look up the further documentation to get different results and other types calls that you can send.

An API will generally respond to your request in either XML format or JSON format, here the above API sends back the response in JSON format.

i.e.

{
   "message": "https://images.dog.ceo/breeds/frise-bichon/6.jpg",
   "status": "success"
}

Here in JSON format we receive two values

1 ) message – containing the URL to image
2) status – giving result whether the request was successful or not.

Based on these two values you can display the image by different methods using AJAX, JavaScript, PHP etc.

The following example uses an AJAX call to the above API to display a random image of dog fetched from the API.

<html>
  <head>
     <meta content = "text/html; charset = ISO-8859-1" http-equiv = "content-type">
     <script type = "application/javascript">
        function loadJSON() 
        {  
           var json_data = "https://dog.ceo/api/breeds/image/random";
           try{
              http_request = new XMLHttpRequest();
           }
            catch (e) {
                    alert("Your browser has some problems");
                    return false; }
 
            http_request.onreadystatechange = function()
            {
              if (http_request.readyState == 4  ) {
                var jsonObj = JSON.parse(http_request.responseText);
                alert(http_request.responseText)
                 if (jsonObj.status == "success")
                 {  document.getElementById("myimage").src = jsonObj.message; }
              }
           }
            http_request.open("GET", json_data, true);
            http_request.send();
        }
     </script>
     <title>AJAX and JSON via API</title>
  </head>
  <body>
   <div align="center" id="update">
     <h1>Get details</h1>
     <img id="myimage" src="" alt="Image displays here">
     <br><br>
        <button type = "button" onclick = "loadJSON()">Show Image</button>
    <br><br>
    </div>
  </body>
</html>

That it the above is a simple example showing usage of an API via AJAX. Here we are simply putting a Get request. API support many different which could be GET, POST, PUT, PATCH, and DELETE.

That discussion in another post.

Main category

API