Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
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.
Get unlimited access to all courses for just $25/month.Become a member
61 Video lessons · 100280 Viewers
56 Video lessons · 113245 Viewers
71 Video lessons · 82130 Viewers
131 Video lessons · 39412 Viewers
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.