AJAX & jQuery 101
Tutorial for City University, School of Infomatics
Web Applications Development Module – 2011
Download source files here.
View demo here.
In this tutorial we will cover a very basic implementation of the jQuery AJAX function.
All projects like this need a starting point. At the moment I am favouring the HTML5 boilerplate by Paul Irish, particularly the quick, bare-bones version created by Jonathan Verrecchia at http://initializr.com/
These templating systems save you valuable time when you’re starting a project, particularly a quick prototyping project which you know will be discarded at a later stage. You get all your CSS resets, and your javascript libraries, and everything is linked up and ready to go.
1. Because this demo involves PHP as well as HTML you’ll need to edit your index page’s extension, it should be ‘index.php’ instead of ‘index.html’. NB – we’re working with PHP so you need to have your files on a public web directory on a server that is running PHP. These demo files won’t work if you try to run them from your desktop or a local directory.
2. Next step is to create a new file called ‘ajax.php’. It doesn’t need anything in it yet, but that’s where we’ll be pointing our AJAX request later on. You need a bit of basic HTML in your index file. Put the following in there:
3. Next we are going to attach a click function to our links. This is a simple enough bit of jQuery – just create a click function like this in your script.js file. Don’t forget to put it inside a $(‘document’).ready function. I always stick a quick alert or console.log() function in after I’ve bound some code to a page event, just to make sure everything is firing correctly. It’s good practice to test little and often, rather than writing reams of code and then spending hours debugging it.
Once we’re happy that the function works when we click on a link we can start thinking about what our click function needs to do. At this stage we’ll pop over to ‘ajax.php’ and put in some basic content.
4. Open up your ajax.php file and drop in this code (inside PHP tags of course):
As discussed in the lecture AJAX is really at its best when it is being used to call data from a database, but connecting to a DB would have been outside of the scope of the demo, so we’re just going to use this array for testing purposes. When you come to think of an AJAX implemenation for your own applications of course you’ll need to write some SQL to get hold of the data you are after.
We have a data array with two sub-arrays, containing some basic info about two people. We have: User ID, Name, Description and an array of their ‘interests’ – which might be some kind of category label within a CMS system.
5. Returning to our index.php file you will see that the links we have applied our click event to have href elements like this: href=”#1″. We’re going to use jQuery to grab the numbers from these hrefs, which correspond to the user ids in our data array, and pass them to our ajax.php script.
Grabbing the hrefs using jquery is a simple affair. There are a number of different ways to do it – the example below is just one method:
We’ve got our user id now, and if you wanted to you could alert it out to make sure everything was working correctly.
6. Next we need to move back over to PHP for a bit (AJAX requires you to be flexible like that, bouncing between JS and PHP, unless you’re lucky enough to have a team of developers to delegate to!)
We will be passing our user ID as a POST variable to the ajax.php script, just as if we had submitted the value from an HTML form. We need to check that the variable is set, and if it is we use it to grab the relevant portion of the $db_data array:
7. The final step for the PHP file is to echo out some HTML using the data we have grabbed from the array. A simple box with a class of ‘person_info’ is fine. Not the use of PHP’s alternative syntax – it’s a good habit to get into if you are going to be developing templates that front-end coders are going to be working on – as they won’t appreciate you leaving spaghetti PHP logic all over the place. The alternative syntax is neater and easier to read for non-PHP developers.
8. The last step of our tutorial is the AJAX itself. As discussed jQuery is abstracting a lot of the work for us by creating the $.ajax() function. What we are going to do is pass a variable from JavaScript to a PHP script. The script will then run and return some HTML. Finally we use the ‘success’ callback of the $.ajax() function to run a final bit of jQuery that will populate a designated <div> element with the HTML that our PHP script has returned. This is what it looks like in practice:
Have a look through the full project source files now and make sure you understand how it all fits together. Every time we click on a link in index.php our JS is calling and running our ajax.php script. The output of that script depends on which link you have clicked – and as discussed would normally be connected up to some database logic.
This section of the lab should not have taken you too long to work through. Spend the rest of the lab considering how you might apply some AJAX functionality to your own applications. I will be walking round and am happy to give you advice and talk about specific implementations.