Using event-driven AJAX
- Next steps
Viewers: in countries Watching now:
- What is AJAX?
- Making requests asynchronous
- Updating the DOM with getElementById
- Reading JSON files
- Working with jQuery and AJAX
- Sending and searching JSON data
- Incorporating CSS transitions
Using event-driven AJAX
So right now this script is executing whenever it gets to it in the index.html file, which is at the very end. So this page loads and then the script runs right here, so all this is executing right then. So what we'll do is prevent that from happening, by putting everything inside a function. So we'll grab all those code and we'll paste it right there. Let me go ahead and indent that a little bit. And now if I save this and I take a look at my page, you'll notice that nothing is happening because that function is not being called.
So we can do an onmouseover, and I'll save that, refresh our page. Now when I go over this button, it loads the text. So mouse over that button and there's the text. So something interesting about events is that not all elements on a page can trigger the same types of events. So for example, there's an element called onload, so you might be tempted to say something like this: whenever this button finishes loading, then execute the function. So let me save that and see what happens. When I refresh the page, this is not loading, and it really doesn't matter what we do here.
That's because the onload event doesn't make sense for buttons; it really only makes sense for a page or a body tag. So it's an attribute that can only go in the body tag. So let me save that and come over here. I'll refresh the page, and now you can see that it's kind of doing what it did before. As soon as the page loads, or as soon as the body of the page has finished loading--and it's going to load the text from our file. That's just one thing to keep in mind, not all elements can trigger any type of event. There's actually a ton of events.
So that puts the button in the mybutton variable, and then what I can do is check for a click. So I can say mybutton.onclick= and then I can execute the function called loadAJAX. So I'll save that. And notice the different notation here. I don't need the parentheses in here. So I'll save that, come over here, refresh, Load button, and now when I click on the button, it loads my text. So there's a different way to write this, and it doesn't really matter which way you do it, but you'll see it in both ways on the web.
So one of the things that you can do to shorten this a little bit is actually create the function as a function literal. So I can get rid of all this right here and just say =function and then it will just execute the function as soon as that mouse is clicked. That's okay if this is the only button that's going to load the list of names for us. If you wanted to use a function that was more generic, you might want to keep it the other way. So let me save this and over here refresh, and we click and there's our text. So events are pretty easy to work with.