Ah, I love doing this stuff.
What is it I want to show you now?
Well, as I mentioned, there are 2 ways we can submit data to a server via a form,
right?
We can do it on the form wrapper itself by using the action attribute,
the method attribute.
We've done this many times before. But I've also now mentioned that we can use AJAX.
(sound effect: What?)
Whaaat?
What is AJAX all about?
Well, I don't want you to get bogged down in all of the detail.
AJAX just stands for Asynchronous JavaScript and XML -
AJAX. And AJAX is pretty cool.
It allows us to basically submit data to servers and retrieve data without implementing a page refresh.
So it's very, very useful.
We also not limited by the types of methods.
Remember, when we're dealing with the method attribute on forms, we can only have GET or POST.
That's not the case with AJAX.
If you need to update something in a database, you can send it via the update method,
put, delete,
etc
etc.
"But Clyde, these are just words."
And you are 100% right.
Nothing beats an example.
So why don't I hop over to the editor,
why don't we start up a server?
I think I might use PHP here.
I could have used Node.js, but I'm just going to use PHP.
And then why don't we use AJAX. And I'm not going to use the new Fetch API.
I'm just going to stick with the traditional AJAX because once you understand that just me picking up
the new Fetch API will be very, very simple.
So we're going to use AJAX.
Let's code up a form.
Let's start up a server, and let's submit our data to a server.
It's going to be super exciting. But we're going to use AJAX! Sit back, grab a coffee and enjoy.
See you now.
Before we start coding, I just want to show you exactly what it is we're going to create.
It's going to be really fun.
You can see here we've got a very simple form.
I know it looks ugly, but I don't care about the CSS.
I want to show you how AJAX works and I want to submit this form to a PHP server.
So, what do I want to create with you right now?
Well, let's try and submit this form.
Look at that.
We get an error message.
Your funky username is required.
Choose a food man.
But if we go to our HTML,
look at our index file.
There is no required attribute on the input elements.
Can you see?
So what this means is that we are performing server side validation.
Wow.
How awesome.
Of course, if the user chooses username and tries to submit the form, we only get an error now associated
with picking the favorite food.
If the user doesn't have a username but puts their favorite food as grass, click submit,
of course, only the username is required.
The user can then fill it in, click submit and we are successful
here. We get displayed a success message back from the server saying everything has been done.
How awesome is this?
And this is what I want us to create.
It's going to be very, very simple. Like I mentioned,
here's our index file.
You'll notice that we're using AJAX right? On this form wrapper,
there is no action attribute.
There is no method attribute.
And as I mentioned previously, when we're using AJAX, we're using JavaScript.
So that's why I've got the script tag here.
We grab all our elements, we're listening for a submit event on the actual form, we prevent the page
default refresh from happening, and then we're using AJAX. Specifically,
I'm going to be using this XHR object.
Don't worry too much about understanding the code.
I'm going to be writing this code up from scratch with you in real time.
In fact, I actually already coded this up in real time with you and I've just obviously used the end
result of the code to film this introduction video.
So there we go.
Hope it's making sense.
Try and give it a go.
At least just try build the HTML form.
Don't worry about building the PHP file and then AJAX.
I know I haven't taught that yet, so we're going to go through that together.
I seriously can't wait.
I'm super amped [excited].
See you in the next lecture.