The Introduction :
As you probably know very well by now, the internet is made up of a bunch of interconnected computers called servers. When you are surfing the web and navigating between web pages, our browser requests information from any of these servers. The chart below explains explicitly on the request.
That is, our browser sends a request, waits for the server to respond to the request, and (once the server responds) processes the request. All of this is governed by protocols or rules which is a topic for another day.
Application Program Interface (API)
Now the Wikipedia definition of the API will tell you, an Application Programming Interface (API) is a set of subroutine definitions, protocols, and tools for building application software.
But in layman terms , in the context of the web, the API’s generally allow you to send commands to programs running on the servers that you connect to from your browser or with the browser itself. This allows you to access resources only available on the server. A common usage is of the authorization feature to login to websites.
1] Initialising object and sending request :
The above block initialised the xhr variable with the request. Now open is a method which takes three arguments to carry out the requests. It takes in GET( in this case) to specify it’s action, //ipinfo.io/json, for where it getting it from and true/false for executing the request asynchronously/synchronously. On a quick glance, up until now we have set the request prameters , but have not sent it yet,
2] Readystate and readystatechange
Now by the time we have actually sent requests to the browser, it’s important to know the state of the request. For this we use the the readystatechange. While this still can indicate on the status of the request, readystatechange event being tied to our XMLHttpRequest object’s readyState property makes it difficult to just parse the data soon afterwards. The readyState changes a 5 set value ranging from 0 to 4. The exact status is mentioned below in the tabular column.
So practically the readystatechange event is being fired 5 times, but in actuality we are only interested in the final state of the request ( 4- DONE) . Secondly the the Http status codes we all know about, for example
202 — Accepted ; 200 — OK ; and the most hideous 404 — Page not found (Bad request)
So even if our event state is an ideal “4”, we don’t want to return “empty” successful requests. We need the return of the content we requested to the server. Hence we write the following condition in our function
3. Parsing data and final end output
Now the request to the server has returned successfully with the data we have to parse into user readable text. So based on the data type we access we have to choose alter paths. For instance this current data is in the form of JSON.
Now we parse this particular JSON dataset to get the ip parameter alone for the purpose of this tutorial.
What this does is it initialises a new variable with the parsed return data and uses the variable to access parts of it.
So hope this helps, suggestions are welcome at email@example.com as always or drop a comment below. Until next time, bye!