Okay, so what we've been doing up till now, is in our jQuery, in our JavaScript, we have been asking to register event, which means call us back, jQuery is supposed to call our little bit of code back when something happens like the document's ready, or a resize, or we are going to do something like grab a piece of the DOM and then do something to it, change its background color, hide it, show it or whatever. So the next thing we're going to actually do now is, we're going to have jQuery talk to the server. So everything we've done up to now is jQuery going this way, talking to the docking object model. Now what we're going to do is have jQuery both talk to docking object model, but also talk to the server. So jQuery is going to initiate request-response cycles, which is different than you, as the user, clicking on something and doing a request response cycle, and so as we do more inneractivity we see that jQuery starts to increasingly talk, even talking to the database. We're not doing that yet in this example, and then update the DOM, and so without a full request response cycle you can actually get new information from the database, and that's how something like Facebook has a thing that, blink, you just got a new message from somebody, blink, without you actually refreshing the screen, because it's checking to see if there's any messages, and when it gets a message, it goes, blink, and it can do that with a little, blink. Now we're not quite getting there yet. Right now we're just going to look at how jQuery can look at and then talk to the server. One little example. So we have a little bit of code that does sleep(5) and then just prints out some POST data. Just so we can kind of see it, and I'll work through an example of this for you. We'll just kind of cover the code and then you can see it again while I just run through the example code. So we're going to put a form out, and this form is pretty much the same as any other form. We're going to give it an ID. We're going to have a name, and a value, and we're going to put a spinner in the form, and we're going to start it with display:none, and so this write is just going to have a box, but no submit button. So you'll notice that there's no submit button in this, and there's a spinner here. But it's hidden for now. So it's hidden spinner. So we got a from. Its name is one. It's got a value of Hello There, And there's a hidden spinner right next to it. That's our form. Then we have a little div, and you start increasingly, the more you move some of you rendering into the browser, the [LAUGH] more you find you just make an empty div, give it an id as a place to put something. We're going to put something in here later. So that's kind of the static stuff, we have this code that echoes output, and so here is the code that we're going to do afterwards, we probably should have put this in a document ready but it doesn't matter. So we can see a few different kind of techniques of jQuery in this. So what we're going to do, this code's running, as the screen is loading, and we're going to say, $ #target. So $ #target says, this form. So we're telling jQuery to look up, in the document object model, that form, $#target and .change. Now what we're doing is we are registering an event. So this paranthese goes all the way down to here. So what we're saying is, in this field, Hello There, if someone comes in here and types an x and then leaves the field, that is a change event, and when that event happens, come and run my code. So again, first class functions, all this code is code that we've got sitting here waiting until something happens in that form. Waiting until something happens in that form, and we get past a variable n, which is the thing that happened, and we'll be able to do stuff with it. So now, once this runs, this code in the middle hasn't run, it's just hung off of the end of the change event. Nothing happens, and if you don't change anything in the form, that code never runs. It's registered, but it never runs. Again, asynchronous, event based programming, something you kind of got to get used to. It doesn't run right away. The registration runs right away, but the code doesn't run right away. So we go in here, blah, blah, blah, and we type an X, and then we type leave. That triggers a change event and so that causes this code to happen. So, if you recall, there was a spinner here. So the first thing we do is we say $ #spinner. The spinner has an id of spinner, and then it shows it. So this spinner is an animated GIF, and so it starts spinning. So as soon as this code runs, that spinner appears and goes dot, dot, dot, dot, dot, dot, dot, dot. The dot dot dot has nothing to do with JavaScript, it has to do with the fact that it's just an animated GIF. You can go download spinner animated GIFs. The animation is part of the image itself, not part of the code that we run. The code we run revealed the image. Now, this pattern of revealing the image the moment we start writing something, this code we're going to do for a while, is going to run for a while, and so they show you that spinner to say we started doing something, don't freak out, hang on. The user experiences, when the spinner appears you're supposed to hang on, and then when it's done doing it's thing the spinner is going to go away. So the first thing we do is we show the spinner. The second thing we do is we go grab the form, and then this form variable is the form itself, and we just put an x in here, and we're going to do form.find, and we're going to search, this is a search string, within the form, there's a whole form here. We're going to find this, the name equals 1. If you remember that was the name of the form field, and then val extracts whatever the current text is in that form field, .val is another piece of jQuery. So this was just, this a big long jQuery statement that says let's get that stuff out. Get the x out, and so what text will be is, whatever it was in this form, like hello, and then you leave, the word hello will be in the variable text. That's what we're going to accomplish. Put out a log message, and now we're going to call a bit of code inside of jQuery, $ and then this is a method within that $ object. $ is just an object, and post is just a method within it, and now we're going to call a server-based script, and so the first parameter is the name of the server-based script. First parameter's the name of the server-based script. So if we go back and we take a look at the server-based script, that is going to run this code on the server, which is going to sleep five seconds, so that your little spinner stays up for a while, and then it's just going to print some print out and then going to go back. The thing about this is that this is now another asynchronous, it's like inception, it's an asynchronous thing that's happening within another asynchronous thing. So the on change is running code, but then we start up a thing, which sends data to the server, and we don't know how long that could take. That could take, in this case, it's going to take five seconds, because I made it take five seconds, and so you can't really, at this moment in the code, wait for the result. And we got a second parameter, because this is a post request, which is key value pair. So we're going to send val in, and this text that came from form is going to be sent it. So that's why up here, we say post sub val. So that is that form field. It was named one in the form, but we pulled it out and we posted it as val, because we sort of extracted the data from the form, and now we're making a post request manually in jQuery. So this first parameter to post, second parameter to post, and then there's a third parameter to post, and what this third parameter is, is code that will run when the post is complete. So this is delayed code. So jQuery sends the post, and then, time passes, and we cannot sit and wait at this point. We have to move on, because the browser could be doing a whole bunch of other things, and then eventually, when the post comes back, jQuery runs our code, and so it runs this code right there, and it passes in this parameter data, which is the response, which is blah, blah, blah, blah, which is the output of that script. So the output of that script comes into this variable. Like I said, it's inception. We are asynchronously being called because of a change method, and then we are calling something, which is going to asynchronously call us back when the post is completed. So this post happens, it comes back, it activates this, and so we're just going to log it, and so then what we're going to do is we're going to take that div. Remember this div with an ID result that has nothing in it? Now this might happen more than once, so the first thing we're going to do is go find it, remove anything if we put it in before, and then append the data. So there's some just text that come back in this variable data, and that's going to show up in that div [SOUND]. We're going to change the DOM and you're going to see something different, and then we're going to hide the spinner, because all this time that spinner has been spinning and now we get the data back, we put it out on the screen, blah, blah, blah, blah, blah, and then we hide the spinner again. The spinner vanishes, if it works. So this then is the post. Post itself returns an object, and we're going to add another asynchronous activity, and that is, if this thing that comes back is like a 404, or a 500, some kind of server error, and you would create a server error by making maybe a syntax error or something, or just making this be autoecho1.win, that is the wrong file and then you get a 404 back, and so what happens is if you get a 404 back, it's not going to run the success code. It's going to come down here, and this is a different asynchronous code. So by the time this is all said and done, you have a post that's gone in, and you have two pieces of code. You have the success code and the fail code. They're sitting there waiting. Time is passing, and then when jQuery gets the response back, if it's a 200 OK, it runs this code. If it gets a 404 not found, then it runs this code, and so we're going to turn this thing red, and put an alert up, and away you go. But this whole thing is constructing, and this is time passing. Wow. Take your time. I should have a demonstration of this actually running code, watch your console, figure all this stuff out. I try to keep this as simple as possible. We're kind of entering the part of the course where, if you say to yourself, I'll understand this code later, it's going to get bad really fast. So you're going to be like aah, because you need to understand every curly brace, every line of this. I made it as simple as I possibly could, but at some point I'm just going to expect that you're going to know how to throw a post back, and put in some success code, and some fail code, and not just say wow, that was a car accident with a bucket full of syntax. It's all very beautiful, it's all amazingly elegant, and it's all surprisingly easy to write as long as you really know what's going on. If you're just cutting and pasting, and then cutting and pasting some more, and then cutting and pasting some more you'll ultimately, it'll all just turn into mush for you. So come back to this, and watch this later if you're confused. So like I said, I wasn't going to tell you everything about jQuery. I just wanted to kind of show you the shape of the kinds of things that we're going to do with jQuery, we'll be using it going forward. We can set things up, we event handle, we do things in the DOM, we change things in the DOM. We can handle form data, we can send post-requests and get requests back and forth, we can do stuff with that and then change the DOM. It really is a beautiful way that we can build increasingly interesting applications that have amazing interactivity, and it's really only limited by how much creativity that you have.
