AJAX: A Primer for Business Educators

2007 Atlantic Coast Business, Marketing, and Information Technology Education Conference

Raleigh HiltonFebruary 15-17, 2007

Randy ParkerPiedmont Community College

Roxboro, NCparkerr@piedmontcc.edu

www2.piedmontcc.edu/faculty/parkerr/ajax

A J A X

Asynchronous JavaScript And XML

Based on the XML HTTP Request (XHR) object created by Microsoft Corp. in 1997

AJAX – term coined by James Garrett in February 2005

A J A XAsynchronous JavaScript And XML

What is AJAX? AJAX is NOT one single new technology A grouping of technologies used to produce Web

Applications with a similar “look and feel” as desktop applications.

Required: HTML/XHTML JavaScript File or program on server to fulfill request

Not Required but often used: XML Server side applications (ASP, PHP, etc…) Databases

A J A X

Asynchronous JavaScript And XML Why use AJAX?

To provide a desktop-like user interface for Web Applications

Increased user satisfaction: Improved response time No plug-ins or other special installations on

the Browser Reduces redundant content on the Web

A J A X

Asynchronous JavaScript And XML How is AJAX used?

To Enhance Traditional Applications: Yahoo Mail (Beta) Google Suggest Google Maps (maps.google.com)

To Develop new Web 2.0 (2nd Generation) Applications: Blogger.com

Traditional Yahoo Email

Traditional Yahoo Email

Yahoo Email (Beta) using AJAX

Yahoo Email (Beta) using AJAX

Google Suggest (Traditional)

Google Suggest (AJAX)

A J A X

Asynchronous JavaScript And XML How is AJAX used?

To Enhance Traditional Applications: Yahoo Mail (Beta) Google Suggest Google Maps (maps.google.com)

To Develop new Web 2.0 (2nd Generation) Applications: Blogger.com

Blogger.com and AJAX

Blogger.com and AJAX

A J A X

A – Asynchronous

J – JavaScript

A – And

X – XML

Asynchronous Traditional Web

Application Synchronous

1. Client sends request2. Client waits for

response3. Server process request4. Client displays results

AJAX-enabled Web Application Asynchronous

1. Client may send multiple requests

2. Responses may be returned in any order

A J A X

A – Asynchronous

J – JavaScript

A – And

X – XML

JavaScript A programming language that runs in a Browser Embedded in a Web page or included as a separate file Activated when the page loads or when a button or link

is clicked AJAX uses JavaScript to send an HTTP request (XHR) to a

server The server sends the results back to the same JavaScript

AJAX Client/Server Interaction

AJAX Client/Server Interaction

A J A X

A – Asynchronous

J – JavaScript

A – And

X – XML

XML

eXtensible Markup Language A data description language An open standard providing the

means to share data and information between computers and computer programs

XML is NOT required for AJAX

A J A X

Asynchronous JavaScript And XML Disadvantages:

Cross-browser JavaScript inconsistencies An inability to:

use the Back button to return to a previous state

copy a URL and later use it to navigate to the same page in the same state

A J A XAsynchronous JavaScript And XML

How to do it? Use traditional Web development tools:

Dreamweaver, FrontPage for the UI Text editor for the JavaScript and server side

programs Use tools designed specifically for AJAX development:

Microsoft ASP.NET AJAX (Atlas) - http://ajax.asp.net/ Eclipse (Java-based open source)

http://www.eclipse.org/ Adobe Flex/Flash-AJAX Bridge

http://www.adobe.com/products/flex/

A J A X

AJAX in the Curriculum

A typical AJAX-enabled application includes:

1. User interface (Web page – HTML/XHTML)2. JavaScript (XHR requests and server

responses)3. Server-side program4. Database

A J A X

Asynchronous JavaScript And XMLAJAX in the Curriculum

1. Introductory Level Introduction to AJAX (general overview) HTML/XHTML – Forms

2. Intermediate Level JavaScript – Variables, Functions XHR (XML Http Request)

3. Advanced Level Server-side programming SQL

A J A X

Asynchronous JavaScript And XML AJAX in the Curriculum

1. Introductory Level Introduction to AJAX (general overview) HTML/XHTML – Forms

How to do it? Use traditional Web development tools:

Dreamweaver, FrontPage, or text editor for the User Interface (Form)

Students link to pre-written JavaScripts and server-side programs

A J A XRESOURCES FOR FURTHER RESEARCH

Presenter’s Page (Randy Parker) – www2.piedmontcc.edu/faculty/parkerr/ajax/

AJAXian - ajaxian.com/ eWeek - www.eweek.com/article2/0,1895,1976726,00.asp Swords Sharpened for Ajax Projects - 

www.eweek.com/article2/0,1759,1909570,00.asp AJAX: Getting Started -

developer.mozilla.org/en/docs/AJAX:Getting_Started OpenAjax Alliance - openajax.org/about.html Using the virtual buffer in JAWS to enable Ajax -

ajaxian.com/by/topic/accessibility/ Accessible Rich Internet Applications (WAI-ARIA Roadmap)

addresses the accessibility of dynamic Web content for people with disabilities - www.w3.org/TR/aria-roadmap/