Kurs: Rich Internet Apps with Ajax (& jQuery)

Ajax (Asynchronous JavaScript™ and XML) is a browser-based technology for creating highly interactive Web applications by updating parts of a Web page with new data without reloading the whole page. There is no formal definition of Ajax, but using XMLHttpRequest/JavaScript has become the dominant Ajax technology. The course starts with an introduction to using XMLHttpRequest and a brief introduction to JavaScript fundamentals. It includes in-depth coverage of programming with Ajax to send/retrieve data to/from a server, updating a Web page with JavaScript, and using CSS to modify the look of a Web page. There is also detailed coverage of how to handle Ajax requests using Servlets/JSP and Java Web applications and how to use frameworks, both client side JavaScript and server side Java. This course is hands on with labs to reinforce all the important concepts. It will enable you to build working Ajax applications, and give you an understanding of the important concepts and technology in a very short time.

The course starts with an introduction to using XMLHttpRequest and a brief introduction to JavaScript™ fundamentals. It includes in-depth coverage of programming with AJAX to send/retrieve data to/from a server, updating a Web page with JavaScript, and using CSS to modify the look of a Web page. There is also detailed coverage of how to handle AJAX requests using Servlets/JSP and Java™ Web applications and how to use frameworks, both client-side JavaScript and server-side Java. This course is hands on with labs to reinforce all the important concepts. It will enable you to build working AJAX applications, and give you an understanding of the important concepts and technology in a very short time.

Audience Web developers using AJAX (about 2/3 of the course does not require Java knowledge) and Java developers who need to work with AJAX-based Web applications.

Course Length 4 Days

Prerequisites Basic knowledge of HTML and JavaScript and practical Java and Servlet/JSP programming experience.

Ajax for Java™ Developers

1. Ajax Overview
Rich Internet Applications
What are Rich Internet Applications?
RIA Technologies
Ajax Introduction
What is Ajax?
The Ajax Difference
Ajax, JavaScript, DHTML, and More
XMLHttpRequest
How Ajax Works
Overview of Ajax Technologies

2. JavaScript Basics
Java Script Introduction
What is JavaScript
Exploring JavaScript
JavaScript Variables
JavaScript – Writing to the Web Page
JavaScript PopUp Boxes
JavaScript Functions
External JavaScript Files
Functions as Data
Standard JavaScript Functions
Accessing and Modifying HTML Elements
A More Complex HTML Page
Accessing Elements via the document Object
The innerHTML Property

3. XMLHttpRequest
XMLHttpRequest Basics
More about XMLHttpRequest
Creating an XMLHttpRequest Object
Submitting a Request
XMLHttpRequest Properties
Asynchronous Request
Handling an Asynchronous Response
Submitting a Request
XMLHttpRequest Properties
Asynchronous Request
Handling an Asynchronous Response
The readyState Property
onreadystatechange Event Handler
XMLHttpRequest Methods

4. Servlets and JSP with Ajax
Overview of Servlets
Java EE and Web Applications
Simple Web-centric Architecture
Java EE Web Applications
Ajax for Java Developers
Web Application Structure
Using Servlets
A Simple HTTP Servlet
How a Servlet Works
The Web Archive (war) File
Deploying Web Applications
Servlets and Ajax
Accessing the Servlet Using Ajax
A Servlet Handling a Post Request
Overview of JavaServer Pages (JSP)
What is a JSP?
A Very Simple JSP – simple.jsp
JSPs Look Like HTML
JSP Expressions
JSPs are Really Servlets
Lifecycle of a JSP
Object Buckets or Scopes
Predefined JSP Variables – Implicit Objects
Working with
More
How a Servlet Works With a JSP
Issues with JSP
Custom Tags
Custom Tags and Tag Libraries
The JSTL
taglib Directive in JSP
A Servlet and JSP Cooperating

5. More JavaScript and Ajax
Browser Events
Event Based programming
Event Handlers
Defined Browser Events
Defined Events
Form Validation
onload and onunload Events
Using Ajax and Events
JavaScript Objects and Arrays
JavaScript Objects
Creating JavaScript Objects
Working with Objects and Functions
Working with Object Properties
Arrays in JavaScript
Working with Arrays
Array methods
Objects as Arrays
Classes in JavaScript
javaScript Constructors
The new Operator
More on Constructors
The Object Class
The prototype Property
Properties of the Prototype
A More Complete Class
Modules and Namespaces
Utility Modules

6. Client Side Frameworks
Framework Overview
No Need to Reinvent the Wheel
Capabilities of Client Side JavaScript Libraries
General Library Capabilities
Some Client Side JavaScript Libraries
Prototype Overview
About Prototype
Utility methods and DOM Extensions
Utility methods of Element Class
The $() Utility Function
Using $ and the DOM Extensions
Prototype Ajax Support
Ajax.Request
Ajax.Request – Additional Options
Ajax.Updater
Other Prototype Capabilities
Much More Capability
script.aculo.us Overview
Using script.aculo.us
The Scriptaculous Autocompleter
Other Frameworks and Libraries
Some Well Known Frameworks
Dojo Functionality
dojo.xhr Functions
Using dojo.xhrGet()
Dojo.xhrGet Error Handling
Some Issues with Dojo
Yahoo User Interface Toolkit (YUI)
The YUI Dom Class
YUI and Ajax
TabView and TreeView
Rich Text Editor and Calendar Control
Other YUI Capabilities
The Google Ajax Search API
Ajax for Java Developers
Google Search API Code
Google Search Page Display
Much More Capability
Google Maps API
Maps API Display
Additional Google Maps API Capability

7. Cascading Style Sheets
Issues with Formatting in HTML
Cascading Style Sheets (CSS)
Declaring Style Information
Style Sheets
Using Style Sheets
Resulting Display
The class Selector
Descendant Selectors
ID Selectors
Display and Visibility Style Properties
Other Style Properties
Scripting Styles
Scripting Classes
The ‘Cascading’ in CSS

8. JSON (JavaScript Object Notation)
What is JSON
Review of JavaScript Literals
Arrays and More Complex Objects
JSON Details
Creating JSON Strings in JavaScript
Parsing JSON Strings in JavaScript
Parsing Strings with JSON.parse()
JSON on the Server
Creating JSON Text on the Server
JSONObject and JSON
JSONArray
Creating JSON Text from POJOs
Creating jSON Text from Collections
Dealing with Dates
Custom Date Serialization
JSONSerializer
JSONSTringer
Other json-lib Capabilities
Autocomplete Example Using JSON
An Input Field Generating Ajax Request
Producing JSON in a Servlet
JavaScript Code Constructing Suggestions
Accessing the JSON Data We Want
JavaScript Code Constructing the Suggestions
Autocomplete at Work
Other JSON Tools
The JSON Universe

9. XML and Ajax
XML Overview
What is XMl?
The Underlying Theme of XML
JavaTunes Purchase order Document – Body
The Document Body and Elements
Attributes
Working with XML
Working with XML and Ajax
Accessing XML with Ajax
Working with XML Documents
JavaTunes Purchase Order Document
JavaTunes Order as a Dom Tree
More About the W3C DOM
Traversing a Document with JavaScript
Getting Node Information
Finding Nodes in a Document
White Space Handling and Other Issues
Creating XML Documents on the Server
Producing XML with a Servlet and JSP
The JSP Generating the XML
Autocomplete Example Using XML
An Input Field Generating Ajax Request
XML Document from Servlet/JSP
JavaScript Code Constructing the Suggestions
Accessing the XML Nodes We Want
Using the Suggestions
Autocomplete at Work
XML Versus JSON
XML and JSON for Data Interchange

10. DWR (Direct Web Remoting) and Other Technologies
DWR Overview
What is DWR?
How DWR Works
Getting Started with DWR
web.xml Configuration for SWR
dwr.xml Configuration File
© ITCourseware, LLC 4
Ajax for Java Developers
Running the Test Page - /dwr
Working with DWR
Including the DWR JavaScript Code
Using the SWR Proxies
Functions with Java Object Arguments
DWR Options
Reverse Ajax
Other Technologies
JSON-RPC
Using JSON-RPC-Java
Google Web Tooklit (GWT)
GWT Architecture
Hello World with GWT
The Generated Application
More About GWT
Pros/Cons of GWT

11. Ajax and JSF
JSF Overview
JSF Purpose and Goals
JSF API
Using JSF
JSF as MVC
JSF Views
Managed Beans as JSF Model
Managed Beans as JSF Controller
JSF Controller Components
Architecture Overview
faces-config.xml Details
Your First JSF Application
Configuring FacesServlet in web.xml
JSF Controller
Writing a Managed Bean
A Simple Managed Bean
faces-config.xml
Examining the Logon Form
Linking Input Fields to Bean Properties
Submitting the Form
Method Binding Expressions
Dynamic Navigation Rule
Creating / Deploying a JSF Application
Ajax4jsf
Using Ajax with JSF
Ajax4jsf
Ajax4jsf Component Structure
How the Ajax Filter Works
Ajax4jsf Request Processing Flow