Embed Size (px)
Citation preview
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, [email protected]
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/
