Preview
Video Player
00:00
00:00
Dealing with the POST Body
11:24In this video we'll get the user input from the search form.
There are two common HTTP methods or
0:00
ways to communicate with an HTTP server,
and that's GET and POST.
0:02
Without realizing it, every time you type
in a website, you're creating
0:08
a GET request because you're retrieving
information from a website address.
0:11
When you create a form, you can specify
which method to use, GET or POST.
0:18
Specifying GET encodes the form's contents
into a query string at the end of the URL,
0:24
where POST sends the form's contents as
part of the request's body.
0:30
That's the client request body, similar to
the service response body.
0:35
Now, if you can't envisage what that
means, let me show you.
0:41
Okay, let's take a look at our application
running.
0:46
And click on Preview.
0:53
[BLANK_AUDIO]
0:55
And I'm gonna show you the URL of what
it's like
0:58
to send a GET request in the search form.
1:02
So I'm just inspecting the form here and
1:07
changing it from POST to GET, so this
temporarily changing it.
1:11
And let's type in chalkers.
1:16
Click on search, and, as you can see, it
says username chalkers.
1:20
And as you can see the URL, you know,
1:25
causes an error because it tries to look
up this.
1:28
But this is what a GET request looks like.
1:31
So let's go back to the home.
1:34
And lets type in chalkers and click on
search.
1:38
And it does a POST request to the home
route, so
1:45
the information in the form is actually
sent in the body
1:49
of the request rather then as the URL
query string at the top there.
1:53
So that's the difference between GET and a
POST.
1:58
If you want to hide the, the form contents
from the URL,
2:01
sometimes you don't want to allow people
to see that.
2:04
And it's just cleaner, anyway,
2:09
to say slash the username like this than
have the URL
2:12
have question mark username is equal to
chalkers.
2:17
That doesn't look very nice, whereas this
looks a lot better.
2:22
So that's the kind of feel that we're
trying to get for in our application.
2:27
How do we get that information out of the
body of the request?
2:32
So if we go back to Node's documentation,
2:37
click on Docs, API Docs, and then HTTP.
2:43
We know that the request is an incoming
message.
2:50
And that means that it's got these
properties like http,
2:53
headers rawHeaders, and something called
method.
3:00
So we can check if it's a GET method,
DELETE method, PUT method, or POST.
3:05
GET and POST are the most common ones.
3:10
DELETE and PUT and PATCH are some that
you'll use in other instances.
3:12
But we just wanna check out the GET.
3:16
So if we back to our workspace, we can now
alter the code here.
3:19
So if it matches slash, then we want to
check if it also matches GET,
3:25
so if request.method.
3:33
And I'm gonna do it toLowercase because,
3:39
just in case, if a different browser or
3:44
a different client sends GET incorrectly,
the server may still pick it up.
3:47
So I'm just going to indent that so it
looks nice.
3:54
And do get.
3:58
So if the request is GET, then we show
what we normally show.
4:01
But if it's anything else, so if it's
POST,
4:07
basically, we want to do something to the
POST body data.
4:11
[BLANK_AUDIO]
4:16
Okay, so let's just copy our comments from
down here and put them in here.
4:22
So if the URL is slash and POST, we wanna
redirect to the user.
4:28
So we need to get this user out of the,
the POST body data.
4:33
So what we need to do is get the POST data
from body.
4:40
[BLANK_AUDIO]
4:49
Extract the username, and then redirect to
the username.
4:53
So those are the steps that we need to
take.
4:58
So going back to our incomingMessage,
5:01
let's check the different types of events
that occur on this.
5:05
[BLANK_AUDIO]
5:12
What it says, there is a close event.
5:15
And it's a Readable stream, so let's have
a look at that.
5:20
So a Readable stream has a data event.
5:22
So because this incomingMessage is an
implementation of this,
5:27
there are other types of events associated
with it.
5:32
So you may need to dig deeper into this.
5:36
But like when you create a client request,
when you're creating a scraper, for
5:38
example, or an API reader, the response is
an incomingMessage to the client.
5:46
So, but in this instance, we're creating a
server which has the request which is
5:53
an incoming client, so it has a data
event.
5:58
So when you're reading a response body
from a server reading
6:02
like a script in an API, for example, you
listen to a data event.
6:06
And the same goes for a request when the
request is receive,
6:11
is an incoming event for the server.
6:16
So they're like two sides of the same
coin.
6:17
But depending on the context, the
incomingMessages is a response or
6:21
a request.
6:24
But since we're creating a server, the
request is an incomingMessage.
6:25
So let's do request.on data.
6:29
[BLANK_AUDIO]
6:38
And that's gonna be the postBody.
6:42
And let's console.log that.
6:44
[BLANK_AUDIO]
6:50
And let's see what happens when we do
that.
6:58
So kill any servers that I'm running,
start it up again, go to 3000.
7:01
It's, this is the GET request, so let's
try the POST request.
7:07
So let's do chalkers and hit search.
7:11
[BLANK_AUDIO]
7:14
And we should see that there's a buffer.
7:18
And remember what we were saying before,
how when you're reading data in from a,
7:24
from a stream like like streaming from the
hard drive or
7:29
streaming off the network, it's a type
buffer.
7:32
So we need to convert this buffer into a
string.
7:35
And we can do that by doing toString.
7:37
So if you were to add this POST body to
another string,
7:42
so if you had a string which was empty so
7:48
let's call it body, and then plus that,
JavaScript
7:54
coerces whatever's on this right-hand side
into the type of the thing preceding it.
8:00
So in this case, it would be the string.
8:05
So there is a method on it that we can
just use, and we can do that instead.
8:08
So let's try that out now.
8:13
So Ctrl+C to kill the app, then start it
up again.
8:15
Go to the port and search again.
8:22
So let's search.
8:25
And as we can see, it says username equals
chalkers.
8:28
So this is exactly like having it in the
URL,
8:32
but it's actually hidden away in the body
of the request.
8:38
So how do we get the information out?
8:43
How do we extract the username from the
body?
8:46
Because this isn't the same format as a
query string,
8:51
what we can do is take a look at some Node
API documentation again.
8:55
So, nodejs.org, Docs, API.
9:00
And then you should, you can see there's
Query Strings.
9:05
So I'll click on there, and it's stable
right now, so
9:08
what we can do is we can look at parsing a
string.
9:13
And so if we parse this string,
9:17
we'd have foo dot foo bar, so username
equals chalkers.
9:20
So when we parse it we get a,
9:26
an object back that we can just access by
doing dot username.
9:29
So let's try that out.
9:33
So remember, when we include modules,
9:36
that's include them at the top, so
9:40
var querystring is equal to require
querystring.
9:44
And then
9:49
[BLANK_AUDIO]
9:50
var query is equal to
9:55
the querystring.parse.
9:59
And then, actually, we need to do this
inside of the data callback
10:04
or else we won't be able to get at that
POST body.
10:12
So we want to convert the POST body
string,
10:18
which is this query string here, and
10:23
we'll get a dictionary back or a JSON
object.
10:28
And let's just do response.write
10:34
query.username and test that out.
10:39
Don't forget to end the response, as well.
10:45
And let's see if we're getting the
information out like we expect.
10:54
So, kill.
10:57
[BLANK_AUDIO]
10:58
Start it up again, chalkers, search.
11:04
And as you can see, we've got chalkers
printing out to the response.
11:09
And now, we need to find out how to use
this to go to slash chalkers.
11:14
[BLANK_AUDIO]
11:22