HTTP GET vs. POST Tutorial

Key Takeaways

what's up y'all this is the same NASA from I geometry where we discuss software engineering by example this episode we will discuss get versus post and we will show practical examples of both using javascript and HTML writes a very simple practical example here are explaining the differences between these two methods let's so let's let's just jump into it how about that so because we're gonna use a practical example so this episode will be or this video will be on the longer side so you can watch the first two minutes where we just define one of what are those two methods right and the difference is slightly differences between them if you're interested to watch how you can implement each of them you can continue watching the rest of the video all right so let's just jump into it yeah so get and post are actually just simple HTTP method so the HTTP protocol was designed with a certain number of methods so yeah the the HTTP will have a header will have a body and it will have a method get' and posts are just two of those methods there are others as well get is you with the protocol self you're gonna use get to request something from a server using the HTTP protocol get supposed to read only write supposed to be ID important supposed to just read doesn't change any state on the server right so that's what you supposed to do right so obviously HTTP doesn't enforce you to do this thing right if you're building your own web server you can do pretty much everything anything you want and that's why people start abusing this these things right that's why you have to understand few there's semantics you have to just adhere to these semantics so get if you make a request to get it we'll just for example give me all the users that start with the letter A or just give me all the tables that all the rows and a database that have this column right so you're requesting something from a server and that our server will do the query it does the job and return you some results so that's the get it's read supposed to be just read if your get method somehow doesn't touches something on the server then you're doing it wrong not to say that you you can do it you can actually do this today if you do a get method and you can just for example create a row or create a user just nothing stopping gira because this this is an open protocol but you'll be violating conical violating the protocols does that make sense all right so this is the get get supposed to read post guess what supposed to create right so post when you do a post method on a web server you should basically create something right at the back and you should change something you can only use post when you want to change something so for instance if I go to the village of it'll google.com the browser makes a get request all the time this thing always makes a get request give me the google.com page right so that's when you hit enter that's a get request always right posts are a little tricky to make it's not it's not hard but you can't use the browser to make a post actually you have to write some HTML code that we're gonna do this today in this episode so that's why you're gonna be on the longer side but ya get vs. post get supposed to read something like the browser's doing that now and post is supposed to change something at the back end right so you create vs. read think of it this way there are other two methods like put and delete and I forgot the rest but they do other semantics and reaction your crude semantics all right guys let's I think with that that's the differences between the gate and polish really right so there are not much differences as you can see that's it that's the only difference between this this is supposed to read this is the Baltic post right so do you know when to use that that's the if you came to the for this this video to know when to use when ask yourself this question right I am making a request what is the kind of this request is it reading from my server is it just like I'm pulling a text file is it reading some list somewhere is there my reading list of tweets for example from a user that's a good request am i changing something am i changing something user am i creating a new user am i creating a new record and a database somehow does my request that I'm gonna send right now does something at the server at the backend right in that case who is post right so that's the semantics how about we jump to code right I'm gonna write everything from scratch as usual in this channel guys we explain everything try actually at least to explain everything by example so let's jump to it on this machine I have no js' installed so just literally go to Google and just download nodejs and install it and that's pretty much all you need to follow up with this example right so what we want to do here maybe actually let's show you guys whenever we're trying to build here how about that I think all right I think it's a good idea to show you what we're building so are we gonna build this a web server here that's where we're gonna build and this web server will have two methods right we'll have a git and it will have a post house also the return the index HTML which is the HTML page and then the client here will have can I do a form here yeah why not so we'll do a form and literally that form will have button here there you go so this this will have button called get and and a button called pushed right why is this right that's that's the that's what we're trying to build here right so when I call get it will call literally the get method corresponding on the web server that we trying to build here that will be no I guess that's we're building everything from scratch and get will be then HTML file that we also gonna write here and that will send a gift command to the web server and say hey I'm just a new simple gate and the server will were returned said I received your gate command and the post will do the same thing but it will send a post request instead right and we're gonna see how how we can actually build those two let's get to it guys ok so that's that's what we're trying to build here ok let's jump to it guys all right so why do we have man I'm gonna go to a new folder I'm just creating a brand new folder let's call it get post right that's a example so we're gonna create a folder called get post is it empty let's double check that the post brand new so what I'm gonna do here is uh I'm gonna use them to create a new index dot J's file and that will be my my server right anyone can call it server does Jess that doesn't matter anyway so what I want to do here again guys you need note GS installed once you know you have one not jazz install I invent the editor or just pick your favorite Visual Studio code is really cool but I've just for simplicity I'm gonna dive everything in the command line using them which is a text a command line text editor uh alright let's try some code I'm gonna write an app here you know guys uh I'm gonna write this really quickly because I already explained how to build a web server I'm gonna reference the link here if you want interesting but we're gonna build an Express server real quick so I'm gonna require Express here that's the framework for node.js to build a web server okay so I have an app here and then what I want to do is do the following should we do the index.html else build this first right so I'm gonna do a get when I do this get that means if that client sent you this is the server guys remember if the client sent you as a get request on the route which is remember like google.com slash this slash is the route right or your server / and someone sent you a get request on this on the route execute this function that's exactly what it means right and when you execute that function you get two free parameters here request and response what do you want with this what do you want to do with these two requests drive the request and response and I am NOT gonna do anything here I'm just gonna return to the server to the client it a response that's sent because hey I got a or just say get received plan that's it and I'm gonna do the same thing but guess what with a post if someone sent me a post request I'm gonna execute this function instead respond to send a post receive did I spill received directly yes I did all right and that's it and we just need to install Express because we just used it right so we have to install Express then once we install Express we have to initialize NPM here let's just use the default stuff and next to date yes yes that's my file this command is not God to execute the index does it do J s and yeah everything is good all we have to do is go and run any NPM test which is the test command and what are we getting here getting in alright looks like an error NPM test oh we forgot something very important I think Wow we forgot to listen right well we want to listen to a port right we forgot the most important piece so this code actually executes that but we never actually lived for the web server we never listen to to a port right we forgot that part so we need to listen to this port and if the listening was successful right person on on request for the own HTTP protocol on port 8080 and when that is happening just say listening on port 8080 simple stuff and now we say NPM test that's more like it I'm listening of course and that's it your your your your stuff is ready now right so listening on port 8080 sweet sweet so now if I do localhost 8080 and then slash is what hey get was repeat received remember guys because the browser always sent a get request this guy was executed that remember the first line maybe we'll just open another one actually right about that mmm did he get pushed them and Dexter Jess so who got executed in this case this thing not exceed because we sent a get command so this function got executed and you can do fancy stuff here right you can start doing fancy stuff like your function this function this line will be replaced with your query to the database with your lest with your function with your fancy function that does work right essentially okay okay all right think we're gonna exit this thing let's close that thing and go to that full screen again all right so now when you want to scale this and I want to build an index to the HTML page now right and because I'm gonna build an index.html and yeah let's just do a body we need two buttons ID get yes called this get right guys and I'm gonna use another button here called post so this will send get this will send guess what post so that closes I don't want to cause the body yet I need maybe close the body here that's pretty cool then alright and I'm gonna write a script here that says [Music] cones get equal document get element by ID get and then Const paws equal document or die misspell that get element by ID post so get those elements and then we're gonna add add eventlistener this all right constable anymore alright so on click when someone clicks I want to do the following I want to execute this code right let's just do an event why not that's the code when someone click I want to execute a get request right and when someone clicks here event listener all I want to execute this code so what is this code that will be a inane jacker Ajax request using the X HTTP XML object so to do that we'll have to declare a variable called HTTP called equal new HTTP XML HTTP request right so just by doing that we can now open a request on to our site and guess what to do that we can do dot open and the first thing we do is we do HTTP localhost 8080 I want you to request that but what do you want to request the first thing you want to do I want to do a get request for each request you have to specify what do you want to do like what are you trying to do here I want to send this a get request here right so we're doing something suppose not something any parameters we're just asking the services hey that's a good request usually you get requests we'll get fancy and you're gonna send parameters and you get us and some stuff and some parameters and some body or Jason perhaps right what I wanna do is HTTP dot what are we doing here we well on ready state change if that request by default this this is an asynchronous request and I made a video about a synchronous versus asynchronous really I'm gonna reference in here as well guys for you to know the difference between the two and yeah when you do an already staged a own when the state of that request changes execute that function and what's this function it's just another fancy function right and it says if the HTTP does ready state equal four four means it's ready essentially right there's a I think an enumeration but I don't I don't remember it right I don't care about the response really they had the HTTP code response so if that is ready I just want to alert that whatever we respond so Oracle response text I think I think that's what we get response sticks so that's this that out I really doubt that I'm gonna nail this from the first time but then let's do that so I'm gonna send that request here so open everything that ready just go ahead and send it goes just go ahead and try that out guys but before we do that I want to do one small change in the index of GS which is you know guys we built an HTML file we build an index to J's which is the server side - demo file it will be the client side app right but we need to send that back right I want to send that index.html file for the client to be able to execute remember everything I write here is on the server side that's my several my neck is actually the server here and I don't know why we call it home something like that and same thing if someone makes a get request on the slash home this time not the slash right I want you to go ahead and execute what why not send I'm gonna send an entire file and directory name is actually the current directory that's for security reasons right we don't do dot relative things for security reasons I'm not gonna explain it right in this episode but essentially we don't want to have access to the Hathi users try cousin and retrieve like passwords and files from the server right and that's it we send back we send back if someone requests the home page right we're gonna send back that thingy so still works if I do home oh that's my card right guys that's the code I just wrote and I received it and a five if I open my iphone right now and I do I think it's called her same Mac that's my laptop name if I do the same Mac from my iPhone I will get the same page that's that's a beauty of basically networking right if I do get oh shoot that did not work yeah so there's the server responded with a status of 404 XML HTTP request is not oh I think I'm yeah XML I think XML is a capital L all right guys I must build that yeah just a stupid type of I think so all right let's give this a shot and yeah so it looks like the get request will has executed successfully so time to do a post request how about that guys all right so since we did that let's go ahead and copy this code preached and then you guessed it guys right change the get request to a post request and let's give this a shot guys I'm gonna share this code and the description below so you can take a look at it so you don't have to like pause the video and take a look but in general you can find it here and yeah let's just let's just try this now get and poached so the cool thing about this is now instead of doing an if statement say hey if there's something on get it's like a lot of people what they do I've been an I've been a criminal this I've done this before as they would do like slash create or slash read something like that right so you you create different end points right nothing wrong with that but you can avoid creating multiple end point but and instead have one end point with multiple methods right so for example if you do get a get do this if you do a post do this right that's pretty cool so you have the same URL right but if you do I get you do that and then if you do a post you you execute completely different function that's really cool and I think it's a it's a very simple design in your REST API architecture I think right so you define like oh if someone sent me I get requests I will execute this for somebody imposed I would execute that and and and so on all right guys I think that is all for us today and obviously not the only methods you can execute through the browser you can execute you via Curl Curl was a command that that's a very nice command that is available almost I think old brain systems you have to install you allow you to send a query through it - yeah - I URL so you would do is like hey I want to send get command to HTTP localhost 8080 and we'll receive it right I just received a get command right and if you do - ex post 8080 guess what maybe you should have just done that guys right but I like I know the episode is like really little really really long but but the idea is just like to explain how how many ways you can really write your code and how how can basically how many opportunities you have and if to execute certain code right I like to explain a certain things multiple way for different people to to really cement the idea all right guys that is all for me today hope you enjoyed this video hit that like and subscribe for more content check out the other software engineering by examples content and on AI geometry and I'm gonna see you in the next one you guys stay awesome