PR011 - Ajax Programming

Summary

3 days

This course introduces 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.

Prerequisites

Before attending this course, should have:

• Intermediate-level CSS
• basic understanding of XML
• Real-world experience writing JavaScript from scratch or have taken course Javascript Programming

Chapter 1: Introduction to Ajax

• Overview
• What is Ajax?
• Classic Model and Ajax Model
• How Ajax Works?
• Key Elements
• How to Issue an HTTP Request?
• Classic Model and Ajax Model
• AJAX Sequence Diagram
• Getting started: Step1
• Getting started: Step2
• Getting started: Step3
• Getting started: Step4
• Getting started: Step5

Chapter 2: JavaScript Refresher

• Overview
• Where to Put the JavaScript?
• Using an External JavaScript
• Syntax
• Variables
• Undefined Variable
• Write Text
• Lifetime of Variables
• Primitive Datatypes
• Reference Datatype
• Conditional Statements
• If Statement 
• If...else Statement
• The JavaScript Switch Statement
• Arithmetic Operators
• Functions
• How to define a Function
• The return Statement
• JavaScript Loops
• Object Oriented Programming
• Properties
• Methods
• User-defined Objects

Chapter 3: The Document Object Model

• Overview
• Tree Example
• DOM Methods for Accessing Objects
• Accessing Parent Element
• Accessing Children Elements
• getElementsByTagName
• Creating Nodes
• The innerHTML
• What are events?
• Event Registration
• Enable Event
• Examples
• Event Listener
• Example: Time On Page
• Mouse Rollover Effect
• Interface Event Handlers
• Key Event Handlers
• Mouse Event Handlers
• Form Event Handlers
• Link Events
• Link Event : onClick
• Link Event : MouseOver
• Example

Chapter 4:  Synchronous Communication

• Hello AJAX
• HTML Page
• JavaScript
• Text File
• Application Layout
• Run Application
• Output

Chapter 5:  Asynchronous Communication

• Steps of AJAX Operation
• The XMLHttpRequest Object
• The XMLHttpRequest Object Properties
• The readyState Property
• The status Property
• The onreadystatechange Property
• The Callback Function
• The responseText Property
• The XMLHttpRequest Object Methods
• Creating XMLHttpRequest Object Using JavaScript
• Open the XMLHtppRequest Object
• Passing Data To the Server with Get
• Passing Data To the Server with POST
• Sending a Request
• Example
• Processing the XML Response
• Working With XML
• View XML Document
• Use Two requestObjects
• Server-Side Mouseover
• Ajax Security
• Example

6. Processing XML Response

• Handle XML in JavaScript
• XML Document
• Get The XML Document From Downloaded XML
• firstChild Property
• nodeValue Property
• Navigate XML Document
• nextSibling Property
• Find XML Elements By Name
• Extract XML Attributes
• Servlet returns an XML
• The HTML DOM is updated
• Example

7. Cascade Style Sheets

• Cascading Style Sheets (CSS)
• CSS Limitations
• The CSS Solution
• Sectors
• Element Type
• Attribute Class
• Attribute ID
• Style Properties
• Layout Properties
• Formatting Properties
• CSS Positioning (Relative)
• CSS Positioning (Absolute)
• Example of Ajax Application 

8. Ajax Frameworks

•  Overview
• XHConn Framework
• Callback Function
• Accessing the Server
• Example
• SACK Framework
• Accessing the Server with SACK
• Download Data with SACK
• Example
• Sarissa Framework
• Accesses the Server with Sarissa
• Download Data with Sarissa
• Example
• Server Side Framework: SAJAX
• Using SAJAX
• Write Server Side Code
• Example

9. Ajax and PHP (Optional)

• PHP Example
• Accessing form variables
• Embedding JavaScript
• Ajax and PHP Example