Good question, I agree the instructions leave a bit to be desired. I struggled to understand this a lot last year when I was progressing beyond basic HTML.
JSON is a way to store data using key value pairs. In JavaScript you can store data in objects like this:
var person = {
firstName: "John",
lastName: "Doe"
}
JSON (JavaScript Object Notation, aptly named) allows you to store data the exact same way but in a file, such as person.json
. Since JSON is a type of text formatting, not JavaScript, it can be used with other programming languages and applications.
AJAX is a way of interacting with a web server from a web browser. AJAX is not required to communicate with a web server, but it is often the best way. It stands for Asynchronous JavaScript and XML. Before AJAX existed, the normal way to serve a webpage, was for the web server to get data from a database, render the HTML file on the server (using PHP), and then send the file to the web browser. When ever a user wanted to get data or send data to the server, such as by submitting a form, the server would have to re-render an entirely new page and re-send it to the browser, which would then automatically refresh. This obviously is not usually the best way, and when JavaScript came along, there needed to be a way to get data from the server asynchronously, or not waiting for the server to render a new page, send it, and refresh the page. AJAX lets the JavaScript on the web browser request data asynchronously from the web server, which then after the server retrieves the data, it will respond to the web client with either JSON or XML (an alternative text format to JSON, not used much anymore). Because this is asynchronous, it does not refresh the page, and the JavaScript can do whatever it wants once it gets the data using an approach such as a callback or promise.
An API is a tool for a client to get data from a server. Like AJAX, it is not required in making a functional website, but it often is easier. It should be clear the application of an API when asking for data from someone else’s project, but let’s take a look at using them internally. There are several types of patterns for building web servers. Two of the most common are the “monolithic architecture” and it’s opposite the “microservice architecture”. In monolithic architecture, which you may be more familiar with, there is one large server and one or possibly a few more large databases. When a web browser requests data, the web server gets data from the database, renders an HTML file, and sends the rendered file to the web browser. No api is needed in this basic context. In the microservice realm, there are usually several servers and databases that each perform a specific task. These servers are api’s because their job is to get data and send it to the browser. They aren’t concerned with rendering pages, etc. It is up to the browser to do what it wants with that data.
The patterns, idea, and principals can get extremely confusing. Monolithic is an older approach where usually one server does it all. Microservices are a newer approach with the Unix mindset that small is beautiful. Make one application to do one job very well. Example, for a note taking application. You have one API to handle user authentication. You have another API to actually get the posts and send them to the browser. SPA’s (single page applications) are also popular. The program consists of one page (duh) and gets the data it needs from API’s. React is a technology used a lot of times to build SPA’s. A cool thing about React is that it can do client and server side rendering. In monolithic architecture the server renders the page, while in a SPA the web client gets the data through an api and renders the page itself. React is cool in that it combines them, so that when the page is requested the server renders it, and then the page can render itself asyncronously using an API (in other words, it doesn’t have to refresh because it is using AJAX). I can’t go into depth about which to use, as I am still learning myself, just realize that when people are using API’s within their own project, they are most likely adopting microserivce architecutre, or building a SPA.
Hopefully that helps, it is definitly a complex and detailed part about programming. I suggest learning Node, as it is very easy to both build an api, or to build a server that renders the data directly to the page without using an api. Actually playing with it will help you understand a lot more than me ranting about what it is! 