Introduction to Ajax Programming

About This Course

Transform the way your Web applications look and feel! With Ajax programming, you can create applications that provide levels of responsiveness previously unheard of on the Web. In fact, you can use Ajax to develop Web applications that behave and respond just like desktop applications.

In this course, you'll learn each of the technologies that Ajax is composed of. We'll spend several lessons digging into JavaScript, a programming language essential to Ajax. You’ll discover the wonders of the Document Object Model (DOM), cascading style sheets (CSS), the XMLHttpRequest object, extensible markup language (XML), and PHP scripting. Together, these technologies are what give Ajax its power.

Along with every lesson is a project application that we'll create together. Each application will give you hands-on practice with the technologies you'll be learning. By the time the course is finished, you'll be able to create your own Ajax applications to give your Web site faster and more streamlined functionality. Also, since Ajax skills are highly prized, you will be in a great position to begin a new career as an Ajax programmer.

About The Instructor

This course includes a knowledgeable and caring instructor who will guide you through your lessons, facilitate discussions, and answer your questions. The instructor for this course will be Richard Blum.

Richard Blum has been an IT industry professional for over 18 years, working mainly as a network and systems administrator. During this time, he has worked with Microsoft, Novell, Unix, and Linux servers, and has created Web sites using a variety of different programming languages. Blum is the author of several programming and systems administration books, including Professional Assembly Language, C# Network Programming, PostgreSQL 8 for Windows, Sendmail for Linux, Postfix, and Network Performance Open Source Toolkit.

Syllabus

A new section of each course starts monthly. If enrolling in a series of two or more courses, please be sure to space the start date for each course at least two months apart.

Week 1

Wednesday - Lesson 01

This first lesson begins with a summary of what you need to get started. What you'll need to begin includes an understanding of HTML and, of course, a Web site that you can work with and are interested in making more responsive and dynamic. Then I'll give you an overview of Ajax so that you'll know exactly what it's capable of. In each lesson, we'll develop a computer game to help illustrate the topic of the day. The game for this lesson is the Joke of the Day application, which will give you a good, basic idea of how powerful Ajax can be.

Friday - Lesson 02

In this lesson, we'll begin with a look at JavaScript's origins. Then we'll talk about browser compatibility issues, which is something you'll be dealing with constantly as you develop your Ajax applications. Thus, it's worth spending some time to understand that you're likely to run into some problems. We'll then turn our attention to creating and embedding JavaScript in Web pages. There are four ways to do this, and I want you to become familiar with them all. We'll finish up by creating an application called the Knock-Knock Joke game.

Week 2

Wednesday - Lesson 03

We'll begin Lesson 3 with a discussion about syntax. JavaScript has a specific syntax that you need to use, and I want you to become familiar with it. Being comfortable with JavaScript will help you as you create your own Ajax applications. We'll be looking at values and variables as part of this discussion, and then we'll focus on applying conditional logic. Conditional logic uses a number of different statements: if statements, switch statements, for statements, while statements, and do. . .while statements. We'll dissect them all! To put all this information to work, we'll create a new application called the Number Guessing game.

Friday - Lesson 04

In this lesson, we'll continue digging into JavaScript, but at an even higher level—focusing on functions. The use of functions is a fundamental feature that programmers use in most Ajax applications, so our goal is to learn how to create and execute them. We'll begin by learning exactly what a function is. Then we'll talk about how to define a function and control its execution. We'll then spend some time learning about events, such as load, mouseover, submit, and several others. The application project for this lesson is the Seinfield Quiz. By creating this application, you'll appreciate how incorporating functions into its script makes it a thing of beauty.

Week 3

Wednesday - Lesson 05

This is the last lesson in which we'll focus exclusively on JavaScript, spotlighting two essential components of JavaScript programming. The first is the

and tags, essential elements for developing Ajax applications that dynamically update text displayed on Web pages. Our second task is learning how to manage collections of data using arrays. And, of course, I've got a great game for you to develop: the Rock, Paper, Scissors game. Sound familiar? Wait until you see how well it works as an Ajax application!

Friday - Lesson 06

Web browsers use the Document Object Model to create a logical representation of your Web pages, and that's what we'll work on in this lesson. Using JavaScript to interact with and manipulate the DOM, you can develop Ajax applications that can add, delete, and modify Web page content instantly—without any page refreshes. You'll first see how the DOM creates a "tree" representation of Web pages, and then you'll learn how to work with different DOM properties and methods. After that, we'll explore how to walk the DOM tree and retrieve element information. Finally, we'll talk about how to use the DOM to modify tree layout and dynamically update the appearance of your Web pages. For our project application, we'll create the Ajax Story of the Day.

Week 4

Wednesday - Lesson 07

To become an effective Ajax programmer you must understand how to work with HTML, JavaScript, the DOM, and the XMLHttpRequest object. In this lesson, we're going to tackle the XMLHttpRequest object. You'll see how to use it to communicate with Web servers and facilitate the exchange of data in your Ajax applications. I'll also introduce you to Ajax frameworks, which are libraries of JavaScript functions. Then we'll put it all to work in an application called the Ajax Typing Challenge.

Friday - Lesson 08

In this lesson, you'll learn how to create Ajax applications that can dynamically manipulate the display of graphics. Then we'll take things a step further by using the XMLHttpRequest object to call upon server-side programs. To that end, we'll explore how to pass arguments to server programs and to retrieve data those programs return. Next I'll show you how to execute JavaScript that the Web server returns. Finally, we'll work on today's application project, the Ajax Google Suggest application.

Week 5

Wednesday - Lesson 09

I'll begin Lesson 9 by introducing you to extensible markup language (XML), a standard for storing and transporting data in a platform-independent manner. I'll explain how to develop Ajax applications that can work with data stored in XML files. You'll learn how to create XML files and how to access their contents using Ajax. I'll also be showing you the basics of XML element syntax and how to formulate XML tags that include text content and optional attribute data. As usual, we have a cool application to create: Who Am I? This nifty application will retrieve data stored in different XML files located on the application's Web server.

Friday - Lesson 10

Cascading style sheets (CSS) isn't a formal Ajax component, but Ajax programmers have come to depend on it for all sorts of things. In this lesson, we'll talk about all the things CSS lets you do, including changing foreground and background colors; specifying font type, size, and color; turning things visible and invisible; and even moving things around the screen. We'll also cover how to work with inline, embedded, and external styles, and we'll wrap things up with the Fortune Telling Game application.

Week 6

Wednesday - Lesson 11

PHP is a server-based scripting language designed to support the development of server-based programs, and that's what this lesson is devoted to. You'll learn how PHP scripts are capable of reading and writing files stored on Web servers and also how they can work with database-management systems. Learning how to create PHP scripts will give you the ability to develop server-based programs that support the needs and requirements of your Ajax applications. Our project application for this lesson, the Word-Guessing Game, makes good use of PHP.

Friday - Lesson 12

We'll spend this last lesson addressing some design issues to help you avoid certain problems as you begin designing your own Ajax applications. As with any application-development framework, Ajax applications have a number of issues that you must be aware of. In some cases, solutions already exist, but in other cases, the jury is still out on the best way to handle things. I'll go over a number of Ajax development issues, and wherever possible, I'll suggest solutions or alternative ways of getting things done. We also have one last application project: the Login application. It'll incorporate much of what you've learned throughout the course.

Requirements

Any code editor capable of developing HTML pages; alternatively, a plain text editor, such as Windows Notepad; Windows XP, Vista, or 7, and Mac OS X; Internet access, e-mail, the Microsoft Internet Explorer or Mozilla Firefox Web browser, and the Adobe Flash and PDF plug-ins (two free and simple downloads you obtain at http://www.adobe.com/downloads by clicking Get Adobe Flash Player and Get Adobe Reader); access to multiple browsers, including Safari, Netscape Navigator, Google Chrome, and Opera; access to a Web server that supports JavaScript and PHP.