Ajax Fundamentals Training

This Ajax training will introduce you to the most exciting new technique in web development.

Ajax is an acronym for "Asynchronous JavaScript and XML". In other words, programming in JavaScript to download XML from the server and manipulate it while the user is interacting with other parts of a web page (asynchronously).

Considered the successor to DHTML, Ajax has also become a catch-all phrase for any kind of fancy JavaScript programming: detecting mouse movements, keystroke events, fetching remote data and plugging it into a part of the web page, and otherwise making your web page perform more like a desktop application.

This introductory Ajax training class introduces student to creating interactive web pages using Asynchronous JavaScript and XML. The class is comprised of the following sections:

Review of Relevant Technologies

Ajax relies on basic knowledge of XML and CSS, but most importantly, practical, real-world experience with JavaScript. To ensure that students know all the relevant aspects of CSS and XML, we start the training with several review exercises in XML, CSS, and intermediate-level JavaScript. The training reviews:

  • CSS: divs, spans, ids, classes, absolute positioning and visibility
  • XML: validity, well-formedness, and namespaces
  • JavaScript: DOM objects/methods/properties, functions, and arrays

HTML Elements in JavaScript

There are several ways of capturing HTML elements (AKA "tags") in JavaScript variables besides the dot-notation you've probably seen before in <form> elements. Two examples are: document.getElementById() returns an object representing the HTML element, and document.getElementsByTagName() returns an array of elements. In this training class, we'll show you how to grab hold of HTML elements by assigning them IDs and then "getting" them in JavaScript. This allows you to use the power of JavaScript to manipulate these elements to change their color or positioning.

Changing Static HTML On-the-Fly

Probably the two most useful properties of elements are their "style" and "innerHTML" properties. The style property allows you to control CSS styles for static HTML, including visibility and positioning. Here's an example:

Events that Trigger Code

You are probably already familiar with the onclick and onsubmit events used in form validation. But did you know that there are several other types of events and ways of detecting them? We'll show you how to programmatically assign functions to trigger when those events happen. This training course will teach you how to manage differences between browsers and the significance of the tricky 'this' keyword used so much in JavaScript.

Implementing a Word Processor with Keystroke Events

In Yahoo's online email system, you can press the 'C' key to launch a window to compose a new email. This is an example of a keystroke event. We'll show you how to implement this in class to create this simple word processor:

Implementing Drag-and-Drop with Mouse Events

The dragging effect used in Google maps is an example of a "mousemove" event that triggers code to download more images and redraw the map. We'll show you how to implement this yourself in class.

Updating Part of a Page with Remote Data

Fetching and incorporating remote data into your web page is possibly the most practical application of this Ajax training class. For example, hitting the "quote" button below won't load a whole new web page, irritating the user with the same navigation menus and logos. Instead, it efficiently plugs the share price into the placeholder: price: $xxx.

Manipulating XML with JavaScript

More and more programs are outputting their results in XML. JavaScript has several methods that are useful for moving around and identifying particular items within a mess of XML output. In our ajax class, we will show you how to get what you want out of XML result like this, which gets a list of adoptable pets in San Francisco using CraigsList's XML feed:

Manipulating your Web Page as XML

Just like any other XML document, a properly-formed web page can be manipulated with JavaScript as XML. You've already heard of innerHTML, but there are times when it doesn't work the way one would expect. We'll show you how to add XML nodes to your web page so you can dynamically add option tags like you the ones see in Google's Suggest feature. As an example, click on this button to create some table rows as XML additions to this page:

SOAP Envelopes

SOAP (Simple Object Access Protocol) envelopes are used in web services. They are short paragraphs of XML. One application will send a SOAP envelope to another appliction on a remote computer asking it to reply with some data. This request envelope usually has some input data and the name of a function to call on the remote computer. The remote application will then send back another SOAP envelope with the data results and a thank-you in the XML. Using JavaScript, your web pages can send out these SOAP requests and process the data they get back. Here's what a SOAP envelope to Google's search API looks like:


JSON (JavaScript Object Notation) is an alternative to SOAP that has two major advantages: it is more compact, and it eliminates a major security heachache related to the need for proxy servers. Most web services use SOAP envelopes, but many of Yahoo's developer services also offer JSON output as an alternative. For example, Yahoo! Answers uses JSON to respond to questions. If you're flying to San Francisco to take our ajax class, you might ask:


  • basic understanding of CSS
  • basic understanding of XML
  • Experience writing JavaScript from scratch

Offered at four locations: