What is an API, JSON, REST, AJAX

Joel Seng
Joel Seng
Sep 21, 2019 · 4 min read
API Doing Butlery Things

This article is a continuation of the series “What’s next after JavaScript” where I described my journey of self-learning software development and my goal to share this road-map with others that are on a similar quest. As I described in my last article, after completing a fundamentals course, I would often find myself asking, “so what’s next?” I would often start courses that were far too advanced because I thought I knew JavaScript. The recurring theme was that I kept starting courses that were either too basic or too advanced. Where was the next right step? Let’s jump right into where we left off.

To review the core of web application, the core of web programming can be summarized into three phases. In this post, we will be covering the definitions surrounding the last step on how we can communicate with a server. For a detailed explanation of the first two phrases of web programming. You can check out my previous article here.

The Core of Web Programming


What is an API

Application Programming Interface or API returns data in response to a request made by a client. An API is essentially an access point or endpoint that allows you to access a server’s database. You can think of it as essentially a doorman or butler standing at a door that you approach to ask questions. That butler will then go back into the manor and retrieve the information that you need. Not a perfect metaphor but you get the idea.

What is JSON

Extending our metaphor further, our butler spends some time looking around the entire manor returns after several microseconds with a response. IF the search was successful, he responds with a code of 200 and hands over JSON. JSON stands for JavaScript Object Notation and it represents data in JavaScript Object. JavaScript objects are stored as key/value pairs. That data can then be used to do essentially all the CRUD functionality of Creating, Reading, Updating, and Deleting within web applications. For further information on status, codes check out the MDN documentation here. Here’s what you can expect to see when you are returned a JSON response.

{
"name": "Luke Skywalker",
"height": "172",
"mass": "77",
"hair_color": "blond",
"skin_color": "fair",
"eye_color": "blue",
"birth_year": "19BBY",
"gender": "male",
"homeworld": "https://swapi.co/api/planets/1/",
"films": [
"https://swapi.co/api/films/2/",
"https://swapi.co/api/films/6/",
"https://swapi.co/api/films/3/",
"https://swapi.co/api/films/1/",
"https://swapi.co/api/films/7/"
],
"species": [
"https://swapi.co/api/species/1/"
],
"vehicles": [
"https://swapi.co/api/vehicles/14/",
"https://swapi.co/api/vehicles/30/"
],
"starships": [
"https://swapi.co/api/starships/12/",
"https://swapi.co/api/starships/22/"
],
"created": "2014-12-09T13:50:51.644000Z",
"edited": "2014-12-20T21:17:56.891000Z",
"url": "https://swapi.co/api/people/1/"
}

What is REST

Back to our interaction with the butler, you as the client approach the butler and your request has to be structured in a specific way that he understands. We interact with APIs through a set of URLs. Each URL defines a resource that we request or take action on. REpresentational State Transfer or REST is essentially an architectural design pattern to structure URLs. So for example, if you contact the butler that follows the REST convention that has access to a database of superheroes he understands 5 verbs.

What is AJAX

There was a time before AJAX when a request was made to the butler. The page needed to be refreshed to retrieve the information. AJAX provides a way to retrieve content from a database and display it without having to refresh the entire page. AJAX or also known as Asynchronous JavaScript and XML is a crucial part of a single page application.

An asynchronous request is best described as ordering food from a restaurant. A waiter/butler takes an order from a customer/client. The waiter then takes the order back to the kitchen. The database/chef takes his or her sweet time to prepare a delicious meal. In an asynchronous order, the waiter is not waiting at the kitchen window for the chef to complete making the food before taking it to the customer. That would be too inefficient. Instead, the waiter goes to take another order from another customer and when the chef rings the call bell that the food is ready. The waiter will then deliver the food to the customer.


Concluding Thoughts

Hopefully, these definitions help you to understand the big picture of the web application’s server-side interactions. Each section contains way more complexity and nuance than I have described and they all deserve fuller explanations. However, an in-depth exposition on each topic is outside of the scope of this series and I encourage you to use the ideas here as landmarks on your journey of understanding. In my next article, I will walk through an example of an AJAX call to an API.

Data Driven Investor

from confusion to clarity not insanity

Joel Seng

Written by

Joel Seng

Dabbles in Code. Reads documentation for fun and for work.

Data Driven Investor

from confusion to clarity not insanity

More From Medium

More from Data Driven Investor

More from Data Driven Investor

More from Data Driven Investor

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade