If you want to check that out, it's a great course that will get you introduced to everything there is to know about AJAX. For this course, I want to build an application that is a rotator. It reads a JSON file from an external source and rotates it using a few libraries. It's a technique that I use on this website for a local bar camp event in my area. What I did here is I used this technique to power this rotating list of feature speakers, as well as the rotating list of sponsors right here, as well as the page footer down here that has all these icons, plus the list of speakers on the Speakers page.
We're going to start with a very basic HTML page right here, and I'm going to just set up an area for my speakerbox. I'll do a div with an id of speakerbox. And this is going to have an item inside that's going to be our carousel, and that's pretty much all of the HTML we're going to need. We're also going to need to copy the libraries that we're going to be using in this project. Usually, I go to jQuery and I copy the location of the CDNs from jQuery, but since I need to do three libraries, there's actually a website called cdn.js.
Cdnjs just lets you get all the libraries you need in one place. And you can do a little search right here, so we're going to need jQuery. There's a lot of stuff that uses jQuery. I'm just going to type 1.9.1. I know that's the latest version of jQuery, so that's going to find the library for me that I need. So I'm going to copy this and switch back to my application, and I'll add a script tag, and as the source I'm going to paste that right there and then do the same for my other libraries. I'm also going to need jQuery cycle.
I'll type in cycle. And I'm going to copy this link right here, switch over here, create another script tag, and just paste that in as the URL. Finally, I'm going to need a library called mustache.js, and the URL for that is right here. Copy that and do another script tag and paste that in. That's really all we need to set things up. We're going to do a lot more in other movies, but this just sets us up with a basic HTML page, and it links us up to the libraries we need to get this thing going.
One more thing: remember that when you're working with AJAX, you need to work off of a live server. You can't work with local files. AJAX is communication that happens between a client and a server, and so all the files for this project are going to be going into a live server. You can see the URL right here. Just remember that if you want to try this on your own, you'll have to use your own server and FTP the files into a location you can access on the web.
- What is JSON?
- Creating simple data
- Communicating across sites with JSONP
- Rotating with jQuery Cycle