Of course, there's nothing better than looking at examples, so let's do a quick example of a GET request.
Let's just set up a simple HTML document.
I'm not going to do the headers.
I'm not going to do it 'properly' here.
I just want to quickly rush through this.
Let's just create a <body>. In the <body>...
let's have a <form>.
OK, but now I want the form to have a method of GET.
OK, let's get rid of action.
You don't need action.
We'll get onto that later.
There we go.
We've got a GET request, OK?
In fact, we don't even need this,
right?
You know that already.
We could just have this, and that defaults to a GET request.
But I just want to be explicit here as to what we are doing. Now...
let's just have, say, a name field. It can be input type of text,
right.
And we can give it a name, a variable name, of 'fname' - first name.
Then let's just break it up a bit.
OK, there you go.
And let's just ask the user what their favorite food is.
Again, it can be a text input type, and its name can be favFood.
Pretty simple.
We don't need an ID here.
And again, let's just include some breaks, and we need a way for a user to submit this form,
right.
Which is why I'm just going to create an input with its type being "submit".
And again, we're going to get onto that later in the course...
so don't worry too much now what that means or how it works.
So here we go. We've saved it.
Very, very simple.
Let's just use the Live Server, and
look at what it looks like on our browser.
OK, pretty straightforward.
There's "Name" and "Favorite food".
Don't worry about how it looks.
I know it looks ugly ðŸ¤¢.
That's not the point of this lecture.
Let's just see what happens with a GET request.
Okay, let's just say name is "WallyTheWarthog" and the favorite food of Wally is "grass".
What happens when we click submit? Well...
firstly, I just want to go to the development Console, Network tab, and let's click submit.
The first thing I want to show you with this, is remember how we said with a GET request that the default
encoding type is application/x-www....
-form-urlencoded?
Okay, that's the default type.
And this will go in the HTTP header.
As you can see, though, right...
let's don't look at the response headers...
Let's don't look at general...
I want to look at request headers. You can see that there is no Content-Type specified. And the reason
is not specified...
is that we can't specify it with a GET request. A GET request has to have the application/x-www-form-urlencoded
type.
And if we look at the bottom, we see query string parameters of "fname" and "favFood".
And if we view the source, we can see that each name:value pair is separated by that ampersand & symbol.
And of course each name and value is separated by an equals sign.
So each pair is separated by an ampersand, and each name and value itself is separated by an equal sign.
This is a query string parameter. This is the default type. As we'll see shortly when we start dealing
with POST requests,
firstly, we will see that Content-Type header inserted in the HTTP request.
And secondly, it doesn't necessarily have to be a query string at all,
does it? No.
But anyway, let's hop back to the lecture.
Let's continue.