We've just discussed perhaps one of the most important attributes, and that is the action attribute.
But now we are on to its brother or sister.
It's also equally important, and that attribute is the method attribute.
We've already seen examples of it, but this is what it looks like.
Yeah, we're just using a GET method, but as we'll see, there are others.
Taking a step back, we know we need to send the data to a server, right?
And with the action attribute we defined where to send the data to.
But what's missing?
We haven't defined "something" to send this data to the server.
That's right.
We haven't defined HOW to send this data to the server.
We've defined where it goes, but not HOW it gets there.
So how does it work?
How does how work? haha...
And I crack myself up sometimes.
Well, in order to understand that, you need a basic knowledge of how the HTTP protocol works.
And it's not that difficult.
Each time you want something on the web, the browser has to send a request to a URL.
This HTTP request can be broken up into two parts.
It can be broken up into a header that contains a set of global metadata about the browser's capabilities.
And the second part is the body of the HTTP request.
And this body can contain information necessary for the server to process the specific request.
Okay, cool.
That's all good and well, Clyde, but how can we send it across?
What are the different ways? Most people, most developers, will tell you there are only two ways: a GET
request and a POST request, but actually there's a third.
There's also the dialogue.
But of course, the two most popular and common are the GET and POST requests.
Okay, Well, let's discuss them quickly.
First, let's look at the GET request.
The GET method is used by the browser to ask the server to send back a given resource.
It's like the browser asking the server this: Hey server, I want to get a resource.
That's a very, very good request, isn't it?
It's very reasonable.
Thank you.
But the important thing to remember is that when this GET method is used, the browser sends an empty
body. And because the body of the HTTP request is empty, if a form is sent using this method, the data
has to be appended to the URL.
Confused.
Don't be.
Let's hop over to the IDE and let me show you exactly what this looks like.
How does the GET method work and what does it look like?
You've already seen it in one of the earlier lectures, but let me just remind you.
So the first thing is let's create a form.
Remember this very important action attribute?
Well, let's just define a fictitious (aka a made up) process URI.
And this is not going to exist.
But I just want to kind of show you how the look and feel would be on a real form.
Then I want us to define a GET request.
A GET request is the default, by the way.
So it's the same as us omitting this entire attribute altogether.
But I want to be explicit here so you remember what we're doing.
Let's just have an input of type text (input type="text").
We're going to be getting into this a lot later in the course. And we don't need an ID here. And, let's
have a message.
You can also put it into an input element of type text, and we need to give it a name.
If we don't give it a name, it won't be submitted to the server.
I want to give it a name of "message".
And last but not least, we've got another type of input...
the submit input, and this is just going to be a submit button.
This is what I want to show you if we go to our browser.
There's our simple form.
And let's say I type my name and say "Hello world".
What happens when I click on the submit button?
Well, firstly, remember what the GET method does?
The GET method does not send the data in the body of an HTTP request, and because it doesn't send it
in the body, it has to attach it somewhere.
It attaches it to the URL.
So when the user clicks submit, of course we cannot GET that URI as it doesn't exist, which is why we get
this error message.
But look at the URI.
Can you see our variable names?
First name and message.
And our values are appended in the URI.
In fact, they are sent as a series of name-value pairs.
The other thing you'll notice is that after the URL web address has ended, we have a question mark ?
followed by each of the name-value pairs, and each one, each separate variable or set of variables
is separated by an ampersand - that & symbol.
So in our case, of course, we are passing two pieces of data to the server.
We are passing the first name, which has a value of "Clyde", and we are passing the message which has a value
of "Hello World".
Does that make sense?
You can actually also see this GET request in the request header itself.
Let me show you.
Not many people know this, but it's very cool.
If we go to our Network Tab in the dev console, let's just go back here, refresh our page so it's
starting from scratch.
Make sure preserve log is checked.
Let's do exactly the same thing.
Let's type Clyde.
Hello, world.
And let's click Submit.
Here we go.
We know it's failed.
That's why it's all in red.
It's failed because that URL does not exist.
But if we click on this request, let's just make this bigger.
We can see we've got these request headers. And what can we see here?
Well, what's really awesome is that we can see that the request method is GET and of course we can
see the request URL in the actual header request of this HTTP request.
That's very cool, isn't it?
Wow.
And if you really want to see what it looks like, you can scroll to the bottom query string parameters
and you can click on view source code.
And that's exactly what we saw in our URL.
Woohoo!
How awesome is this?
Hope you're having fun, but let's jump back into the lecture because we've only discussed the GET method.
There are still two more methods we need to talk about.