Ready to watch this entire course?
Become a member and get unlimited access to the entire skills library of over 4,900 courses, including more Developer and personalized recommendations.Start Your Free Trial Now
- View Offline
- 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
Skill Level Intermediate
jQuery is a great library and one of its mottos is that you can write less and do more, and one of the places where you can really see that is when working with AJAX. So let's take a look at how we can use AJAX with jQuery. jQuery provides several methods for working with AJAX calls, and you can see all them in this page right here. So for the most part, you end up working with one or two of these. So let's go ahead and load some content onto our page. Our HTML file is a simpler version of what we had in the last chapter, just a div with an id of update, and we're loading the jQuery as well as our script file.
The script document right now is empty, and our data file just has the words Hello World. So I'm going to switch over to my script and I'm going to type in some jQuery right here. So I'm going to target the update id element and then load into it our data.txt document. So let me save that and switch over to my browser, refresh my document, and you can see the text Hello World. So there's actually a lot going on in that very simple line of jQuery code. jQuery is taking care of a lot of problems with backwards compatibility in older browsers, and it also creates and sends the XHR request.
Let's modify our code so that we can use a class name instead of an ID. So I'm just going to change this ID right here to class, and all I have to do in jQuery is just modify this pound sign right here to select the class of update. I'm going to save that, switch over to my browser, refresh, and the text still comes up. So, classes are supposed to refer to elements that occur multiple times in the DOM. Let's go ahead and go to the HTML file and just copy this update element a few times. So I'm going to save this and I'll go back to my browser and I'll hit refresh, and now you can see that it's loading multiple times.
If you don't have that open, just right-click and select Inspect Element. I'm using Google Chrome as my browser. But take a look at the code right here. It's still showing the other classes, but it's only changing the first one. And that's pretty cool. So let's go back and try another one. We can actually tell jQuery to just load up the even classes. And I'll save that, come over here, refresh, and if you take a look at our code, we've got three up here, but it only did every other class right here--and that's really, really powerful, easy way to do something like zebra striping on tables.