4005-713 ` XML Architecture, Tools & Technique ` Presentation

AJAX: AJAX: Asynchronous JavaScript Asynchronous JavaScript and XMLand XMLBy: Alex Maskovyak & Young Suk Moon

4005-713 ` XML Architecture, Tools & Techniques ` 01/14/2009

OutlineOutlineOverview

◦ExamplesBackground

◦Web Application Model◦Problems◦Other alternatives

TechnologyDemoWeb PresenceSourcesQuestions

OverviewOverviewGroup of web development

techniques/technologiesUsed to create interactive “web

applications”Technical jargonBackbone behind “web 2.0”

Overview: ExamplesOverview: ExamplesGoogle suggest: dynamic search

suggestionsGoogle Gmail: rich interface for

emailGoogle maps : interactive atlasDel.icio.us : social bookmarkingFacebook : social gathering site

Background: Web Application Background: Web Application ModelModelRequest/response

communication mode◦User (through browser) requests

information◦Browser waits for server response◦Server responds with information◦Browser refreshes the page

Background: ProblemsBackground: ProblemsUnfriendly user experienceSlowBandwidth/server intensive

AlternativesAlternativesLoad everything on page load and

display only what is needed/when it is needed (hide everything else)◦Good

improves user experience reduces server requests/loads

◦Bad does not solve total bandwidth server

problems resource wasteful on the local machine

Alternatives Alternatives Java applets

◦Good interactive web applications reduces server requests/loads

◦Bad large and slow to load requires browser plugin and compatible

JVM breaks web page continuity (look and feel

may differ from page)

AlternativesAlternativesFlash applets

◦Good highly interactive web applications reduces server requests/load

◦Bad slow to load requires browser plugin Flash development tools aren’t free

AlternativesAlternativesAJAX…

AJAX TechnologyAJAX TechnologyAsynchronous JavaScript and XML?General ingredients:

◦Any client-side scripting language (JavaScript, VBScript)

◦Any type of information container (XML, JSON, pre-formatted HTML, plain text)

◦Asynchronous transfer mechanism (Javascript’s XMLHttpRequest)

◦Server side scripting (PHP, ASP, JSP)

AJAX Technology AJAX Technology (XMLHttpRequest)(XMLHttpRequest)JavaScript classCreated by Microsoft, adapted by other

browsers, and became a standard

var xmlHttp = new XMLHttpRequest();xmlHttp.open(“GET”, “someURL”,

true);xmlHttp.send(“somedata”);xmlHttp.onreadystatechange =

someFunction;

XMLXMLvar xmldoc =

xmlHttp.responseXML.documentElement;

Organized structured data provides an excellent medium for information exchange

DOM and DOM events can be leveraged

XSLT can be leveraged

AJAX AdvantagesAJAX AdvantagesMore responsive and interactive pages

◦Browser responds quickly to additional user commands since it doesn’t hang on server response

Reduces bandwidth◦Common content across pages stays the

same◦Only updated content need be requested

Reduces server connections◦Many object will only be requested once

(scripts, stylesheets, etc)Compatible with many browsers

◦No plugins required

AJAX DisadvantagesAJAX DisadvantagesCreating XMLHttpRequest objects

differs by browserBrowser back/forward buttons

not usefulBookmarking can be difficultSearch engine indexing is difficultBrowser must support JavaScript

and it must be enabledLack of standards, tools, and best

practices

DemoDemoPresent web-site demonstration.

Web PresenceWeb PresenceLink:

http://www.cs.rit.edu/~yxm9371/713/ajax.html

SourcesSourceshttp://www.w3schools.com/Ajax/

default.asphttp://en.wikipedia.org/wiki/

Ajax_(programming)http://www.ajaxf1.com/tutorial/ajax-

php.htmlhttp://www.ajaxmatters.com/http://dot1ne.com/journal/ajax-vs-flash-

round-2-arena-web20-fight