[SOUND] So in the previous part of this lecture,
we looked at ajaxUtils.js which is small library we wrote in order
to make Ajax request to the server and process the response at least
some what by being able to give our user the use of our library that is.
And then this case it's just us.
The use of our library to be able to give them the ability,
to give a function that he'll be able to pass to us and
will then get called when the server returns the response.
So right now I'm located in script.js which is located in lecture 57 folder.
So let's go ahead and close the file Explore of Sublime Text and
let's take a look at our script.js.
You can just as a very tiny review, ajax-utils.js is where we're defining
our ajaxUtils object to which we have one thing attached, which is send request.
And again send request is expecting a requestUrl and
it's also expecting a responseHandler function.
So we'll be passing in a value of the function and a request url.
So let's go ahead and go to script.js and see what we're doing here.
The first thing we're doing is we're adding an EventListener for
dumb content loaded.
So which means this is only going to execute when the page is loaded all
the HML content, but hasn't yet loaded all the CSS or pictures and so on.
Well we don't really have any pictures so either way.
And then what we're doing is if we take a look at our HTML we
have this button right here, and that's the only button in the entire HTML.
What we're doing is, we're unobtrusively attaching an event binding to that button.
So we're doing document.query select and we're saying the button.
And that's the only button in the document, so
therefore that's the only one should get returned.
And we're adding an EventListener waiting a click EventListener.
So when the user clicks that button,
we want this function right here to get executed.
So let's see what we're doing here.
Well first of all we're setting var self = this, and we've seen this before.
So and I'm setting up a name, at this point just going to be and empty string.
And then I'm using our agency tools to call the server to get that name.
So I'm saying agency tools, remember we set it to with a dollar sign.
Let's take a look at it we bound the dollar sign
global.$ajaxUtils to our ajaxUtils object.
So, the ajaxUtils.sendGetRequest and we're providing it the URL.
So we're giving it the URL of /data/name.txt, and
it wants a handler function.
Remember the response handler function?
That takes a request object is going to have in it our response from the server.
It's a little bit weird in JavaScript that the response object
is still called the request.
But it is, so we're just going to continue doing it.
So the function is, again, we're defining it line.
We're not providing a function value.
But it's a inline function expression.
And we're saying that this name right here should be returned self.name,
that's the name right here.
And we want to request that response text.
So request .responsetext or the response text property.
Of the request object is what holds the response from the server.
So we want to save that response straight inside self.name.
Once we called the ajaxUtils and sent this request, now that the name is set,
we're doing a query selector on the content and remember the content in
the dot HTML is just this empty div place holder, so we're calling this content.
And we are using the idea of the content.
And we're saying that innerHTML should be h2Hello plus self.name,
that's that name right here, plus the exclamation point.
So it should say Hello and the Yaakov Chaikin at the end.
So let's go ahead and save that and let's go to our page and
open up our Chrome developer tools so we can see the console, just in case.
And let's go ahead and click this button and see what happens.
