AjaxAjax( Asynchronous JavaScript + ( Asynchronous JavaScript +

XML XML ))

Information Science and Knowledge Information Science and Knowledge Systems: Semantic Web Systems: Semantic Web

Spring 2006 / Dr. Don TurnbullSpring 2006 / Dr. Don Turnbull

Presented by David KimPresented by David Kim

April 17, 2006 2

AjaxAjax Pushing desktop software functionality into the Pushing desktop software functionality into the

browserbrowser Interactive, state-dependent controls & functionalityInteractive, state-dependent controls & functionality ““Save As…” inside the browserSave As…” inside the browser

Jesse James Garrett says: Jesse James Garrett says: standards-based presentation using XHTML and CSSstandards-based presentation using XHTML and CSS dynamic display and interaction using the dynamic display and interaction using the

Document Object ModelDocument Object Model data interchange and manipulation using XML and data interchange and manipulation using XML and

XSLTXSLT asynchronous data retrieval using XMLHttpRequestasynchronous data retrieval using XMLHttpRequest JavaScript binding everything together.JavaScript binding everything together.

( ( Source: class Source: class material )material )

April 17, 2006 3

AJAX ModelAJAX Model

April 17, 2006 4

How AJAX is differentHow AJAX is different Classic ModelClassic Model

Source: Source: developer.com

April 17, 2006 5

How AJAX is different How AJAX is different (cont’d)(cont’d)

Ajax ModelAjax Model

Source: Source: developer.com

eg

April 17, 2006 6

HistoryHistory

Microsoft’s Remote ScriptingMicrosoft’s Remote Scripting Microsoft.XMLHTTP COM Microsoft.XMLHTTP COM

e.g.) e.g.) Outlook Web Access Outlook Web Access Mail2Web.comMail2Web.com

Hidden Frame Hidden Frame Hidden IFrameHidden IFrame

BigRedChairBigRedChair

April 17, 2006 7

Browsers that support Browsers that support AjaxAjax

MicrosoftMicrosoft Internet ExplorerInternet Explorer version 5.0 and above, version 5.0 and above, and browsers based on it (Mac OS versions not and browsers based on it (Mac OS versions not supported) supported)

GeckoGecko-based browsers like -based browsers like MozillaMozilla, , MozillaMozilla FirefoxFirefox, , SeaMonkeySeaMonkey, , CaminoCamino, , FlockFlock, , EpiphanyEpiphany, , GaleonGaleon and and NetscapeNetscape version 7.1 and above version 7.1 and above

Browsers implementing the Browsers implementing the KHTMLKHTML APIAPI version version 3.2 and above, including 3.2 and above, including KonquerorKonqueror version 3.2 version 3.2 and above, and above, AppleApple SafariSafari version 1.2 and above, version 1.2 and above, and and NokiaNokia's 's Web Browser for S60Web Browser for S60 version 3rd version 3rd edition and above edition and above

OperaOpera browsers version 8.0 and above, including browsers version 8.0 and above, including Opera Mobile BrowserOpera Mobile Browser version 8.0 and above version 8.0 and above

April 17, 2006 8

Browsers that do not Browsers that do not support Ajaxsupport Ajax

Opera 7 and below Opera 7 and below Microsoft Internet Explorer 4.0 and Microsoft Internet Explorer 4.0 and

below below Text-based browsers like Text-based browsers like LynxLynx and and

LinksLinks Browsers for the Browsers for the visually impairedvisually impaired

(speech-synthesising, braille) (speech-synthesising, braille)

April 17, 2006 9

Why is it popularWhy is it popular

Google helped popularizeGoogle helped popularize Increase Usability of Web Increase Usability of Web

ApplicationsApplications Rich Internet Applications without Rich Internet Applications without

FlashFlash Save BandwidthSave Bandwidth Download only data you needDownload only data you need Faster Interfaces (sometimes)Faster Interfaces (sometimes)

April 17, 2006 10

Why is it bad?Why is it bad?

Breaks back button supportBreaks back button support URL’s don’t change at state changesURL’s don’t change at state changes Cross Browser Issues can be painCross Browser Issues can be pain Can’t access domains other than the Can’t access domains other than the

calling domaincalling domain May be disabled (for security May be disabled (for security

reasons) or not available on some reasons) or not available on some browsersbrowsers

April 17, 2006 11

How and When to Use AJAXHow and When to Use AJAX

Highly interactive applicationsHighly interactive applications Parts of pagesParts of pages IntranetsIntranets Online wizardsOnline wizards Data input & validationData input & validation Data visualizationData visualization

April 17, 2006 12

Examples of AjaxExamples of Ajax GMail / Google Maps/Suggest/Personalized GMail / Google Maps/Suggest/Personalized

Home Home FlickrFlickr BackpackBackpack Amazon Diamond Search / Amazon A9Amazon Diamond Search / Amazon A9 BasecampBasecamp map.search.chmap.search.ch WritelyWritely Instant Domain SearchInstant Domain Search Netflix top 100Netflix top 100

April 17, 2006 13

Flash vs. AjaxFlash vs. Ajax No plug-in needed for AjaxNo plug-in needed for Ajax Flash development cost more momeyFlash development cost more momey Flash generally has slower page load timeFlash generally has slower page load time

ActionScript doesn’t have cross browser ActionScript doesn’t have cross browser issuesissues

Flash can access other domain with Flash can access other domain with crossdomain.xml filecrossdomain.xml file

Flash exampleFlash example The The BroadmoorBroadmoor LaszloLaszlo

April 17, 2006 14

XMLHttpRequestXMLHttpRequest A JavaScript Class that lets us make A JavaScript Class that lets us make

asynchronous HTTP requests from JavaScriptasynchronous HTTP requests from JavaScript Make an HTTP request from a JavaScript eventMake an HTTP request from a JavaScript event A callback JavaScript function is invoked at each A callback JavaScript function is invoked at each

state of the HTTP request and responsestate of the HTTP request and response Take three argumentsTake three arguments

xmlhttp.open (Request Type, URL, Async)xmlhttp.open (Request Type, URL, Async)

e.g.) xmlhttp.open (“GET”, “test.html”, true);e.g.) xmlhttp.open (“GET”, “test.html”, true);

April 17, 2006 15

XMLHttpRequest (cont’d)XMLHttpRequest (cont’d)

xmlhttp.open(“GET”,”test.html”,false); xmlhttp.open(“GET”,”test.html”,false); xmlhttp.send(null); xmlhttp.send(null); if(xmlhttp.status == 200){ if(xmlhttp.status == 200){ alert(xmlhttp.responseText); alert(xmlhttp.responseText); } }

xmlhttp.open(“GET”,”test.html”,true); xmlhttp.open(“GET”,”test.html”,true); xmlhttp.onreadystatechange=function(){ xmlhttp.onreadystatechange=function(){ if(xmlhttp.readyState == 4) { if(xmlhttp.readyState == 4) { if(xmlhttp.status == 200) { if(xmlhttp.status == 200) { alert(xmlhttp.responseText); alert(xmlhttp.responseText);

} } }} } } xmlhttp.send(null); xmlhttp.send(null);

April 17, 2006 16

XMLHTTPRequest XMLHTTPRequest methodsmethods

void abort()void abort() String getAllresponseHeaders()String getAllresponseHeaders() String getResponseHeader (String key)String getResponseHeader (String key) void open (String method, String URL, void open (String method, String URL,

ashynchronous boolean)ashynchronous boolean) void send(String body)void send(String body) void setRequestHeader (String key, void setRequestHeader (String key,

HTTPString value)HTTPString value)

April 17, 2006 17

XMLHTTPRequest XMLHTTPRequest propertiesproperties

onreadystatechangeonreadystatechange readystatereadystate

0 = unintilaized0 = unintilaized 1 = loading1 = loading 2 = loaded2 = loaded 3 = interactive3 = interactive 4 = complete4 = complete

responseTextresponseText responseXMLresponseXML StatusStatus statusTextstatusText

April 17, 2006 18

Third-party libraries and Third-party libraries and frameworksframeworks

Cross-browser librariesCross-browser libraries X libraryX library SarissaSarissa PrototypePrototype

Widgets and widget suitesWidgets and widget suites ScriptaculousScriptaculous RicoRico

Application frameworksApplication frameworks DWRDWR, , JSONJSON, JPSpan (down), and , JPSpan (down), and SAJAXSAJAX BackbaseBackbase Echo2Echo2 Ruby on RailsRuby on Rails Ajax.NetAjax.Net

April 17, 2006 19

ConclusionConclusion

Ajax can be a Rich UI solution for the Ajax can be a Rich UI solution for the Semantic Web as either being a Semantic Web as either being a View/Controller or being one whole View/Controller or being one whole MVC itselfMVC itself

AlternativesAlternatives Flash / Java (web start)Flash / Java (web start)

Decide whether to use Ajax with Decide whether to use Ajax with what toolswhat tools

April 17, 2006 20

ReferencesReferences

WikipediaWikipedia Professional AjaxProfessional Ajax Adaptive PathAdaptive Path Ajax Presentation OutlineAjax Presentation Outline Ajax vs. FlashAjax vs. Flash IBM IBM developerWorksdeveloperWorks Telerik.comTelerik.com Jibbering.comJibbering.com

April 17, 2006 21

Questions ?Questions ?