Full Form of HTTP Stands for “Hypertext Transfer Protocol”. As web developers work with every day and whether you’re our back-end full stack or even front-end developer. It’s important to understand HTTP and the whole request response cycle so in this Article . we’ll look how all this works and different types of responses methods status codes and you know what you get back from a server when you send a request and I’d like to test some of this stuff out with node js and Express along with postman which is an HTTP client and I think Express is a great framework to kind of give you some examples of how HTTP works.
Because we handle everything ourselves, it’s very minimalistic we handle the requests the response directly rather than having it be abstracted like it is in many higher-level frameworks. So even if you’re not familiar with Express or node that’s fine we’re not focusing on the specific framework or language.
So let’s first talk about what is Full form of HTTP
It stands for hypertext Transfer Protocol and it’s basically responsible for communication between web servers and clients. It’s the protocol of the web so every time you open up your browser and you visit a web page or you submit a form or you click a button that sends some kind of Ajax request or fetch request something like that. You’re using HTTP and you’re going through what’s called the request and response cycle you make a request and you get a response back that has something called headers in something called the body and we’re gonna look more into that cycle in a bit alright.
So it’s important to understand that HTTP is stateless meaning that every request is completely independent ok when you make one request visiting a web page or you go to another page after that or reload the page. It doesn’t remember anything about the previous basically transaction you can kind of look at each request as a single transaction now there’s other things we can utilize too for instance hold login data and make a more enhanced user experience things like programming local storage cookies sessions stuff like that but just know that HTTP at its core is completely stateless.
So What is HTTP?
I’m sure that a lot of you guys know this stuff but just for people that don’t HTTP stands for hypertext Transfer Protocol secure and it’s basically where all the data that’s sent back and forth is encrypted by something called SSL which stands for Secure Sockets Layer or by TLS which is the transport security layer.
Anytime you have users that are sending sensitive information you should always be over HTTPS, especially if it’s like credit card data social security numbers you want to have a high level of security for that stuff and even things like contact forms.
You should have HTTPS a lot of websites and applications now are just forcing HTTPS on every page which isn’t a bad idea and you can do this by installing an SSL certificate on your web host and there’s different levels of security different levels of certificates as well all right.
When a request is made to a server it has some kind of method attached to it and there’s more than this either the main four that you’re going to be working with and these are the ones, I’m gonna go over but just know there are there are a couple more so a get request is used when you want to get or fetch data from it’s from the server this could be just loading a standard HTML page loading assets like CSS or images JSON data XML data and so on so every time.
You visit a web page you’re making a get request to the server via HTTP now a post request is usually used when you’re posting data when you’re adding something to the server adding a resource typically when you submit a form like let’s say a contact form you’ll be making a post request if you’re submitting maybe a blog post a new blog post that’s gonna be a post request.
You’re sending data to the server and typically that data will be stored in a database somewhere you can also have forms that may get requests but it’s less secure because the stuff that you send in the form is actually going to be visible in the URL, so typically you don’t want to use a get request with a form unless it’s some kind of search form where all you’re doing is filtering data that’s coming back from the server.
You’re not actually posting anything all right and then we have put requests which is used to update data that’s already on the server so if you have a blog post you want to edit it maybe change the image or change some text typically you would do that with a put request and then a delete request of course just deletes data from the server alright so with each request and response using HTTP you have something called a header you have something called the body so the body typically with a response is gonna be the HTML page that your you’re trying to load the JSON data whatever is being sent from the server and then when you make a request you can also send a request body for instance when you submit a form the form fields.
Submitting are part of the request body alright now when it comes to the header you also have request headers and response headers and in something called a general header okay so it’s basically divided into three parts and there’s different fields on each part so typically a header will look something like this you’ll make a method like a get request to a path or URL and with a protocol in this case HTTP 1.1 and then you’ll have all these different header fields and a lot of these you’re not really gonna need to care about but it’s good to know what some of the more common ones do and what they are especially with the general part of it so in general we have the request URL which is pretty straightforward it’s just the URL.
Requesting the request method so if it’s a get request post request and so on the status code this is probably the most important and I’m going to go over status codes in the next slide the remote address which is the IP of the remote computer the referrer policy, so if you’re if you go to a page from another page it might have some information that and whatever the Paul referral policy is I’m not that familiar with it the response had our fields you have server so if it’s Apache or nginx or something like that and a lot of times this will be hidden just to prevent hackers from knowing what type of server the the website uses so setcookie is used for servers to send small pieces of data called cookies from the server to the client and then content type so every response has a content type for instance.
If it’s an HTML page it’ll have a content type of text slash HTML CSS files would be text slash CSS images you have image slash PNG image slash jpg if it’s JSON data it’ll be application slash Jason this is something that I think is really important to know of the different content types and then you also have the content length which is just that it’s the length it’s in octet switch our I believe 8-bit bytes and then also the date okay and there’s other fields as well but I’m not going to list every single one or every possible one so some common request fields are cookies.
Now if you have a cookie that was previously sent by the server and you need to send it back to the server you would do it in this field you also have a bunch of except fields like accept encoding except character set except language these are just the different encodings and languages and stuff that the client is able to understand ok content type again so if you’re sending data like let’s say you’re sending Jason you’d want to set this to application slash Jason and then you also have content length as well so authorization remember HTTP is stateless so you might need to send some type of token within the header the authorization in the header so that you can for instance validate a user to access a protected router or protected page unless.
Some common HTTP status codes include: 100 – 500 range
You’re using something like sessions on the server and then the user agent is typically a long string that has to do with the software that the you is is using so the operating system the browser things like that and then the refer has info regarding the referring site. If you were to click on the link or whatever so these are just some of the more common header fields but there are more so if you want to check out the HTTP spec you can look more into that alright so HTTP status codes are really important to understand at least the the most common ones so basically you have ranges you have the 100 through 500 range.
100 is informational basically this is it means the request has been received and the process is continuing its processing
200 means that it was successful so successfully received understood and accepted
300 range usually has to do with redirection or further action must be taken
400 range is a client error meaning that the request doesn’t have what it needs from the client.
let’s say the server needs a name field sent in them in the request body and you don’t send that you’re gonna get a 400 error or somewhere in that range and then 500 is usually a server error.
So the server failed to fulfill an apparent valid requests so everything seems okay as far as what you send to the server but you still get an error something’s wrong on the server side all right now these are some important status codes I should say common status codes that you should remember so 200 is just okay it means everything is fine you make the request you get the HTML page you get a 200 response 201 is okay but it means something was created.
If you’re creating a blog post and everything goes ok then you might get a 200, 201 response 301 is usually move to a new URL so this has to do with redirection 304 is typically not modified meaning that if you visit a page and it gets cached and it hasn’t changed at all then you’ll have a 304 response our status 400 again bad request so if you’re not sending the correct data to the server 401 is typically or is unauthorized so if you are missing a token or something like that you’re not authorized you might get a 401, 404 we all know what that means it’s not found.
If you’re looking for some page on the server that doesn’t exist or some resource that doesn’t exist you’re gonna get a 404 and then 500 is just an internal server error this could mean pretty much anything on the server side all right so those are the status codes those are really important to really memorize and understand so the last thing I want to quickly mention is that there is HTTP version 2 we’ve been dealing with 1.1 for a long long time now all the changes to version 2 are pretty much under the hood meaning you don’t have to go and change the way your applications work all the status codes everything like that is all the same it’s just faster and more efficient okay so it does stuff like reduces latency by enabling full request and response multiplexing.
It’s faster it’s more efficient it’s more secure and this is just a simple image to kind of show you that it can you can use multiplexing so for instance we get our HTML page get a response get our style sheet get our response get our script get our response so this is 1.1 with HTTP 2 multiplexing.
We can get our HTML and then get all of our scripts and stylesheets basically in one shot here and send the responses at the same time now I’m not extremely familiar with HTTP 2 I haven’t read the spec I haven’t worked with it that much but just know it is available it is out there so you might want to look more into it alright so now we’re gonna jump into Express so I can give you some examples on dealing with requests body and headers and sending status codes and stuff like that alright guys so we’re gonna jump into our little Express server in a second but I just want to first show you an example on an actual web site I’m just gonna use my Twitter profile but you can go to any website you want and go to your dev tools in my case my chrome dev tools and then click on the network tab and if I go ahead and reload the page here it’s gonna make all the requests it needs.
Here we have like response time stuff like that and then in the requests headers we have the authority which is the the root domain we have it’s a get request the path is my profile HTTP is the scheme and then down here at the very bottom we have the user agent which is this long string which describes my environment so it has tells you I’m on a Mac Intel based OSX it’s kind of confusing because it says Mozilla it says Safari and chrome I’m actually on Chrome so it shows my the version of chrome that I’m on alright so that’s the user agent so I just want you to take note of these values after what we went through in the slides and if you want to narrow it down by files we can see like all the CSS that was loaded so if I click on one of these I can see all the end for that file including the content type which is text/css if I want to look at the Ajax request here so like this one right here this should be application slash Jason and if we look at the response.
This is what it got us so the number of results some I guess some user information so these are all the different xhr or ajax requests that were made all right so when you use the fetch API or Axios or old-school Ajax this is where it’s going to show up so just get familiar with the network tab it’s it’s it can be a little daunting at first but it’s it’s really helpful it lets you know what’s going on it shows you the load times and all that stuff alright so enough with that let’s jump into I’m gonna show you a postman first and if you don’t have this client which is just awesome especially if you’re building api’s.
you can get it at get postman comm and as you can see I can make any type of request so get post put patch delete all these other ones to any URL in fact they’ll go ahead and make a request to twitter.com slash traversing media slash okay and I’m gonna make sure it’s a get request just like the browser made and I’m gonna get the same exact thing I’m going to get all the HTML it doesn’t render it well actually can we preview it I’ve never actually tried to preview HTML it’s disabled would you like to proceed legacy yeah so whatever you get the HTML and then headers will give you all the response headers so we can see the content type that we’re getting set cookie status all that stuff if we want to look at the cookies we have that tab as well it shows us the status up here as well with the load time and the size okay so we can make any requests from here that we can make in the browser and more because we can actually do put and delete and all that stuff so this is a fantastic tool for testing api’s that you’re building so let’s jump into Express real quick I just have a basic Express server running here on localhost 5,000 and don’t worry about it if you’re not familiar with Express basically all we’re doing here is bringing it in initializing it setting it to listen on port 5,000.
We have one endpoint meaning that if we make a get request so we said app dot get to slash which is the index page it’s going to run this function that has access to this request and response object and with our response object we can call dot send which will just send basically just whatever we put in here to the the client okay in this case just a string of hellos from Express so if I go to postman and I make a get request to HTTP localhost port 5000 I get hello from Express and I could do the same thing in the browser get hello from Express all right and if I open my network tab and reload I’m gonna go to all here and you can see that I get a 304 which means not modified because it was cached and it didn’t change so it gave me this 304 if I were to change this like say hello from Express 1 and save and go and reload now I get a 200 if I reload again I get a 304 because it didn’t change but over here I can see all my headers so same stuff that I saw with Twitter there’s just a lot less because there’s a lot less going on all right so in postman same thing I can see all my headers now with post me and I can send all kinds of stuff I can send a request body I can send headers so we have a lot more freedom to to basically interact with the request and response cycle now in Express actually one thing I wanted to show you is the content type which by default if you use res dot send and you just send a string it’s gonna be HTML ok in fact I could put I don’t want to make this too much about Express but I could put HTML right in here and if I go to my browser you can see that that actually renders all right now if I were to put Jason in here let’s get rid of this and let’s say msg. We’ll just say message hello and I save that and we go back to postman and send you can see the content type has changed so with express res Dotson will basically detect to the content type as best as it can ok but there is a red dot Jason which is what you should use if you’re sending Jason so if I do that it’ll give me the same thing alright it shows the Jason in the body now we can also get our head our values or header fields if we want so I’m just going to do a red dot send just to kind of show you the output of this but if I take my request object I can do dot header and then in parentheses any header value I want like let’s say the host so I save that and I go back to postman and send I get a response with my host local host 5,000.
if I wanted let’s say the user agent we’ll do user – – agent and if we go back and send we get in this case postman runtime because I’m using postman as a client so this is going to be different than what we saw in Chrome if I go back to Chrome and reload we’re gonna see this okay which is different because we’re using a different utility a different client alright so I just wanted to show you we could do that we can also get just the raw headers so basically all of them if we do request dot raw headers and if we go back to postman and send you can see we basically get an array with all the headers the cache control postman token since we’re using postman the user agent the accept value the host all that stuff okay and we can send headers as well which I’ll show you in a little bit so we can get head our values what else do I want to show you so let’s actually let’s change this to a different row let’s do like slash contact we’ll say that this is a contact form and what I want to show you now is how we can send data to the server in the request body when we send a request we can attach data to that to the body and the way that we access that.
if I go ahead and send that we’re gonna see that down here because we sent that we sent the request stop body if I do just request dot body dot name and I send that we just get Brad alright and you see how I sent the content type in the header if I want to access that I can do requests on header and I can grab the content – type and let’s go back and send and we get this URL encoded that’s the type all right we can also send raw jason so if i go ahead and get rid of that header and put in a different content type we actually get a little drop down here so content type.
I’m gonna set it to application slash jason go to body and instead of this URL encoded I’m gonna choose raw okay because we can send raw Jason so name and we’ll say John Doe and I’ll go ahead and send and I get application Jason because that’s the content type but again I could access the body if I want so if I want to get rid of that and just do request body and save and send that we get our Jason of John Doe all right if we look at the headers content type okay so hopefully this is kind of making sense to you guys that that don’t have a lot of experience with this type of thing now what about statuses in postman if I make a post request to contact one and I send that you can see that I get a status of 404 you guys all know what that means it’s not found and it just gives me this cannot post contact one so we can send our own statuses I mean when we do a successful residents end or red dot JSON it’s automatically two hundred but we can have conditionals and create different statuses based on that so let’s say that this route we actually need to have a name if there’s no name we want to send back a 400 response which means it’s a bad request.
So I’ll simply do an if statement here and let’s say if not request dot body dot name then let’s go ahead and do a res sorry we want to return a red dot status okay so this is how we can send a status code and I’m gonna send the 400 and then after that we could do dot jason or dot send I’m gonna do dot send and I’m just gonna say name is required all right now I’m gonna go under the if statement if a name is included then and typically you would do like some database stuff here you would put the the contact into the database or whatever but I’m gonna do a res and I’m gonna do another status here of 201 which means that everything’s okay and something was created okay it means created and I’ll do a dot send and then let’s just do I’ll put a template string in here and say thank you and then we can actually put in the request dot body dot name all right so let’s save that let’s go back to postman and let’s get rid of the name here let’s not send it and we get name is required okay because it’s looking for that in the body in the request body so if I send it and I just undo that so if I say name John and I send now we get thank you.
John because it passes we’re sending that that request dot body dot name okay let’s see so the next thing I want to look at is header values now a lot of times when you’re dealing with full stack applications you use tokens or JSON web tokens for for authentication and you send that and you can either send it in the authorization I like to send it in X off token in a value called X auth token so what I’ll do here is create another route let’s do app dot we’ll do post to let’s say slash login alright and then what I want to do here is check for a token in the header so I’m gonna say if there’s no and then the way that we access header values already showed you this we can do request dot header and then I’m gonna check for X – off – token ok so if that’s not there then let’s send let’s send an error let’s do return and one thing I want to mention is notice I did the return status here and not here it’s because you don’t need it if it’s the only or the last one but if you have it before if you have another response here even if it’s within an if statement that doesn’t pass you’re gonna get an error that says headers already sent so make sure you use your turn up here okay so I’m just gonna return res dot status and let’s say if no token is included in the header then we’ll send a 400 and we’ll just send an error that says no token okay.
Now let’s do a pretend validation for the token so I’ll go ahead and just say if the request header X – auth – token let’s say if that is not equal to the string of 1 2 3 4 5 6 then it’s gonna be invalid so I’m gonna return a response status of 401 which is unauthorized so I’ll do send and it’ll just say not authorized okay and then down here if everything passes we’ll do a red dot send and we’ll say logged in so we’re just kind of simulating a login process obviously it would be much more in-depth we need to use actual token JSON web invalidate them and so on but let’s save that let’s try this out so if we go back to postman make a post request to slash login and we don’t need anybody data because we’re just dealing with headers and we can clear out content type let’s just send that so we get no token now I’m going to add a header value of x – off – token but I’m gonna do one two three four five which is wrong so we get not authorized if I do one through six we get logged in okay so just an example of how you can authenticate through tokens in the in the headers okay and by the way if you’re interested in and we do this in my Marin stat course we do all this this type of stuff all right so let’s do let’s simulate a put request so I’m just gonna get rid of this so for a put requests we would do app dot put and maybe it’s like a blog post so we’d have like slash posts now usually you’d have to identify which post you’re updating and you would do that within the URL so it would be like : ID which is like a placeholder alright.
And I know that we’re doing a lot of Express stuff but my goal here is to just get you familiar with sending requests body fields header fields dealing with that I’m sending status codes back so here usually what would happen is we would do some database stuff so database stuff to update the the post and then send back a response let’s do a res dot jason and we’ll send the ID now if you want to get the ID that’s passed in you can actually use request dot params and then whatever the per a min this case ID and then the title we’re gonna send in the body so I’ll do request body title okay so request params is going to access the URL values request body will access the form data or the JSON data that you send in the body so we’ll save that and from postman we can make a put request to slash and we’ll do post / 99 okay so this will get accessed with request dot params and then in the body since we’re gonna be sending data we actually have to add a header value of content type and I’m just gonna send raw Jason so we’ll do application Jason and then let’s send the title so title my blog post and if we send we get a response back with the ID of 99 cuz that’s what we put in here and then the title that’s what we put in the body and I could put anything at all in here okay so hopefully that just gives you a good an idea of how put requests work but typically you would do an update of the database using that ID and then delete would would basically be the same thing so we just do app dot deletes and include the ID delete it in the database and then return maybe most likely not going to return the post because it’s deleted so you might do something like a message message and say post actually what we could do is I could say post and then take the ID and say deleted okay so now from post man we could make a delete request we don’t need any of this we don’t need this and the headers we could just send that we get post that deleted all right so yeah I mean hopefully this helps a I understand a little bit how this goes now.
FULL FORM OF HTML