AJAX API Programming

AJAX is a group of interrelated web development techniques used on the client-side to create asynchronous web applications. With Ajax, web applications can send data to, and retrieve data from, a server asynchronously (in the background) without interfering with the display and behavior of the existing page. Data is usually retrieved using the XMLHttpRequest object. Despite the name, the use of XML is not needed (JSON is often used instead), and the requests do not need to be asynchronous. Ajax is not a single technology, but a group of technologies. HTML and CSS can be used in combination to mark up and style information. The DOM is accessed with JavaScript to dynamically display, and to allow the user to interact with the information presented. JavaScript and the XMLHttpRequest object provide a method for exchanging data asynchronously between browser and server to avoid full page reloads.

This class will introduce you to the suite of technologies that are used to create an Ajax web application. This is not, however, simply a catalog of Ajax libraries and tools: all topics covered are grounded in “Real World” usage. Learning in this class is designed to go above and beyond the “what” and “how” of Ajax. After completing this course, you will be well versed in the critical answers to “why” and “when”, as they relate to the technical foundations of building dynamic web applications. The material covers Ajax foundations including HTTP, asynchronous communication, advanced JavaScript, the DOM API, events, and JSON, as well as higher level topics in debugging, security, and frameworks (jQuery). Lab work focuses on creating the dynamic portions of a Web site, including JSPs, Servlets, and JavaScript.

Course Objectives

After completing this course students will:

  • Understand the relationship between the different protocols that comprise “Ajax”
  • Create asynchronous requests through the use of the XMLHttpRequest object
  • Learn best practices in “cross browser” coding
  • Solve problems quickly through the use of error consoles, HTTP inspectors, and JavaScript debuggers
  • Develop proficiency with the DOM API in building dynamic GUIs
  • Become familiar with jQuery and its use in efficiently building Ajax applications

Prerequisites

  • Basic HTML / XHTML, JavaScript, and CSS
  • Understand Servlets and JSP

Course Track

What is Ajax?

  • Traditional Synchronous Webpages
  • Synchronous vs. Asynchronous Communication
  • Ajax defined
  • XMLHttpRequest Object
  • Other Technologies Used with Ajax
  • Benefits
  • Challenges

Advanced JavaScript

  • Terminology
  • Variable Scope
  • Function Pointers
  • Inner Functions
  • Classes and Objects
  • Error Handling

Understanding HTTP

  • HTTP and Ajax
  • HTTP Message Overview
  • Client to Server Interaction
  • The Creation and Handling of HTTP Messages
  • Methods
  • Status Codes
  • Header Fields

Transferring Data

  • Data Types / Protocols
  • ReadyState
  • Plain text
  • XHTML
  • XML
  • JSON

Rendering Through the Document Object Model (DOM) API

  • DOM Overview
  • Anatomy of an XML based DOM
  • Nodes and NodeLists
  • Types of Nodes (Element, Attribute, Test, CDATA, Document, etc)
  • Anatomy of an HTML based DOM
  • HTML Tags and their Dom Equivalent (THMLElement, ect)
  • Document, Window, and History objects
  • Page Rendering Through the DOM API
  • Creating the Document Structure
  • Adding Look and Feel through the Style Object
  • Adding Behavior through Events
  • Displaying the DOM in a Web Page

Debugging

  • Error Console (Firefox and IE)
  • HTTP Inspector (Fiddler)
  • Debugging Tools (Firebug and IE 8 Script Debugger)

Introduction to JQuery

  • jQuery Setup
  • The “$” Object and Basic jQuery Syntax
  • Ajax Utilities
  • DOM and Event Enhancements
  • Page Rendering
  • UI Library Overview (Date Picker, Auto-Complete, etc.)

Appendix A – Testing

  • Proactive Testing vs. Reactive Debugging
  • Test Driven Development
  • Unit Tests and QUnit

Appendix B – Topics in Security

  • Common Security Issues in Web Applications
  • Same Origin Policy
  • Data Confidentiality
  • Injection Attacks
  • Cross-Site Scripting (XSS)
  • Vulnerability Scanners

Appendix C – Frameworks & Toolkits

  • Frameworks and Toolkits Defined
  • Criteria for Evaluating Frameworks and Toolkits
  • Survey of Popular JavaScript / Ajax Frameworks and Toolkits (Dojo, Prototype, Mootools, Yahoo UI Library, GWT, jQuery)

Course Benefits

Upon successful course completion students will:

Have developed proficiency with the DOM API in building dynamic graphical user interface using AJAX. Students will also be able to efficiently use jQuery in building AJAX applications

Course Duration: 40 hours of instructor-led hands-on training and labs

×