11/13/2007

AAsynchronoussynchronous JJavaScriptavaScript AAndnd XXMLML

Gloria LawGloria Law

Joshua MahazJoshua Mahaz

11/13/2007

AAsynchronoussynchronous JJavaScriptavaScript AAndnd XXMLML

Technique for creating web Technique for creating web applications that are…applications that are… faster faster more functionalmore functional real-timereal-time

Achieved through client/server Achieved through client/server communication without page reloadscommunication without page reloads

11/13/2007

AJAX a New NameAJAX a New Name Components have been around since Components have been around since

mid 90’smid 90’s Microsoft Remote ScriptingMicrosoft Remote Scripting IFRAME (IE3)IFRAME (IE3) LAYER (Netscape 4)LAYER (Netscape 4)

Provided a means of loading external Provided a means of loading external URLs that could modify a parent URLs that could modify a parent page.page.

11/13/2007

AJAX a New NameAJAX a New Name RequirementsRequirements

Plugs-insPlugs-ins Browser specific add-onsBrowser specific add-ons

RepercussionsRepercussions Hassle of third party softwareHassle of third party software Page was always browser specificPage was always browser specific

11/13/2007

AJAX a New NameAJAX a New Name Advancements in Web Development Advancements in Web Development

2000+2000+ Widespread adoption and refinement ofWidespread adoption and refinement of

Client Side Scripting (JavaScript)Client Side Scripting (JavaScript) Server Side Scripting (PHP/SQL/ASP)Server Side Scripting (PHP/SQL/ASP) XML Request (Microsoft Remote Scripting)XML Request (Microsoft Remote Scripting)

Aloud for an easier, portable, and Aloud for an easier, portable, and more refined approach, AJAXmore refined approach, AJAX

11/13/2007

AAsynchronoussynchronous JJavaScriptavaScript AAndnd XXMLML

Technique for creating better, faster, and Technique for creating better, faster, and more interactive web applicationmore interactive web application

JavaScript can communicate directly with JavaScript can communicate directly with serverserver scripting languagescripting language in which Ajax function calls are in which Ajax function calls are

usually made usually made Uses asynchronous data transfer (HTTP Uses asynchronous data transfer (HTTP

requests) between the browser and the web requests) between the browser and the web serverserver

Can use on different OS, free and open Can use on different OS, free and open source implementations of suitable source implementations of suitable

11/13/2007

UsageUsage Real-time form data validationReal-time form data validation

Can validate in a form before the user submit the formCan validate in a form before the user submit the form Auto completionAuto completion

Portion of form data may be auto completed as the Portion of form data may be auto completed as the user typesuser types

Load on demandLoad on demand An HTML page can fetch more data in the backgroundAn HTML page can fetch more data in the background

Refreshing data and server pushRefreshing data and server push Pull data from a server for a up-to-date dataPull data from a server for a up-to-date data Not require to reload the full pageNot require to reload the full page

11/13/2007

AdvantageAdvantage

Bandwidth usageBandwidth usage Quicker loadsQuicker loads Rest of the layout does not have to be Rest of the layout does not have to be

redrawn on each updateredrawn on each update CompatibilityCompatibility

Works on ‘Works on ‘most’most’ browsers browsers

11/13/2007

AdvantageAdvantage

FunctionalityFunctionality Constant data fetching allows page to Constant data fetching allows page to

stay ahead of userstay ahead of user JavaScript event handler gives page JavaScript event handler gives page

a real-time feela real-time feel Mouse click Mouse click Focus changesFocus changes Timers/InterruptsTimers/Interrupts

11/13/2007

DisadvantageDisadvantage Browser IntegrationBrowser Integration

Does not register itself with the browser history Does not register itself with the browser history engineengine

ComplexityComplexity Need to have some knowledge of presentation Need to have some knowledge of presentation

logic in the HTML client page as well as in the logic in the HTML client page as well as in the server-side logicserver-side logic

Response-time concernResponse-time concern Network latencyNetwork latency

DebuggingDebugging Processing logic is embedded both in the client Processing logic is embedded both in the client

and on the server.and on the server.

11/13/2007

DemoDemo

Web-based demo:Web-based demo:

http://www.Mahaz.comhttp://www.Mahaz.com

11/13/2007

ReferenceReference http://www.adaptivepath.com/ideas/essays/archivhttp://www.adaptivepath.com/ideas/essays/archiv

es/000385.phpes/000385.php http://devedge-temp.mozilla.org/viewsource/2003http://devedge-temp.mozilla.org/viewsource/2003

/inner-browsing/index_en.html/inner-browsing/index_en.html http://groups.google.ca/group/http://groups.google.ca/group/

microsoft.public.scripting.remote/microsoft.public.scripting.remote/browse_thread/thread/browse_thread/thread/99b7e6152b45b2e7/6b3689e2dc7401dc99b7e6152b45b2e7/6b3689e2dc7401dc

http://arscif.dsi.unimi.it/http://arscif.dsi.unimi.it/ http://msdn.microsoft.com/msdnmag/issues/http://msdn.microsoft.com/msdnmag/issues/

04/08/CuttingEdge/04/08/CuttingEdge/ http://www.ietf.org/rfc/rfc2396.txthttp://www.ietf.org/rfc/rfc2396.txt http://www.ietf.org/rfc/rfc3986.txthttp://www.ietf.org/rfc/rfc3986.txt http://www.xml.com/pub/a/2005/08/22/ajax.htmlhttp://www.xml.com/pub/a/2005/08/22/ajax.html