Where are we?

We’ve seen how PHP code can be embedded inside pages. The code is executed on the Web server, and a page passed back to the browser.

In this lesson, we’ll look at a variation that has become popular in the last few years: Ajax.

This lesson’s goals

By the end of this lesson, you should:

• Know how Ajax can get page fragments from a server, rather than entire pages.

• Know that Ajax improves Web interfaces.

• Know that Ajax is used by Web applications.

Dog movies

Suppose you run dogmovies.com. People can rent dog movies, or watch them on their computer.

Here’s a typical page. The most important thing is the movie list.

Figure 1. Dog movies page

This is the first page. Users click on the “Next” link to see the next page.

Each page has the same format:

Figure 2. More dog movie pages

The page header and so on are the same on all the pages. Only the movie list is different.

This is a prime candidate for Ajax.

Full and partial page updates

This picture shows what Ajax does.

Figure 3. Normal vs. Ajax

Normally, when the user clicks the “Next” link, the browser asks the server for an entire new page. That includes the headers and such that were already being displayed.

With Ajax, the browser asks the server for just the part of the page that’s changing.

The result? The whole site is faster.

To make this work, the site’s developer writes a program that runs on the server, in PHP or some other language. S/he also writes a program that runs in the browser, usually in the language JavaScript.

Ajax is not a separate technology. It’s a way of writing client-side programs and server-side programs that work together.

Detour: Programs in browsers

Remember that browsers can run programs inside themselves. Here’s an example. Type the number of dogs who live in your house, and click the button.

How many dogs live in your house?

   Advice

The program is something like this:

When the user clicks the Advice button:
  Get the number of dogs the user entered.
  If it isn't a valid number, show an error message.
  If dogs = 0:
    Show: That's too bad. You should get some dogs.
  If dogs = 1:
    Show: That's not enough dogs. Get another one.
  If dogs = 2:
    Show: That's a good number of dogs to have.
  If dogs is more than 2:
    Show: Lucky you, to live with so many dogs!

Figure 4. How many dogs?

The program doesn’t actually look like this, of course. But this is how it works.

How does the program get to the browser? The program is inside the page itself. When I was typing the page you’re looking at right now, I typed the program straight into the page.

So when your browser loaded this page, it loaded the program as well.

Ajax and the movies

Back to Ajax. Here’s the movie page again:

Figure 1 (again). Dog movies page

To make an Ajax version, where only the movie list reloads when the user clicks the “Next” button:

• Someone writes a program that runs in the browser. When the user clicks the “Next” button, the program asks a different program on the server for the next page of movies.

• Someone writes a program that runs on the server. When it gets a request from a browser, it sends a list of movies.

This improves the user’s experience with the movie site. The whole thing runs faster.

It could be even faster still. Suppose you look at page 1. While you’re looking at that, your browser could be downloading the movies for page 2. When you click the “Next” button, page 2 appears instantly, since the movie data has already been downloaded into your browser.

Rich interfaces

We’ve seen how Ajax can improve the user’s experience of the movie site, by loading pages faster. But Ajax can do more than that.

Let’s take another example, right from the page you’re looking at now. There’s a notes widget to the right. It says “Your notes for this page.”

Click the Edit button. Right now.

You see that a “Save” button appears. It saves your notes on the CoreDogs server.

But there’s a problem here. Suppose you’re reading this page, and want to make some notes. You click the “Edit” button, and type some notes. You keep reading. You type some more notes. You keep reading, and get to the end of the page.

Without thinking about it, you click on the link that takes you to the next lesson. Argh! You forgot to click the “Save” button in the notes widget. What happens to your notes?

It would be a pain if you had to remember to click “Save,” or lose your notes. But what if this page could save your notes for you?

Try it. Type some stuff into notes, but don’t click the “Save” button. Watch what happens.

After a few seconds, the browser saves your notes automatically. A little blue thingamijig shows up, telling you that there is a save happening.

This is an example of a rich interface. The page you’re looking at has some extra interactive stuff to make it more useful. The interactive stuff improves your experience with CoreDogs.

I hope!

Ajax makes this work.

• There’s a program on this page. When you type a note, the program waits for a few seconds, then sends the note to a PHP program on the CoreDogs server.

• The PHP program on the server waits for browsers to send it notes. When it gets some, it stores the notes in the CoreDogs database.

Web applications

You learned about Web applications earlier. Things like Google spreadsheets. They run in a browser, but are tools rather than what we normally think of as “web pages.”

Ajax helps make them run. For example, Google spreadsheets uses the same auto-save approach that CoreDogs does with its notes. Make some changes in Google spreadsheets, and after a few seconds, your browser will save your spreadsheet automatically.

How does this work? As you might expect:

• Your browser downloads a program that runs inside the browser itself. If you change something and don’t save, the browser sends your changes to a different program running on a Google server.

• The program on the Google server waits for browsers to send it changes to spreadsheets. When it gets one, it saves the changes to a Google disk drive.

Summary

In this less you learned that:

• Ajax can get page fragments from a server, rather than entire pages.

• Ajax improves Web interfaces.

• Ajax is used by Web applications.

What now?

HTML is the King of the Web. But there are other tech bits you need to know about. Let’s look at RSS, a technology that lets people learn what’s new on a site.