Ajax Training

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</p>

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 this training class, we will show you how to get what you want out of XML result like this, which gets longitude/latitude information about the San Francisco keyword:

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

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:

Prerequisites:

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

Offered at four locations::

Ajax Fundamentals Training