Let’s have a look at last year’s page to see how it was set up and what it looked like, so we can understand better what is being asked by the marketing department.

Configuring a plug-in

Plug-ins are extensions to the base jQuery library that improve functionality, or make specific functions or tasks easier. In the example above, in combination with our CSS, the idTabs plug-in converts our ul element into clickable tabs and tells the a links in our lis which div elements to show when they are clicked. This particular plug-in gives us a very easy-to-use navigation structure for our page, so we can keep different types of information visually separate but still use the same display area.

Relax

Don’t worry too much about the plug-in.

Plug-ins provide additional functionality to the default jQuery library. We’ll look more at these in Chapter 10, but for now let’s see what this one can do to speed up our project for us...

Ready Bake Download

Before we go on, let’s look at last year’s files to see how they set things up. The code should be in the last_year.zip file (along with all the other files you can download for this chapter from http://thinkjquery.com/chapter08). Here’s a partial look at the three main files we’ll need: my_style.css, index.html, and my_scripts.js.

The marketing team wants the page to update in almost real time, so those hardcoded results in the HTML file have to go. And they only used JavaScript to update the time on the page! This is the perfect opportunity to take your jQuery to the next level. Welcome to the next generation of web apps, where jQuery, JavaScript, and a little bit of Ajax and XML can make your applications feel like dynamic (basically, the opposite of static), responsive desktop apps.

Ajax, which stands for “Asynchronous JavaScript and XML,” is a way of passing data in a structured format between a web server and a browser, without interfering with the website visitor. With Ajax, your pages and applications only ask the server for what they really need—just the parts of a page that need to change, and just the data for those parts that the server has to provide. That means less traffic, smaller updates, and less time sitting around waiting for page refreshes.

And best of all, an Ajax page is built using standard Internet technologies, things you have already seen in this book, or already know how to use, like:

To use Ajax, we’ll look at a data format that’s been around for a while (XML) and jQuery’s method of handling Ajax requests, ajax.

Despite knowing some jQuery now, dealing with data threatens to drag us back into the days of the old web, where we had to refresh the whole page, or link to a completely separate page, in order to get some or all of the data to update. And then we’d be back to websites that seem sluggish, as the whole page has to be requested from the server each time. What’s the point of learning a bunch of cool jQuery if handling data is just going to slow us down again?

Enter Ajax

Ajax allows you to exchange data with a server in a dynamic way. Using Ajax and some DOM maipulation, you can load or reload only a portion of the page with jQuery and JavaScript.

As we mentioned earlier, Ajax is a way of passing data in a structured format between a web server and a browser, without interfering with the website visitor. But, really, it isn’t one thing—it is a combination of different technologies used to build exciting, interactive web applications. The JavaScript portion allows it to interact with the DOM structure of your page. Asynchronous means it can happen in the background, without interfering with your page or a user interacting with your page. And the X is all about the data.

Yes, you could use HTML. But for the transfer of information, XML offers some unique benefits over its sister language, HTML. Let’s have a look to see what those benefits are.

XML is an acronym for eXtensible Markup Language. It offers a widely adopted, standard way of representing text and data in a format that can be processed without much human interaction. Information formatted in XML can be exchanged across platforms, applications, and even across both programming and written languages. It can also be used with a wide range of development tools and utilities. XML is easy to create and edit; all you need is a simple text editor, and the XML declaration at the top of the file. The rest is up to you!

XML doesn’t DO anything

It may sound a little strange, but XML doesn’t really do much itself. XML structures and stores information for transportation. In fact, XML is really a metalanguage for describing markup languages. In other words, XML provides a facility to define tags and the structural relationships between them. It is important to understand that XML is not a replacement for HTML. XML is a complement to HTML. In many web applications, XML is used to format data for transport, while HTML is used to format and display the data. Let’s take a closer look at an XML file that contains data about some books.

XML is used to format data for transportation, while HTML is used to format and display data.

There are no Dumb Questions

Q:	Q: So the big deal about XML is that you can create your own tags?
A:	A: Exactly! It’s pretty convenient to be able to define elements and structure that’s suited to your business. Even better, XML is a standard, so tons of people know how to work with it. That means your vocabulary is usable by lots of programmers, in client-side and server-side programs.
Q:	Q: Wouldn’t it be easier to just make up our own data format?
A:	A: It might seem that way at first, but proprietary data formats—ones that you make up for your own use—can really cause a lot of problems. If you don’t document them, people may forget how they work. And if anything changes, you need to make sure everything is up-to-date: the client, the server, the database, the documentation... that can be a real headache.
Q:	Q: So are people really using XML as much as you make it seem?
A:	A: Given its flexibility for creating whatever data structures you need, XML is used as a basis for many different types of markup languages around the Web. There are more than 150 different types of languages that use XML, ranging from RSS (RDF Site Summary aka Real Simple Syndication) for news or audio/video feeds; to KML (Keyhole Markup Language) for geographical information used in Google Earth; to OOXML (Office Open XML), a standard submitted by Microsoft for word processing files; spreadsheets, presentations etc.; to SVG (scalable vector graphics), which describes two-dimensional images; to SOAP (Simple Object Access Protocol), which defines methods of exchanging information over Web Services. Wow, that really is a lot of uses for XML!
Q:	Q: OK, I get why we should use XML, but doesn’t it become a “proprietary data format” when we start declaring element names?
A:	A: No, not at all. That’s the beauty of XML: it’s flexible. The server and the client need to be looking for the same element names, but you can often work that out at runtime.
Q:	Q: But aren’t all web pages asynchronous, like when a browser loads an image while I’m already viewing the page?
A:	A: Browsers are asynchronous, but the standard web page isn’t. Usually, when a web page needs information from a server-side program, everything comes to a complete stop until the server responds... unless the page makes an asynchronous request. And that is what Ajax is all about.
Q:	Q: How do I know when to use Ajax and asynchronous requests, and when not to?
A:	A: Think of it like this: if you want something to go on while your user’s still working, you likely want an asynchronous request. But if your user needs information or a response from your app before continuing, then you want to make her wait. That usually means a synchronous request.
Q:	Q: Shouldn’t I use XHTML to interact with XML?
A:	A: Funny story: XHTML is XML. At its core, XHTML is not as similar to HTML as people think. XHTML is a stricter language when it comes to parsing, and originates from the same family as XML. But that doesn’t mean it can parse it or interact with it any better than HTML can. This book’s markup is actually using HTML5, which will encompass XHTML5 whenever the standard specifications get released.

You’re right.

Let’s get that out of the way, so we can get on to adding some Ajax to our page...

HTML Code Magnets

Rearrange the magnets to complete to code to create two new tabs that can display different pieces of information: one for male finishers (with the ID of male) and one for female finishers (with the ID of female). You can remove the About tab, but keep the All Finishers tab. In each section, put an empty ul element that will contain your runners. Also, remove all the existing content from the finishers_all ul element.

HTML Code Magnets Solution

Now you should have two new tabs, one each for male and female runners.

Test Drive

Update your index.html file with the code you completed in the magnets exercise and open it up in your favorite browser.

Nice work!

The page is starting to take shape. Now let’s look at how we can go about getting data from the server so we can populate each of those tabs with some real race information.

You want data? jQuery and Ajax are primed to provide it for you. The jQuery Ajax method returns an object (you remember those from Chapter 6, right?) with data about the particular action you are trying to perform. The ajax method can accept many different parameters, and can POST data to or GET data from a server.

For a complete list of all the parameters available on this method, visit the jQuery docs site at http://api.jquery.com/jQuery.ajax/. There are also a series of jQuery convenience methods for dealing with Ajax calls. We’ll get to those a bit later, we promise.

For now, just update your my_scripts.js file with this code, only including the new code in bold below.

Test Drive

Update your my_scripts.js file with the code from the previous page. Then, download the sample XML file for this chapter from http://thinkjquery.com/chapter08/step2/finishers.xml, and save it in the same directory as your index.html file. When you’ve done this, open index.html in your browser, and open up the “Network” tab (in the developer tools in Google Chrome), or the “Net” tab (in Firebug for Firefox). Your XML file should be listed there, along with the other files from your page.

Good point.

Now that we know we can load the XML file into the browser, we need to pick out the necessary text and display it on screen. We’ll need a way to find each runner in order to add him or her to the correct list on the page. And yes, it’s good practice to put the ajax calls into functions, so you can call them whenever you need them.

We need a method to pick out each runner from our XML file and be able to display it on the screen. Luckily, jQuery supplies us with the find method, whose job it is to seek out elements that match whatever criteria we give it. find allows us to search through the descendants of elements in a structured, hierarchical set of information, like the DOM tree or an XML document, and construct a new array with the matching elements. The find and children methods are similar (we looked at the children method back in Chapter 4, when we were building the menu for the Webville Eatery), except that the latter only travels a single level down the DOM tree. And we might need to go further...

jQuery Code Magnets

Rearrange the code magnets to create a function called getXMLRacers that will call the ajax method and load the finishers.xml file. Once the load is successful, empty all the lists that will hold the information, and then find each runner in the XML file and determine whether the runner is male or female. Append the runners to the appropriate list for their gender, and always add them to the finishers_all list. Then, call the getTime function to update the time on the page.

jQuery Code Magnets Solution

Using find and each, you can loop through the finishers.xml file, check the gender, and add each runner to the appropriate tab in your web app.

In this example, the line starting with “var info = ...” was too long for the page, so we had to let it run onto the next line. You won’t need to do that in your code.

Test Drive

Update your my_scripts.js file with the getXMLRacers function. Also, replace the call to the getTime function (in the document.ready section) with a call to the getXMLRacers function instead. The getTime function is now called inside this new function. Make sure you run all your code through your web server, so the URL should say http://, not file://. Again, make sure your XML file is on the same server as your HTML file, or you will encounter those pesky same-origin permission issues.

Yes, it should.

Luckily, in the previous chapter, we’ve already seen how to schedule events to happen regularly on a page. Let’s have a quick look at how to do that again, and what options we have this time...

In the last chapter, we saw that both JavaScript and jQuery offer timer methods that call functions that run based on time passing. JavaScript’s window object has four timer methods for timed control: setTimeout, clearTimeout, setInterval, and clearInterval. jQuery provides the delay method, but it focuses on effects and offers no option for scheduling or repeating actions. So, that one won’t help us here...

Not so fast!

We can’t always be so sure. setInterval normally would work to schedule regular events on a page, but when dependent on outside resources (like our data file), it can cause problems.

A self-referencing function calls itself during its normal operations. Such functions can be particularly useful when you need to wait for the function’s currently running operation to complete before running it again. Combine this with a setTimeout call, and you can schedule a function to run but only keep going if the previous call to the function was successful. Otherwise, it won’t reach the call to itself in the code, and hence it won’t be called again.

Sharpen your pencil

Create a function called startAJAXcalls that gets called when the page is loaded and which will call the getXMLRacers function every 10 seconds. Define a variable at the start of the script file, inside the $(document).ready function, called FREQ and set it to the number of milliseconds we will need as a parameter for the frequency of our repeated calls to the getXMLRacers function. Use setTimeout to call the startAJAXcalls function to make it self-referencing, after the getXMLRacers function is complete. You’ll also need to call the startAJAXcalls function directly in your code to start the timer.

Sharpen your pencil Solution

This solution uses setTimout inside the startAJAXcalls function to call the getXMLRacers function to get our XML, plus a call to itself. This self-call will ensure that the next call will only happen when the last one has completed. This will guarantee that there is not a buildup of requests to the server if the network is slow, or if a response from the server does not come back before the next call is scheduled to be made.

Test Drive

Update your my_scripts.js file with the new code you just created. Also, don’t forget to add a call to the new function just after your call to the getXMLRacers function at the bottom of your script. Then, view the page in your browser, and use the “Network” feature of Google Chrome or the “Net” feature of Firefox’s Firebug to see the file get loaded every 10 seconds. Once you see this happening, update your XML file, using your favorite text editor, with the entry listed below and see your new runner appear on your page... (Don’t forget to save the XML file after you’ve updated it!)

As we’ve seen so far, HTML is great for displaying information on a page and XML is great for formatting data for transportation to a page, but what if you need your page to actually do something, like tell the time or get data from a database? Sure, we could probably do some more fun things with jQuery and JavaScript, but why not use something designed for the job?

Server-side languages to the rescue!

There are several different types of server-side languages—like JSP, ASP, or Cold Fusion—but we’re only going to focus on one for our purposes: PHP.

PHP (which stands for PHP: Hypertext Processor—yes, that’s an acronym within an acronym; don’t ask us why!) is a free, general-purpose, server-side scripting language used to produce dynamic web pages. Files that contain PHP code are run on the server, and produce HTML that is then provided to a browser to render. We’ll look at PHP in a little more detail in the next chapter, but for now we’ll see how it can help us with our “updated time” feature.

PHP is used to dynamically produce HTML, which is then displayed in the browser.

OK, we’ll confess, there is already a JavaScript function we could use to get the time. But it is a large, complicated function for doing something so simple. Luckily, PHP gives us a very easy way of getting the time, using the date function. Just like the functions you have created up to this point, it takes multiple parameters and returns a different version of the date, depending on what parameters you pass in. The main parameter determines how you want the date to be displayed. Let’s have a closer look:

For a complete listing of the parameters of the date function, visit http://php.net/manual/en/function.date.php.

Do this!

Create a new file in the same folder as your index.html file, and call it time.php. Add the following code to your new time.php file.

Test Drive

After you save your time.php file, bring it up in your browser to make sure the date is in the correct format. PHP code must run through your web server, so the URL should say http://, not file://. Also, make sure the URL is pointing to the server where you are developing your code.

Yeah, we’re not getting on that plane quite yet. Let’s see what’s left to do:

1. We want to indicate on the page how recently the page was updated.

2. We want to indicate the frequency of the updates.

3. We want to give people the ability to stop and start the updates, should they so choose.

Let’s have a go at the first and second items on the list. We’ll tackle them together since they are related.

Sharpen your pencil

Add a <span> tag, with the ID of freq, in the footer of your index.html page. This will be used to indicate the result of a new function called showFrequency, which should display how often the page is updated. Also, create another function, called getTimeAjax, which will load the time.php file using the load method—a jQuery convenience method for Ajax. This method will take a URL as a parameter and write the result automatically into the div with the ID of updatedTime. Last, replace the call to the getTime function in getXMLRacers with this new getTimeAjax function.

Sharpen your pencil Solution

Now you’ll have added a <span> tag with the ID of freq in the footer of your index.html page to display how often the page is updated. You’ve also created a new getTimeAjax function, which loads the time.php file using the load Ajax convenience method, which will then write the result into the updatedTime div. You’ve also updated the getXMLRacers function to use the new getTimeAjax function instead of the JavaScript getTime function.

Test Drive

Update your my_scripts.js file with the new code you just created. Also, don’t forget to add the new span element to your index.html file, and replace the call to the getTime function with the getTimeAjax function.

1. We want to indicate on the page how recently the page was updated.

2. We want to indicate the frequency of the updates.

3. We want to give people the ability to stop and start the updates, should they so choose.

That’s a tricky one.

We’ll need to change the function to only run when certain conditions are met.

Back in Chapter 5 and Chapter 7, we created a “monster” function by using setTimeout to continuously call the functions that produced the lightning effects. This led to some unexpected consequences—the page lost focus and the visual effects piled on top of one another when someone returned to the app.

However, since we already determined that we need to wait until the previous call to the function is finished, we can’t switch to using setInterval for these calls.

We need to come up with a better solution. And what better solution than one we’ve already seen? We can’t use the window.onblur and window.onfocus browser events, since we don’t want people to have to leave in order to stop the updating. But we have already seen, across several chapters, how to run code based on conditional logic, so let’s use that for our solution here as well.

Sharpen your pencil

Create a global variable called repeat, with a default value of true. Create a function that will alter the repeat variable with the click of a new button, giving it the ID of btnStop. Set the HTML of the span element with the ID of freq to say “Updates paused.” Also, create a button called btnStart that will set the repeat global variable to true, as well as call both the startAJAXcalls and the setTimeout functions if the repeat variable is true. Add the new buttons to the footer area of the page.

Sharpen your pencil Solution

When finished, you should have a variable called repeat that will control whether or not the function will call itself again to get the XML file for updating. The value of this variable should be controlled by the btnStop and btnStart buttons, which are added to the footer area of the page. These buttons also set the text of the freq span element to show different messages depending on whether or not the page is being updated.

Test Drive

Update your my_scripts.js file and your index.html file with the new code you just created. Then, load the page in your favorite browser to make sure it all still works. Try out the new buttons to make sure they stop the Ajax requests. You will be able to tell in the “Network” tab in Google Chrome, or the “Net” tab in Firebug for Firefox.

It works!

Now you’ve got a page that can be updated in real time (by updating the XML file), and you’ve enabled users to start or stop the updates.

You’ve got Chapter 8 under your belt and you’ve added a little PHP, some XML, and a bunch of Ajax to your toolbox.