This training course teaches AJAX and all of its foundational technologies. XHTML and CSS2 are covered in details. Students will also learn the HTML Document Object Model (DOM) and how to manipulate a page dynamically in the client side using JavaScript. The AJAX API is covered in details. Students will also learn how to build their own AJAX based framework which will help them write complex applications quickly. We cover XHTML and CSS2 in detail. Students will be able to write rich AJAX applications, and will learn how to develop an AJAX framework. 

You Will Learn How To:

Course Prerequisites

ASP.NET based web application development. Basic knowledge of JavaScript and HTML.

Who Should Attend?

The target audience for this course is Web based application developers. The class is designed mainly for the ASP.NET developers. Web site designers with good knowledge of Java Scripting can also take this class.

Course Outline:

Introduction to AJAX

• What is AJAX?
• A Simple Example
• The Old Way
• The AJAX Way
• Two Key Aspects of AJAX
• What are the Advantages of the AJAX Approach?
• AJAX Technologies
• The Basic AJAX API
• Creating the XMLHttpRequest Object
• The XMLHttpRequest Object Basics
• Complete Example
• The Timeline

XHTML

• What is XHTML?
• The DTD and MIME Type
• The Basic Syntax
• Embedding XHTML in a XML Document
• Differences With HTML 4
• Embedding Scripts and Styles
• The Standard Attributes
• The <div> Element
• The <span> Element

JavaScript DOM API

• What is DOM?
• Element Hierarchy
• The document Object
• Nodes and Elements
• The Element Object
• Element Event Handlers
• The window Object
• The Frame Object
• The History Object

AJAX API Details

• The Request Object
• Creating the Request Object
• The Request Object
• Simple GET Example
• Making a POST Request
• Mozilla XmlHttpRequest Extensions
• IE Microsoft.XMLHTTP Extensions
• Making Concurrent Requests
• Memory Leak With Inner Function
• A POST Utility Function

Advanced DOM

• Event Handling
• The Event Object
• Event Bubbling
• Creating and Initializing an Event
• Dispatching an Event
• Example
• Handling Events
• Registering Event Handler
• Best Practice
• Working With Styles
• Example
• The Style Object
• Setting Style of an Element
• Working With Style Sheets
• DOM HTML API
• Table DOM Objects
• The HTMLTableElement Object
• The HTMLTableRowElement Object
• The HTMLTableCellElement Object
• Example of Table DOM API
• The Form Element Objects
• The HTMLFormElement Object
• The HTMLInputElement Object
• The HTMLSelectElement Object
• The HTMLOptionElement Element

Communication With Server - Basic

• Application Layer Protocol
• Plain HTML Snippet
• XML Document
• XML Document Server Side
• Example: Build DOM Document in Java
• Example: Write DOM Document in HTTP Reply
• Example: The Servlet
• C#: Create a XML DOM Document
• C#: Output XML in HTTP Reply
• XML Document - Client Side
• DOM API Summary
• DOM API The Document Object
• DOM API The Element Object
• Body Text of an Element
• Setting Body Text
• Displaying Body Text
• Using XML As Request Data
• Creating a New DOM Document
• Serializing DOM Document as Text
• Posting an XML Document
• Processing the Posted XML From a Servlet

Introduction to ASP.NET AJAX

• What is ASP.NET AJAX Extension?
• Why Use ASP.NET AJAX Extension?
• Functionalities Available
• Installing ASP.NET AJAX
• Creating a Web Site
• The ScriptManager Control
• Basics of Partial Page Update
• Creating an Update Region
• Example: Identifying an Update Region
• Update Trigger
• Update Mode
• Conditional Update
• External Trigger Control
• Programmatic Update of a Panel
• Another Example

Advanced ASP.NET AJAX

• Disabling a Trigger
• Sending AJAX Requests on an Interval
• Showing Progress Indicator
• Advanced Progress Indicator
• Tracing From JavaScript
• The Sys.Debug Class Methods
• Page Lifecycle Handling
• Error Handling
• Network Error Handling