Head First Ajax

Chapter 1. Using Ajax: Web Apps for a New Generation

Tired of waiting around for your page to reload?

Frustrated by clunky web application interfaces? It’s time to give your web apps that slick, responsive desktop feel. And how do you do that? With Ajax, your ticket to building Internet applications that are more interactive, more responsive, and easier to use. So skip your nap; it’s time to put some polish on your web apps. It’s time to get rid of unnecessary and slow full-page refreshes forever.

Web pages: the old-fashioned approach

With traditional web pages and applications, every time a user clicks on something, the browser sends a request to the server, and the server responds with a whole new page. Even if your user’s web browser is smart about caching things like images and cascading style sheets, that’s a lot of traffic going back and forth between their browser and your server... and a lot of time that the user sits around waiting for full page refreshes.

Web pages reinvented

Using 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 parts that the server has to provide. That means less traffic, smaller updates, and less time sitting around waiting for page refreshes.

With Ajax, the browser only sends and receives the parts of a page that need to change.

Sometimes the browser doesn’t have to talk to the server at all.

Ajax is a new way of using existing technologies.

Ajax isn’t a whole new technology that you have to learn, like CSS or JavaScript, or a set of graphics techniques you’ll need to crack open PhotoShop to accomplish. Ajax is just a new way of thinking about how to do what you’re already doing, using technologies you probably already know.

So what makes a page “Ajax”?

Ajax is a way of designing and building web pages that are as interactive and responsive as desktop applications. So what does that mean for you? You handle things at the client’s browser whenever you can. Your pages make asynchronous requests that allow the user to keep working instead of waiting for a response. You only update the things on your pages that actually change. And best of all, an Ajax page is built using standard Internet technologies, things you probably already know how to use, like:

• XHTML

• Cascading Style Sheets

• JavaScript

An asynchronous request is a request that occurs behind the scenes.

Ajax applications also use a few things that have been around for a while but may be new to you, like:

• The XmlHttpRequest

  Note

  We’ll look at all of these in detail before we’re through.

• XML & JSON

• The DOM

Your users can keep working while the request is taking place.

There are no Dumb Questions

Q:	Q: Doesn’t Ajax stand for “Asynchronous JavaScript and XML”?
A:	A: Sort of. Since lots of pages that are considered “Ajax” don’t use JavaScript or XML, it’s more useful to define Ajax as a way of building web pages that are as responsive and interactive as desktop applications, and not worry too much about the exact technologies involved.
Q:	Q: What exactly does “asynchronous” mean?
A:	A: In Ajax, you can make requests to the server without making your user wait around for a response. That’s called an asynchronous request, and it’s the core of what Ajax is all about.
Q:	Q: But aren’t all web pages asynchronous? Like when a browser loads an image while I’m already looking at 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’ what Ajax is all about.
Q:	Q: But all Ajax pages use that XMLHttpRequest object, right?
A:	A: Nope. Lots do, and we’ll spend a couple of chapters mastering XMLHttpRequest, but it’s not a requirement. In fact, lots of apps that are considered Ajax are more about user interactivity and design than any particular coding technique.

Rob’s Rock ‘n’ Roll Memorabilia

Meet Rob. He’s put all his savings into an online rock n’ roll memorabilia store. The site looks great, but he’s still been getting tons of complaints. Customers are clicking on the thumbnail images on the inventory page, but the customers’ browsers are taking forever before they show information about the selected item. Some of Rob’s users are hanging around, but most have just stopped coming to Rob’s online shop altogether.

Ajax pages only talk to the server when they have to... and only about what the server knows.

The problem with Rob’s site isn’t that his server is too slow, but that his pages are sending requests to the server all the time... even when they don’t need to.

Sharpen your pencil

Here’s what Rob’s online store does right now. What’s wrong with this picture?

How would Ajax change this diagram? Write down what you think should happen on Rob’s site.

_____________________________________

_____________________________________

_____________________________________

Sharpen your pencil Solution

Your job was to think about how Ajax could help save Rob’s site... and his business. With Ajax, we can completely remove all the page refreshes on his inventory page. Here’s what that would look like:

Bullet Points

• Asynchronous requests allow more than one thing to happen at the same time.

• Only the part of a web page that needs to change gets updated.

• The page isn’t frozen while the server is returning data to the browser.

Sharpen your pencil

Put a checkmark next to the benefits that you think Ajax can provide to your web applications.

	The browser can request multiple things from the server at the same time.
	Browser requests return a lot faster.
	Colors are rendered more faithfully.
	Only the parts of the page that actually change are updated.
	Server traffic is reduced.
	Pages are less vulnerable to compatibility issues.
	The user can keep working while the page updates.
	Some changes can be handled without a server round-trip.
	Your boss will love you.
	Only the parts of the page that actually change are updated.

Brain Barbell

Not all pages will reap every benefit of Ajax. In fact, some pages wouldn’t benefit from Ajax at all. Which of the benefits that you checked off above do you think Rob’s page will see?

Sharpen your pencil Solution

Remember, not every page is going to see all these benefits...

	The browser can request multiple things from the server at the same time. Note With asynchronous requests, you can make sure the browser works behind the scenes, and avoid interrupting your users with full-page refreshes.
	Browser requests return a lot faster. Note This is only true sometimes. The speed of a request and response depends on what the server is returning. And it’s possible to build Ajax pages that are slower than traditional pages.
	Colors are rendered more faithfully. Note Color rendering is dictated by the user’s monitor, not your app.
	Only the parts of the page that actually change are updated.
	Server traffic is reduced. Note It’s possible to make smaller, more focused requests with Ajax. Be careful, though... it’s also easy to make a lot more requests-and increase traffic-because you can make all of those requests asynchronously.
	Pages are less vulnerable to compatibility issues. Note Because Ajax pages rely on technologies in addition to XHTML, compatibility issues can actually be a bigger problem with Ajax. Test, test, test your apps on the browsers your users have installed.
	The user can keep working while the page updates. Note Sometimes you want a user to wait on the server’s response, but that doesn’t mean you can’t still use Ajax. We’ll look at synchronous vs. asynchronous requests more in Chapter 5.
	Some changes can be handled without a server round-trip. Note Handling things at the browser can make your web application feel more like a desktop application.
	Your boss will love you. Note If you use Ajax in a way that helps your apps, the boss will love you. But you shouldn’t use Ajax everywhere... more on that later.
	Only the parts of the page that actually change are updated. Note Yes, this is the second time this shows up in the list. It’s that important!

There are no Dumb Questions

Q:	Q: First you said Ajax was the web reinvented. Now it’s increasing server traffic. Which is it?
A:	A: Sometimes it’s both! Ajax is one way to make requests, get responses, and build responsive web apps. But you’ve still got to be smart when deciding whether an asynchronous request or a regular synchronous request would be a better idea.
Q:	Q: How do I know when to use Ajax and asynchronous requests, and when not to?
A:	A: Think about it like this: if you want something to go on while your user’s still working, you probably want an asynchronous request. But if your user needs information or a response from your app before they continue, then you want to make them wait. That usually means a synchronous request.
Q:	Q: So for Rob’s online store, since we want users to keep browsing while we’re loading product images and descriptions, we’d want an asynchronous request. Right?
A:	A: Exactly. That particular part of Rob’s app—checking out different items—shouldn’t require the user to wait every time they select a new item. So that’s a great place to use Ajax and make an asynchronous request.
Q:	Q: And how do I do that?
A:	A: Good question. Turn the page, and let’s get down to actually using Ajax to fix up Rob’s online store.

Ajax and rock ‘n’ roll in 5 steps

Let’s use Ajax to fix up Rob’s online store, and get his impatient customers back. We’ll need to make some changes to the existing XHTML page, code some JavaScript, and then reference the script in our XHTML. When we’re done, the page won’t need to reload at all, and only the things that need to change will get updated when users click on the thumbnail images.

Here’s what we’re going to do:

1. Modify the XHTML web page

   We need to include the JavaScript file we’re going to write and add some divs and ids, so our JavaScript can find and work with different parts of the web page.

   

2. Write a function to initialize the page

   When the inventory page first loads, we’ll need to run some JavaScript to set up the images, get a request object ready, and make sure the page is ready to use.

   

3. Write a function to create a request object

   We need a way to talk to the server and get details about each piece of memorabilia in Rob’s inventory. We’ll write a function to create a request object to let our code talk to the server; let’s call it createRequest(). We can use that function whenever a thumbnail is clicked to get a new request started.

   

4. Get an item’s details from the server

   We’ll send a request to Rob’s server in getDetails(), telling the browser what to do when the server responds.

   

5. Display the item’s details

   We can change the image to display in getDetails(). Then, we need another function, displayDetails(), to update the item’s description when the server responds to our requests.

   

Step 1: Modify the XHTML

Let’s start with the easy part, the XHTML and CSS that create the page. Here’s Rob’s current version of the inventory page with a few additions we’ll need:

Run it!

It’s time to get the samples and get going.

Download the examples for the book at www.headfirstlabs.com, and find the chapter01 folder. Now open the inventory.html file in a text editor, and make the changes shown above.

Step 2: Initialize the JavaScript

We need to create the thumbnails.js file, and add a JavaScript function to set up the initial event handlers for each thumbnail image in the inventory. Let’s call that function initPage(), and set it to run as soon as the user’s window loads the inventory page.

To Do

	Modify the XHTML
	Initialize the page
	Create a request object
	Get the item’s details
	Display the details

To set up the onclick behavior for the thumbnails, the initPage() function has to do two things

1. Find the thumbnails on the page

   The thumbnails are contained in a div called “thumbnailPane,” so we can find that div, and then find each image within it.

2. Build the onclick event handler for each thumbnail

   Each item’s full-size image is named with the title of the thumbnail image plus “-detail”. For example, the detail image for the thumbnail with the title FenderGuitar is FenderGuitar-detail.png. That lets us work out the name of the image in our JavaScript.

   The event handler for each thumbnail should set the src tag for the detail image (the one with an id of “itemDetail”) to the detail image (for example, FenderGuitar-detail.png). Once you’ve done that, the browser will automatically display the new image using the name you supplied.

Code Magnets

The code for the initPage function is all scrambled up on the fridge. Can you put back the pieces that fell off? Remember to set an event handler to run the initPage() function when the user’s window loads, too.

Code Magnet Solution

Test Drive

Create thumbnails.js, add the initPage() function, and give the inventory page a whirl.

Create a file named thumbnails.js in a text editor. Add the code shown in Code Magnet Solution, and then load inventory.html in your browser. initPage() should run when the page loads, and you’re ready to try out the detail images...

Step 3: Create a request object

When users click on an item’s image, we also need to send a request to the server asking for that item’s detailed information. But before we can send a request, we need to create the request object.

The bad news is that this is a bit tricky because different browsers create request objects in different ways. The good news is that we can create a function that handles all the browser-specific bits.

To Do

	Modify the XHTML
	Initialize the page
	Create a request object
	Get the item’s details
	Display the details

Go ahead and create a new function in thumbnails.js called createRequest(), and add this code:

Ready Bake Code

Note

Ready Bake code is code that you can just type in and use... but don’t worry, you’ll understand all of this in just another chapter or two.

There are no Dumb Questions

Q:	Q: Am I supposed to understand all of this?
A:	A: No, you’re not. For now, just try to get a general idea of how all this looks and the way the pieces fit together. Focus on the big picture, and then we’ll start to fill in the gaps in later chapters.
Q:	Q: So what’s an XMLHttpRequest?
A:	A: XMLHttpRequest is what most browsers call the request object that you can send to the server and get responses from without reloading an entire page.
Q:	Q: Well, if that’s an XMLHttpRequest, what’s an ActiveXObject?
A:	A: An ActiveXObject is a Microsoft-specific programming object. There are two different versions, and different browsers support each. That’s why there are two different code blocks, each trying to create a different version of ActiveXObject.
Q:	Q: And the request object is called XMLHTTP in a Microsoft browser?
A:	A: That’s the type of the object, but you can call your variable anything you’d like; we’ve been using request. Once you have the createRequest() function working, you never have to worry about these different types again. Just call createRequest(), and then assign the returned value to a variable.
Q:	Q: So my users don’t need to be using a specific browser?
A:	A: Right. As long as their browsers have JavaScript enabled, your users can be running any browser they want.
Q:	Q: What if they don’t have JavaScript enabled?
A:	A: Unfortunately, Ajax applications require JavaScript to run. So users who have JavaScript disabled aren’t going to be able to use your Ajax applications. The good news is that JavaScript is usually enabled by default, so anyone who has disabled JavaScript probably knows what they’re doing, and could turn JavaScript support back on if they wanted to use your Ajax app.

Step 4: Get the item’s details

Once a user clicks on an item in the inventory, we need to send a request to the server and ask for the description and details for that item. We’ve got a request object, so here is where we can use that.

To Do

	Modify the XHTML
	Initialize the page
	Create a request object
	Get the item’s details
	Display the details

And it turns out that no matter what data you need from the server, the basic process for making an Ajax request always follows the same pattern:

1. Get a request object

   We’ve already done the work here. We just need to call createRequest() to get an instance of the request object and assign it to a variable.

   

2. Configure the request object’s properties

   The request object has several properties you’ll need to set. You can tell it what URL to connect to, whether to use GET or POST, and a lot more... you need to set this all up before you make your request to the server.

   

3. Tell the request object what to do when the server responds

   So what happens when the server responds? The browser looks at another property of the request object, called onreadystatechange. This lets us assign a callback function that should run when the server responds to our request.

   

4. Make the request

   Now we’re ready to send the request off to the server and get a response.

   

Brain Power

Why do you think the callback function is assigned to a property called onreadystatechange? What do you think that property name means?

Let’s write the code for requesting an item’s details

Once we know what our function needs to do, it’s pretty easy to write the code. Here’s how the steps map to actual JavaScript in thumbnails.js:

Run it!

Add the getDetails() function to your version of thumbnails.js

Always make sure you have a request object before working with it

The first thing getDetails() does is call createRequest() to get a request object. But you’ve still got to make sure that object was actually created, even though the details of that creation are abstracted away in the createRequest() function:

And here’s how that looks in our code...

The request object is just an object

A request object is just a “normal” JavaScript object, and that means you can set properties on it and call methods. We can talk to the server by putting information in the request object.

To Do

	Modify the XHTML
	Initialize the page
	Create a request object
	Get the item’s details
	Display the details

We’re still working on getting the details for an item.

Let’s break open() down a bit...

There are no Dumb Questions

Q:	Q: Are there other properties of the request object?
A:	A: Sure. You’ve already seen onreadystatechange, and when you need to send XML or more complicated data to the server, then there are several others you’ll use. For now, though, we just need the open() method and onreadystatechange.

Hey, server... will you call me back at displayDetails(), please?

The properties of the request object tell the server what to do when it receives the request. One of the most important is the onreadystatechange property, which we’re setting to the name of a function. This function, referred to as a callback, tells the browser what code to call when the server sends back information.

Use send() to send your request

All that’s left to do is actually send the request, and that’s easy... just use the send() method on the request object.

You can send data in your URL string.

The request object allows us to send all kinds of data in a variety of ways. In getDetails(), the item name is part of the URL string:

var url= "getDetails.php?ImageID=" +
  escape(itemName);

Since that’s part of the URL sent to the server, we don’t need to send anything else to the server in the send() method. Instead, we just pass null... which means “nothing.”

Asynchronous apps make requests using a JavaScript object, not a form submit.

The server-side code is... ...on the server.

That sounds obvious, but lots of times, you don’t have to (or even get to) write the code your web application is talking to. Instead, you work with an existing program, where you know the inputs and outputs, or tell another group what you need.

Not only that, but you might also have one server-side program that’s written in PHP, and another in ASP.NET... and other than the URL, you don’t have to change your JavaScript code at all. Take a look:

The server usually returns data to Ajax requests

In a traditional web app, the server always responds to a request from the browser by sending back a new page. The browser throws away anything that’s already displayed (including any fields the user has filled in) when that new page arrives.

Traditional server-side interactions

Ajax server-side interactions

In an Ajax app, the server can return a whole page, part of a page, or just some information that will be formatted and displayed on a web page. The browser only does what your JavaScript tells it to do.

Ajax is server-agnostic

Ajax doesn’t require any particular server technology. You can use Active Server Pages (ASP), PHP, or whatever you need and have access to. In fact, there’s no need to get into the details of the server-side technology because it doesn’t change how you build your Ajax apps.

Here’s all that Ajax really sees:

Sharpen your pencil

What parameter and response do we need for the interaction with the server for Rob’s memorabilia page?

_____________________________________

_____________________________________

_____________________________________

Test Drive

Code getDetails(), and fire up your web browser.

Make sure you’ve got getDetails() coded in your thumbnails.js file. Load up Rob’s memorabilia page, and try clicking on one of the inventory images.

Brain Power

What happens? What’s wrong with the page? What do you need to do to fix the problem?

What’s My Purpose?

Below on the left are several properties of the request object. Can you match each property to what it does, or what information it contains?

readyState	The status code message returned by the server, for example, “OK” for status 202.
status	Contains information sent back by the server in XML format.
responseXML	A status code returned by the server indicating, for example, success or that a requested resource is missing.
statusText	Contains textual information sent back by the server.
responseText	A number that represents the current state of the request object.

There are no Dumb Questions

Q:	Q: Can you explain what a callback function is again?
A:	A: A callback function is a function that is executed when something else finishes. In Ajax, it’s the function that’s called when the server responds to a request object. The browser “calls back” that function at a certain time.
Q:	Q: So a callback executes when the server’s finished with a request?
A:	A: No, it’s actually called by the browser every time the server responds to the request, even if the server’s not totally done with the request. Most servers respond more than once to say that they’ve received the request, that they’re working on the request, and then, again, when they’ve finished processing the request.
Q:	Q: Is that why the request property is called onreadystatechange?
A:	A: That’s exactly right. Every time the server responds to a request, it sets the readyState property of the request object to a different value. So we’ll need to pay close attention to that property to figure out exactly when the server’s done with the request we send it.

What My Purpose? Solution

Below on the left are several properties of the request object. Your job was to match each property to what it does, or what information it contains.

Use a callback function to work with data the server returns

How do we show the textual description for each item? Let’s assume the server will send the details about an item as pre-formatted text in the responseText property of the request object. So we just need to get that data and display it.

To Do

	Modify the XHTML
	Initialize the page
	Create a request object
	Get the item’s details
	Display the details

Our callback function, displayDetails(), needs to find the XHTML element that will contain the detail information, and then set its innerHTML property to the value returned by the server.

There are no Dumb Questions

Q:	Q: So the server calls displayDetails() when it’s finished with the request?
A:	A: No, the browser actually does that. All the server does is update the readystate property of the request object. Every time that property changes, the browser calls the function named in the onreadystatechange property. Don’t worry, though, we’ll talk about this in a lot more detail in the next chapter.

Get the server’s response from the request object’s responseText property

The data we want is in the request object. Now we just need to get that data and use it. Here’s what we need:

There are no Dumb Questions

Q:	Q: What’s that readyState property?
A:	A: That’s a number that indicates where the server is in its processing. 0 is the initial value, and when the server’s completed a request, it’s 4.
Q:	Q: So that first statement just checks to see if the server’s finished with the request?
A:	A: You got it.
Q:	Q: Why do we have to check that every time?
A:	A: Because the browser will run your callback every time the ready state changes. Since a server might set this value to 1 when it receives the request, and to 2 or 3 as it’s processing your request, you can’t be sure the server’s done unless readyState is equal to 4.
Q:	Q: And the status property?
A:	A: That’s the HTTP status code, like 404 for forbidden, and 200 for okay. You want to make sure it’s 200 before doing anything with your request object.
Q:	Q: Why would the server set the ready state to 4 when the status code is something like 404?
A:	A: Good question. We’ll talk about that in the next chapter, but can you think of how a request could be complete and still have a status code that indicates a problem?
Q:	Q: Isn’t innerHTML a bad thing to use?
A:	A: It is, but sometimes it’s also very effective. We’ll look at better ways to change a page when we get more into the DOM in later chapters. For now, though, it works, and that’s the most important thing.
Q:	Q: Am I supposed to be getting all this? There’s sure a lot going on in that callback function...
A:	A: For now, just make sure you know that the callback is where you can use the server’s response. We’ll talk about callbacks, ready states, and status codes a lot more in Chapter 2.

Test Drive

Code your callback, and test out the inventory page.

Add displayDetails() to your thumbnails.js file. You should also make sure that the server-side program with the inputs and outputs detailed in The server usually returns data to Ajax requests is running, and that the URL in your getDetails() method is pointing to that program. Then fire up the inventory page and click on an item.

Relax

Confused about getting your server-side program working?

Flip to Appendix A for some help on getting things working on the server. There are also some helpful server-side resources for the book online at http://www.headfirstlabs.com.

Goodbye traditional web apps...

Rob’s page is working more smoothly now, customers are coming back in droves, and you’ve helped pair vintage leather with the next-generation web.

Rob’s old, traditional web app:

• ...reloaded the entire page when a user clicked on an item’s thumbnail image.

• ...took a long time to load because the entire page had to be rendered by the browser on every click.

  Note

  These aren’t problems that just Rob’s having. Almost all traditional web apps have these problems in some form or fashion.

• ...felt unresponsive because the user had to wait on all those page refreshes.

• ...lost Rob business, annoyed his customers, and drained his bank account.

Rob’s new, Ajax app:

• ...only changed the part of the page that needed to be updated.

  Note

  Compare these benefits with the list in Sharpen your pencil Solution... they should look pretty similar.

• ...lets users keep viewing the page while images and descriptions are loaded behind the scenes, asynchronously.

• ...reduced the need for his users to have super-fast connections to use his site.

AjaxAcrostic

Take some time to sit back and give your right brain something to do. Answer the questions in the top, then use the letters to fill in the secret message.

This is the language you use to script Ajax pages.

This type of function gets called when a process completes.

This request object property tells us when the server has finished processing.

If something goes wrong at the server, this property will tell us what.

The browser will put text that the server returns in this property.

If there’s a problem, we can get a description of it in this property.

Sharpen your pencil Solution From Sharpen your pencil

What parameter and response do we need to implement Rob’s page?

AjaxAcrostic Solution

Take some time to sit back and give your right brain something to do. Answer the questions in the top, then use the letters to fill in the secret message.

This is the language you use to script Ajax pages.

This type of function get called when a process completes.

This request object property tells us when the server has finished processing.

If something goes wrong at the server, this property will tell us what.

The browser will put text that the server returns in this property.

If there’s a problem, we can get a description of it in this property.