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. This results in a more responsive and interactive interface, already seen powering popular websites like Google Maps and Google Mail.

There is no formal definition of AJAX, but using XMLHttpRequest/JavaScript has become the dominant AJAX technology. This course starts with an overview of XMLHttpRequest and a brief introduction to JavaScript fundamentals. It includes in-depth coverage of programming with AJAX to send and retrieve data to/from a server, updating a web page with JavaScript and using CSS to modify the look of a web page.

The course includes detailed coverage of how to handle AJAX requests using Servlets/JSP and Java web applications, provides extensive coverage of frameworks and much more. Class time will be divided equally between hands-on labs and lecture, with labs completed using the Eclipse IDE. Participants will build working AJAX applications in order to quickly build understanding and experience.

Course Duration: 4 days
Prerequisites:

Basic knowledge of HTML and JavaScript is required, as are practical Java and Servlet/JSP programming skills.

Hardware and Software Requirements:
  • Tomcat
  • JBoss AS
  • IBM WebSphere/RAD
  • Eclipse/MyEclipse
Course Objectives:
  • Understand the principles of interactive web applications and how AJAX is used to create them
  • Understand how XMLHttpRequest works and use it with JavaScript to update a web page
  • Use JavaScript and DOM with AJAX to manipulate the structure of a web page
  • Use Servlets/JSP to handle AJAX requests
  • Be familiar with AJAX technologies and frameworks such as Prototype, script.aculo.us, Dojo, JSON libraries, DWR (Direct Web Remoting) and GWT (Google Web Toolkit)
  • Understand the basics of CSS and use it with AJAX to dynamically change the web page look
  • Understand and use JSON (JavaScript Object Notation)
  • Be familiar with using AJAX with XML
  • Use AJAX with HTML, JSON or XML on both the client-side and server-side (Java)
  • Use DWR (Direct Web Remoting) to invoke server side Java from the browser
  • Use AJAX with JSF
  • Understand issues with using AJX technology, including design and security issues
Course Outline:
  • Overview of AJAX
    • What are Rich Internet Applications?
    • What is AJAX?
    • AJAX, JavaScript, and DHTML
    • How AJAX Works
    • Overview of AJAX Technologies

 

  • Basics of JavaScript for Browsers
    • JavaScript and DHTML Overview
    • Using JavaScript in an HTML Page
    • Basic JavaScript Programming
    • Functions in JavaScript
    • Debugging JavaScript
    • Accessing HTML Elements and Modifying with innerHTML

 

  • XMLHttpRequest
    • The XMLHttpRequest Object
    • Using XMLHttpRequest
    • Working with Browser Differences
    • Your First AJAX Application
    • Using AJAX Data to Modify the Page

 

  • Using Servlets and JSP with AJAX
    • Servlet/JSP Overview
    • Handling AJAX Requests
    • Returning Data to AJAX Requests
    • Using JSP Pages to Generate AJAX Data

 

  • More JavaScript for AJAX
    • Browser Events
    • Using AJAX with Browser Events
    • Using Built-in Objects
    • Objects and Arrays in JavaScript
    • Objects as Function Arguments
    • Defining Classes in JavaScript
    • Defining Modules and Namespaces in JavaScript

 

  • Client-Side AJAX Frameworks
    • Overview – Prototype, Dojo, script.aculo.us and others
    • Prototype Overview
    • Using Prototype ($(), AJAX.Request)
    • aculo.us Overview
    • Using script.aculo.us AJAX autocompleter
    • Servlet/JSP (server-side) Generation of Data
    • Dojo Toolkit Overview
    • YUI (Yahoo User Interface Toolkit) Overview
    • Google Maps and Google AJAX Search API Overview

 

  • Cascading Style Sheets (CSS)
    • CSS Overview
    • Defining and Using Styles and Style Sheets
    • Using CSS to Customize AJAX Data Display

 

  • JavaScript Object Notation (JSON)
    • JSON Overview
    • JSON Data Structure
    • Objects and Arrays in JSON
    • Creating/Working with JSON on the Server using Java
    • Working with JSON in the browser
    • Other JSON Tools Overview

 

  • XML and AJAX
    • XML Overview
    • XML – The X in AJAX
    • Working with XML on the Browser
    • Generating XML Data on the Server with Java
    • HTML vs XML vs JSON

 

  • Direct Web Remoting (DWR)
    • Overview – Invoking Java via AJAX
    • DWR Architecture
    • Invoking Java Functions from the Browser
    • Registering Callbacks
    • Additional Capabilities
    • Overview of Other Technologies (JSON-RPC, Google Web Toolkit)

 

  • AJAX and JavaServer Faces (JSF)
    • JSF Overview
    • JSF and AJAX
    • Demo Lab: Using AJAX with JSF

 

  • Patterns and Best Practices
    • JavaScript Best Practices
    • State of AJAX
    • AJAX Design Patterns
    • AJAX Security Issues
    • Other AJAX Issues
    • Recap of AJAX Technologies and Their Uses

Future Directions