Okay, so let's see what of this function is expecting as parameters.
Number one is expecting the request URL.
Well, that makes sense.
We need to know where to request, where to go,
to make that get request on the server.
So that's the url.
And, we'll need a response handler function.
So after the server response, the response handler function
is what is going to handle the result of what the server returns.
Okay so those are the two arguments we expect to be passed into this function.
The first I'm going to do is I'm going to get that request object and
this is just that function we just spoke about this request object right here.
So we basically are going to get this new XML HttpRequest object.
So once we're done with that, once we got this request object,
we're saving it in this local variable.
And then we're setting this request object onreadystatechange to another function.
So onreadystatechange is different stages in the network communication
between the browser and the server, and we're going to see that in a minute.
So what we're doing in this function is we're calling this handleResponse, and
the handleResponse function is passed a request, this request object, and
has passed the response handler as well.
So when the server comes back with a response, this is the function that's
going to get called every time there's a change in communication state including
the very final one that we're completely ready, and here's your final response.
This is Is the function that's going to get called.
But we're not done setting up the request.
The other thing we need to do is actually go ahead and
make the open command, with a get request.
So that's the type of request we want, that's the method of our request.
We're going to pass it the URL, and we're going to make sure to say true here.
And if you pass false here, it will make this request a synchronous request,
which means the browser will freeze, and will wait for
the response before doing anything else.
And we don't want that, we want this request to be asynchronous, in other words
the second this request is made, we want the browser to continue operating.
So and the last step here is actually to go ahead and send the request.
So all of these lines right here were really just to set up the parameters of
the request, what it's going to be like, and this line right here,
the last line is actually the one executes the request and sends it to the server.
The reason we're passing a null here is because if this were a post request
our request parameters would not be part of the request URL, as you remember from
a previous lecture but it would actually be part of the body of the request.
And this is where you put the body of the request.
So if you wanted to have named value pairs for the request parameters,
you would put that string right here, or probably save it in an object and
then kind of paste that whole thing in here.
Now, let's take a look at our handle response malfunction that we
provided here.
The handle response function as you can see takes our original request object and
the response handler function that our client, meaning our user whoever is using
this whole library, this whole ajaxUtil library is providing for us.
So we're kind of doing some,
kind of nitty gritty work that they wouldn't have to do anymore.
Number one is, request that ready state,
we want to make sure there's four states in this request already.
Number one, we want to make sure we're in the last state, so it is ready to go.
We don't have ay other lower level network communication's going on.
And what they are is really not important but what is important is that you have to
check whether or not it's really straight forward.
That's number one and
number two is we want to check that our request.status is 200.
And this 200 is that response status code we spoke about previously.
So 200 means everything is fine and here comes your response.
And if those two conditions are true only then should we then take the response
handler, that is the function that the user of this library provided for us.
And then we could go ahead and pass it the request that the user of this library
will start pulling out of this request the response of the server.
So that is how this response handler is being used.
The last but not least is we want to expose this utility to global objects so
we can actually use it.
And what we're going to do is we're going to change the name of it a little bit,
we'll say global dot and we'll use the dollar sign, because we want to be all
fancy obviously, dollar sign ajaxUtils, so just like jQuery uses dollar sign,
we'll also use dollar sign as power of our variable.
So dollar sign ajaxUtils, that's what's going to be exposed to the global object,
is going to be equal to our ajaxUtils that is the local objects right here
in this immediately invoked function expression.
Now I hope you're wondering, at least a little bit,
as to why this crazy setup is being made right here.
Onreadystatechange, we're passing it a function expression, so
we're not executing this function.
We're just passing the value of this function.
Not the return value, but just the value of the function object, and
we're setting it to this property onreadystatechange.
And inside of that, we're calling handleResponse, and this
is what is going to be executed, since you can see the parenthesis around it.
Why not simply erase this and happily call, I'm not going to
be able to fit in on one line here, but happily call this function right here?
Why not have onreadystatechange equal to handleResponse?
Well first of all, we need to equal it to a function value,
not the return of a function, so this will have to go away.
You can't really pass parameters into a functional value.
Only when you're executing a function, can you pass parameters into it.
And we're not quite ready to execute this function, we just want its value.
Well when we did that, this function right here,
wouldn't really have the request, or the response handler available.
Well, one way we could take care of it, and unfortunately, and you'll see why I'm
saying unfortunately, a lot of people do take care of it, is by doing this.
We can just take this line out of here, and make it a little bit more global.
And now our request is available everywhere.
So it doesn't have to be part of these parameters, part of these arguments.
We could just pull it out of the global part, outside of this function.
And obviously we need to take care of this as well, to make it a valid syntax.
So let's take a look as to what we've done.
What will happen now?
Let's say somebody on the page clicks some button that invokes this send-get request.
This will go ahead and
use the request that already has been done right here which it seems pretty good.
We'll assign handleResponse to our onreadState change,
that's that function and I go ahead and make the request.
The only thing is this handle response also really wants, at least in our case,
wants the response handler function and we're not passing that.
But that's easy to remedy by just saying var myhandle response or
myhandler is equal to, and we will just equal it to this, right?
So now to do that, we could just say this is equal to null.
