LearnNowOnline

Learn your way! Get started

Java EE, Part 5 of 8: AJAX Fundamentals

with expert Ali Hamad

Course at a glance

Included in these subscriptions:

  • Dev & IT Pro Video
  • Dev & IT Pro Power Pack
Release date 12/3/2010
Level Intermediate
Runtime 12h 20m
Closed captioning N/A
Transcript N/A
eBooks / courseware Included
Hands-on labs Included
Sample code Included
Exams Included
Enterprise Solutions

Need reporting, custom learning tracks, or SCORM? Learn More

Course description

This course starts with a simple introduction of the AJAX, what it is and what it can do. It will then move on to how to use XHTML with Java, using JavaScript with the Document Object Model (DOM) API and the AJAX API. The course will then cover Cascading Style Sheets and why it is an important part of AJAX and webpage development. In the final chapters, the course will cover communication with the server on a basic level and using JavaScript Object Notation (JSON).

Learning Paths

This course is part of the following LearnNowOnline SuccessPaths™:
Java Development

Meet the expert

Ali Hamad has a Bachelor and Masters degree in Computer Science and has been training many aspects of Java for over 14 years, covering Introduction through JDBC, JBoss and beyond. His training and consulting background also covers C, C , Object Oriented Analysis and Design (OOAD), and Unix/Linux. Ali has worked for or been a consultant and trainer for many companies including Dell, Texas Instruments, State of New Hampshire, Web Age Solutions, and many more. He is the author of training material for several programming topics such as Java, Struts, C , Unix and J2EE applications.

Course outline

Module 1

Introduction To Ajax (50:31)
  • Introduction (01:32)
  • The Old Way (00:49)
  • What is AJAX? (02:18)
  • A Simple Example (01:32)
  • The AJAX Way (01:21)
  • Two Key Aspects of AJAX (01:38)
  • Advantages of AJAX (02:08)
  • AJAX Technologies (03:36)
  • The Basic AJAX API (02:27)
  • Creating the XMLHttpRequest Object (04:43)
  • Demo: Create an AJAX Object (21:15)
  • The XMLHttpRequest Object Basics (02:05)
  • Complete Example (02:52)
  • The Timeline (01:38)
  • Summary (00:30)

Module 2

XHTML (33:08)
  • Introduction (00:32)
  • What is XHTML? (03:11)
  • The DTD and MIME Type (01:58)
  • The Basic Syntax (01:54)
  • Embedding XHTML in a XML Document (01:01)
  • Differences With HTML 4 (04:25)
  • Embedding Scripts and Styles (02:18)
  • The Standard Attributes (01:11)
  • The <div> Element (01:44)
  • The <span> Element (03:02)
  • Demo: AJAX Login Mechanism (11:16)
  • Summary (00:30)

Module 3

DOM Document Object (34:31)
  • Introduction (00:44)
  • What is DOM (04:12)
  • Element Hierarchy (02:10)
  • DOM Standardization (03:09)
  • The Document Object (05:07)
  • Demo: DOM Document Object (18:46)
  • Summary (00:19)
Nodes and Elements (40:39)
  • Introduction (00:35)
  • Nodes and Elements (03:46)
  • The Element Object (00:49)
  • Important Properties (04:01)
  • Important Methods (08:36)
  • Element Event Handlers (01:29)
  • The Window Object (02:06)
  • Key Methods (02:23)
  • Events (01:39)
  • The Frame Object (01:42)
  • The History Object (03:39)
  • Demo: Nodes and Elements (09:24)
  • Summary (00:24)

Module 4

Ajax API Details (28:30)
  • Introduction (00:40)
  • The Request Object (03:50)
  • Creating the Request Object (07:52)
  • The Request Object (03:34)
  • Demo: Request Object Status (12:03)
  • Summary (00:28)
Request Object Properties (30:58)
  • Introduction (00:30)
  • The Request Object Properties (03:13)
  • The Request Object Methods (05:35)
  • Making a POST Requesrt (02:00)
  • Demo: Concurrent Requests (19:21)
  • Summary (00:17)
Request Object Properties - 2 (31:23)
  • Introduction (00:26)
  • Demo: Intro (05:28)
  • New Project (04:08)
  • Create Servlet (07:06)
  • Constructor (07:49)
  • Import Statement (06:05)
  • Summary (00:16)
Request Object Properties -3 (19:47)
  • Introduction (00:29)
  • Creating the Form (05:54)
  • AJAX Request Function (06:16)
  • Deploying the Application (06:46)
  • Summary (00:20)
Concurrent Requests (28:30)
  • Introduction (00:37)
  • Making Concurrent Requests (02:11)
  • Inner Function (05:00)
  • Inner Function: Memory Leak (02:01)
  • A POST Utility Function (02:52)
  • Mozilla XmlHttpRequest (05:03)
  • IE Microsoft.XMLHTTP Extension (01:25)
  • Demo: Setting Up MySQL (08:48)
  • Summary (00:28)
Defining a DataSource (14:50)
  • Introduction (00:29)
  • Demo: Defining a DataSource (03:27)
  • Defining the DataSource (04:00)
  • Starting the Server (05:35)
  • Test the JSP (00:55)
  • Summary (00:20)
Ajax Caching (26:12)
  • Introduction (00:30)
  • Ajax Caching (01:03)
  • Control Cache Duration (02:13)
  • Advanced Cache Control (02:40)
  • Demo: Ajax Caching (18:56)
  • Summary (00:48)

Module 5

CSS2 (21:51)
  • Introduction (00:29)
  • Introduction (00:56)
  • New in CSS2 (01:55)
  • Example: CSS2 (00:28)
  • Formatted Output (00:43)
  • Unformatted Output (00:42)
  • Basic Syntax (03:06)
  • Creating a Style Sheet (02:13)
  • Demo: CSS2 (10:46)
  • Summary (00:30)
Creating Style Sheets (22:30)
  • Introduction (00:34)
  • Creating a Style Sheet (02:16)
  • Value Types (04:36)
  • Selectors (02:17)
  • Styling Rules (01:15)
  • Demo: Creating Style Sheets (11:11)
  • Summary (00:18)
Advanced Selectors (21:23)
  • Introduction (00:21)
  • More on Selectors (01:44)
  • Class Selector (02:16)
  • ID Selector (00:58)
  • Child Selector (01:02)
  • Descendent Selector (00:46)
  • Attribute Selector (00:49)
  • Pseudo-class Selector (01:42)
  • Demo: Advanced Selectors (11:24)
  • Summary (00:16)
Element Grouping (29:06)
  • Introduction (00:32)
  • Grouping Elements (02:15)
  • The Box Model (01:39)
  • Box Properties (02:42)
  • The Visual Formatting Model (02:10)
  • Types of Boxes (03:36)
  • Display Property (01:38)
  • Positioning Schemes (01:06)
  • The Position Property (01:23)
  • Relative Positioning (01:51)
  • The Float Property (02:21)
  • The Clear Property (00:38)
  • Absolute Positioning (01:11)
  • Layered Presentation (01:39)
  • Color Property (00:49)
  • Background Properties (00:56)
  • Font Properties (01:55)
  • Summary (00:36)

Module 6

Advanced DOM (25:45)
  • Introduction (00:38)
  • Event Handling (01:49)
  • The Event Object (01:30)
  • Event Object: Life Cycle (00:59)
  • Event Object: Key Properties (01:47)
  • Event Object: Key Methods (00:43)
  • Event Bubbling (00:34)
  • Creating an Event (01:38)
  • Dispatching an Event (01:39)
  • Example (02:01)
  • Demo: Advanced DOM (12:07)
  • Summary (00:14)
Events Handling (19:29)
  • Introduction (00:32)
  • Handling Events (01:31)
  • Register Using HTML Markup (01:14)
  • Register Using Element Property (02:15)
  • Register Using DOM API (02:18)
  • Example: Register Using DOM (00:51)
  • Best Practice (02:25)
  • Canceling Default Action (01:59)
  • Working with Styles (01:58)
  • Demo: Event Handling (04:06)
  • Summary (00:15)
Working with Styles (39:17)
  • Introduction (00:26)
  • Working with Styles (01:07)
  • Examples (01:36)
  • The Style Object (02:39)
  • Setting Style of an Element (01:33)
  • Working with Style Sheets (04:33)
  • DOM HTML API (03:11)
  • Table DOM Objects (02:18)
  • HTMLTableElement Object (01:25)
  • HTMLTableRowElement Object (01:18)
  • HTMLTableCellElement Object (00:39)
  • Example of Table DOM API (01:47)
  • The Form Element Objects (01:06)
  • Demo: Working with Stles (10:11)
  • HTMLFormElement Object (00:44)
  • HTMLInputElement Object (01:32)
  • HTMLSelectElement Object (01:49)
  • HTMLOptionElement Element (00:55)
  • Summary (00:20)

Module 7

Server Communication (43:21)
  • Introduction (00:37)
  • Introduction (01:26)
  • Application Layer Protocol (03:31)
  • Diagram (02:13)
  • Plain HTML Snippet (05:44)
  • XML Document (03:04)
  • XML Document: Server Side (01:22)
  • Example: Build DOM Document (05:24)
  • Example: Write DOM Document (02:38)
  • Example: The Servlet (02:00)
  • XML Document: Client Side (01:30)
  • DOM API Summary (01:32)
  • Demo: Server Communication (11:55)
  • Summary (00:18)
DOM API Summary (37:55)
  • Introduction (00:33)
  • The Document Object (00:50)
  • Document Object Methods (01:09)
  • Element Object (00:57)
  • Element Object Methods (01:01)
  • Body Text of an Element (03:05)
  • Setting Body Text (01:21)
  • Displaying Body Text (02:46)
  • Using XML as Request Data (02:17)
  • Creating a New DOM Document (04:51)
  • Serializing DOM Documents (01:23)
  • Posting an XML Document (01:34)
  • Processing the Posted XML (01:59)
  • Demo: DOM API Summary (13:35)
  • Summary (00:26)

Module 8

Introduction to Debugging (28:39)
  • Introduction (00:47)
  • Demo: Intro to Debugging (07:37)
  • Syntax Error (06:34)
  • Logic Error 1 (07:24)
  • Logic Error 2 (05:47)
  • Summary (00:28)
Complete Chat (42:13)
  • Introduction (00:30)
  • Demo: Chat (02:55)
  • Import Files (08:14)
  • Create the Chat Servlet (10:57)
  • Create DOM Function (06:39)
  • Chat.html (04:03)
  • Time Out (02:45)
  • Testing Chat (05:48)
  • Summary (00:19)
JSON (40:00)
  • Introduction (00:33)
  • Introduction (02:34)
  • JavaScript Object Notation (02:44)
  • JSON Syntax (03:11)
  • How Does JSON Work (03:46)
  • JSON: Server Side (06:47)
  • Demo: JSON (20:01)
  • Summary (00:20)
JSON Client (29:46)
  • Introduction (00:30)
  • JSON: Client Side (00:58)
  • Working with Arrays (02:13)
  • Advanced JSONObject Methods (02:16)
  • Advanced JSONArray Methods (01:02)
  • Demo: JSON Client (22:22)
  • Summary (00:22)