When I speak about technologies pertaining to web development, with people who have worked on web earlier and as well as people who are new to web development; the challenge at times is to ramp them up on the fundamentals of web, specifically the things that happen behind the scene between your browser and the sites server. This post is going to talk something of that sort.
You don’t have to be a technologist to understand this article, I will try to explain it in the simplest terms.
I wanted to call the scope out because there are many more topics. This is a basic version; which covers the following –
- Request Methods / HTTP Verbs
- Status Code
- The Submit Event
Open a browser, type a valid URL and press enter. In my case – yahoo.com
I am using Google Chrome; with the developer tools open. Developer tools is that thing which will give you geeky information. All popular browsers have developer tools, you don’t have to really install any other software; it is already part of your browser. You can access developer tools for various browsers – Chrome, Firefox, Safari and Internet Explorer
Here is mine –
As you can see above there are certain things happening under the hood. Well thats what we will start looking at. Or at least few of them 🙂
Few terminologies to get comfortable with.
- Client – Is the browser, you are using to view a site
- Server – Web Server to be precise, think of this as a computer sitting somewhere in the world, a really powerful computer.
- Resources – In simple terms, anything that is served by the web server is a resource, like HTML page, image, file or any other content.
Request Methods / HTTP Verbs
Do you remember what a verb is in English grammar?
Verb – a word used to describe an action, state or occurrence
And that is exactly what HTTP Verbs mean, each verb is used to describe an action; like – GETting something from the server. So in the above picture, the client has provided a URL and the browser is going to get the resources in that URL. Below are some of the common HTTP Verbs
- GET – Gets a resource from the server, the majority of the internet traffic is GET. Why? When you a visit a website it is GET operation that is happening for getting the necessary resources from the server to render the page. Think for a moment; you don’t require a stats to prove this.
- POST – Well, When you want to create a new resource on the server it is post. The word resource might be slightly misleading here. Apart from HTML page, image, etc., a resource can be also an entity or a model or a business object. Consider a scenario where you are filling a form to create a new user account in certain site. The information that you have entered are captured and posted / submitted to the server to create a new resource of user.
- PUT & DELETE – While POST is for creation, PUT is for updating an existing resource if it is there and DELETE is for .. what the verb suggests 🙂
Basically these are the CRUD operations – Create Read Update Delete being signified here.
In my example, when I typed yahoo.com in the browser. The client issued a GET operation as shown below.
The complete list of verbs can be found here.
Consider a travel ticket, the status of which could be Confirmed / Cancelled / Waiting ..
The status code in web, as well talks about the status of a particular call the browser has done. It is a number which represents certain status. There are different ranges which signify different status. The server will respond with a certain status code which will be then interpreted by the browser.
For example –
The 2xx series define success. And in my case the call indeed succeed and hence I can see the 200 status code like below –
The different series and their representation can be found here.
When I go to office, I need to display my id card at the gate. I need to swipe the card at the door to get access to the floor I work on. While the main subject in focus is the employee (a resource) there are certain information that he needs carry so that he can get something. In this particular scenario an access (don’t confuse this with authentication / authorization). So headers are additional information your browser sends which can be controlled / tampered / sniffed on. This particular headers are known as request headers. The simplest of all headers is the ‘Accept’ header. As the name suggests, the client tells what he accepts. Like – Image, html, xml etc.
Like the way the client sends response headers, the server as well sends response headers. The simplest example would be content-type. The server is indicating – hey here is the data and it is of this type (image, html. xml etc.)
As you can see, there are many other information that gets passed along with the request headers and server too passes many other information to the client through the response headers. This headers can be synonymical to the handshake that happens between a client and a vendor who provides some service.
The Submit Event
This is something which is very important to understand. People with the background of Microsoft Asp .Net Webforms think that there is a really a server side click event. In reality that is not true.
Okay, the focus is not here on the technology used for implementation, so lets get back.
Form – You should be familiar with the physical form you used to submit to get some service in the real world. On the web, a form is a section in a page where are there are controls to get inputs from the user, this can be compared to the boxes you will fill in a physical form using a blue pen or black (or whatever is recommended color)
Take an example of a user account creation screen, like in Google or any other service. You are required to fill in some form and then you click a button. What happens when you click the button is called a submit event. Not getting into the intricacies of it, it basically takes all the values that you have given inside those controls and sends it over the wire in the form of a key-value pair. The key being the controls ‘name’ –
In the developer tool, you will see a section called form data in the specific network call which happens after you click the button. Generally, the HTTP Verb for this will be either PUT or POST for this call. Check it out the next time you are creating a new account.
I understand this is a lean version, but like I mentioned it is meant for a wider audience with / without the background of web technology. Keep your developer tools open anytime you visit the website and you will see a lot of interesting things that happens behind the scenes. The title of this blog says Part I, I just wanted to keep it open, in case if I had to continue on the same topic in the future.