As someone who is new to software engineering there have been topics thrown at me left and right. While some of them are easier than others to understand, there was a particular topic that peaked my interest and that is the way JSON and servers communicate with one another. Before that I think some background information on how the internet works could help digest the information a little easier.
JSON
JavaScript Object Notation (JSON) is a type of data-interchange format used by many different coding languages including JavaScript. JSON is used as a medium of communication between a client and a server, which you can then use transport or store data between the two. An advantage JSON has over other data formats is the way its data is stored. The data is stored as text based data which is then arranged similarly as an object, or array.
Fetch/Get
There will be times when we want to retrieve data from other servers/databases using JSON. We can do this through a Get request.
When we want to retrieve data we start with the fetch function, fetch("_____"). Where we pass an argument which contains the source or source path of the information we want to obtain.
During this step a response comes back as a promise and we then pass it to our .then() function which converts it to a JSON format, or a format we can work with. In order to then pass this converted data to our next .then function however we have to return such data. If we are using arrow notation we don't have to physically type return as it is implied with arrow notation.
We then follow up with a second .then() function, that allows us receive the returned data and pass to a function where we can now work with the data.
Errors and catch:
There will be times where you will run into errors (shoker), If something goes wrong and json fails to retrieve data, we wouldn't know immediately, or at least where the error could be coming from. For this we add the catch function to give us a hint as to what could be the source of the error.
Get
Unlike fetch which only retrieves data, post on the other hand allows us to update our database with new data. While fetch only required us to have the path to our desired data as an argument, for POST and the following HTTP verbs we need to pass a second argument in the form of an object.
This object must include three components, the method, a header, and a body. The header for this case would be "POST" as we are posting data on to our database. There are more verbs that do different things but that will be later on.
The header key contains the "content type" we are sending which in our case is in the json format, and the type of information we will accept, which is also in json format.
The body key is where we add the data that we want to pass to the server. JSON however will only store text-based data so we convert any data we are passing as objects into strings. We do that through the stringify method. The data is passed and returns as a string which is then ready to be sent. All together this looks like this:
With the next couple of methods, the structure will remain relatively the same, the biggest change would be the verb we use as the method.
Put
The put request method is structured similar, but instead of of posting or adding something to the database, it instead updates an already existing set of data. In the fetch data path, an identifier is needed to access the specific data set you want to update. Most likely will be the id of the data set you want to update. The method type would change to put, and the the data you wish to add would then go in the stringify function.
DELETE
The delete request method simply deletes the specified data in the database. Again we alter the endpoint of our fetch request and change the method type to DELETE. In this case we do not need a body as we are not sending any data but instead sending a request to delete the specified data.
HEAD
This method is very similar to get/fetch except it does not require a response. This method is mainly used to to obtain meta-information without transferring actual data. Such as testing hyperlinks.
Trace
Trace is used to receive trace calls or signals that report how long a certain action is taking. This is done by looping a certain action which in turn return a trace call with data that can then be used for debugging or improving certain aspects of a program.
Options
Options is straightforward and describes the communication options for the target source. How one can access/use resources and what methods one can use to access them.
Connect
This method allows for a two way communication between the the server and the client.
Communication between servers can be tricky to understand at first, but the more you learn about it the more fascinated you become. I've used a computer for almost my entire life and never thought I'd understand how computers and servers communicate. I know it's not the entire puzzle but knowing how a small piece works is intriguing and only makes me look forward to learning more about software engineering.
Sources:
https://www.oracle.com/technical-resources/articles/java/json.html
https://www.pragmaticapi.com/blog/2013/02/14/restful-patterns-for-the-head-verb/
https://developer.mozilla.org/en-US/docs/Web/HTML/Element
Top comments (0)