Hey, everyone, in this video, we're going to learn how to do Ajax with Jay Querrey and this is going
to make our lives way, way easier.
I wanted to show you how to do this with vanilla JavaScript or plain JavaScript like we've been doing,
because it's important for you to know how to do it.
But you will see that doing this using query is way easier.
So if you are working on a website that has J query loaded, there's no reason why you shouldn't use
J.
Quarrie for your AJAX requests.
So let's go back to Visual Studio Code and let's change a few things here.
So we are going to ignore everything we've done here.
As you can see, we have to write a lot of code.
We need to keep track of the state.
Then we need to test if the state is for and if the status is two hundred.
Then we need to open the request and send it with Jake, where we won't have to do any of this.
So the way we do this with Jake Wari, actually let me do this down here.
So this is less than 48 Ajax with.
Jay Querrey.
All right, so the way we do this is the following.
We're going to call the dollar sign here, which is what we always do with Jake Querrey, then we are
going to call the Ajax method.
So here it is.
So open and close parentheses.
And as an argument of this method, we're just going to pass an object.
So here's the object, let's start it right now, and inside it, we need to pass some properties.
So one of the properties is the URL property, which is going to be the URL of the request.
So let's just copy this.
So this is the URL, then we need to pass the type of the request which we were using the get method.
Then something super, super interesting, let me show you this, if you pass this data type.
As Jason, you don't even have to pass the answer because it is going to pass automatically.
So we are telling jury that we are receiving the response in Jason and we want it as a JavaScript object.
So that's enough.
And now, as I've said, we don't have to keep track of the status or the state of the request because
with Jake Wari, we have two properties.
One.
For if things go well and the other one, if there's any error, so the one we are going to use, if
the status is two hundred, if we receive the response without any problem, is the success method.
So here we are going to pass a function.
And as an argument of this function is going to be the response text already converted into a JavaScript
object, so we can just do this and let's do console that log just so we can check it out.
So let's send the data to the council and then let's create another property, which will be the error
property and same thing, we're going to have a function here.
But this time, we don't need to pass the data.
We just need to send to the council that.
There's an error in the request, just so we know if things go wrong, so that's enough, we just have
to do it like this.
So let's compare with the amount of code that we had to write in JavaScript with Jake Wari.
This is going to be way easier.
We are already going to have the data in in a shava script object.
We already have a case for success and a case for error, which is really, really cool.
So let's comment all this art shift a.
And let me save this, let's go back to our page to test this out.
So as you can see, things are working well with our response and now we can type the rest of the code
we had here, so this for the response, the answers, and then showing them separately in the console.
But instead of just based in this inside here, I don't think we should make our request with what we're
going to do with it.
Because then we lose a bit of flexibility, so the best thing here would be to have a different function.
So let's create a function called present.
Question or something like this.
Present.
Missing a here so present question and right here, I'm just going to pass all that object so I can
call it data.
And inside here.
I'm just going to have data here, so data.
All right, so now we have this in a separate function, and now when we go inside the success, instead
of sending it to the gun so we can call.
Our function so present question, so if the request is successful, we're just going to get the response,
which is already coming as an object, then we are going to execute this function and this function
is going to take care of separating the question and the answers and sending it to the council.
So if everything went right, we should be able to see the same thing we had before.
So here it is.
We have the question.
We have the answers.
This is very good.
So we are able to move on and use Jake in our project.
So before we finish this video, I just want to show you something real quick right here when we have
success and error.
This is one way of dealing with the status of the request, but there's another way of doing this.
So instead of using properties, you could use methods that you can place right after the main method.
So here we have the Ajax method that finishes here.
So then after doing this, there is one called Don.
So we can call it like this, and inside here, we are going to pass a callback function.
We have our data.
And here we are going to do the same thing.
So we don't need the success.
Property anymore, and we could do the same thing for the error, so the name of the method is actually
fail.
So we would do the same thing here.
So another callback function.
If this fails, then we can do this now, let's erase it and let's try it out.
So now we only have three properties in this object that we are passing as an argument.
And when this request is finished, if the status quo is two hundred, if everything went well, we
are going to go inside this don method.
If not, we're going to go inside this fail method.
Let's save this.
Let's refresh the page and as you can see, we have exactly the same result.
I don't know which one do you prefer?
I personally prefer to put everything inside our object.
I think it's better, more organized like this, unless, of course, you have a great amount of code
that should be executed on success and fail.
And if that's the case, maybe it's better to use a separate method for our example.
This is good like this.
So this is how I'm going to be working with this.
Let's save this to see if nothing broke.
Refresh the page, I'm getting it again, so pretty good.
We are ready to move forward.
I'll see you in the next video.