ajax ? hype and reality
TRANSCRIPT
AJAX – Hype and Reality 12.04.23 / Seite 1
AJAX – Hype and Reality
Aspects of AJAX
Matthias HertelLeiter Anwendungsentwicklung TechnologieDeutsche Bank Bauspar AG
AJAX – Hype and Reality 12.04.23 / Seite 2
Agenda• AJAX defined• The Roots• The Reality• The AJAX Model• The Code• The Engine & MVC• The Hype & The Vision• JavaScript hints• Frameworks• AJAX Mistakes & Discussion
AJAX – Hype and Reality 12.04.23 / Seite 3
Keine Werbung !
Keine Werbung !
AJAX – Hype and Reality 12.04.23 / Seite 4
Aiax (röm. = Ajax) Der Telamonier genanntIn der griechischen Sage, Held von Troja auf griechischer Seite. Sohn des Telamon von Salamis und der Periboia. Er zog mit 12 Schiffen in den Krieg gegen Troja und wird von Homer als der größte, schönste und tapferste Held neben Achilleus gepriesen und als "Turm der Achaier" bezeichnet. Seine letzte große Tat war die Rettung der Leiche des Achilleus aus den Händen der Trojaner. Als im Streit um die Waffen des Achilleus diese, dem Odysseus zufielen, verfiel Ajax aus Zorn in Wahnsinn und begann Selbstmord. Er kaufte Polymnestor von Thrakien Polydoros ab, tötete Teuthras und seine Kriegsbeute war die Tekmessa.
http://www.griechische-antike.de/gott-goetter-helden.php/A/Aiax
Keine alten Geschichten !
Keine alten Geschichten !
AJAX – Hype and Reality 12.04.23 / Seite 5
Agenda• AJAX defined• The Roots• The Reality• The AJAX Model• The Code• The Engine & MVC• The Hype & The
Vision• JavaScript hints• Frameworks• AJAX Mistakes &
Discussion
AJAX – Hype and Reality 12.04.23 / Seite 6
AJAX definedAJAX = Asynchronous JavaScript And XML (+ DHTML)
Ajax isn’t a technology. It’s really several technologies, each flourishing
in its own right, coming together in powerful new ways. Ajax incorporates:– standards-based presentation using XHTML and CSS; – dynamic display and interaction using the Document Object
Model; – data interchange and manipulation using XML and XSLT; – asynchronous data retrieval using XMLHttpRequest; – and JavaScript binding everything together.
From: A New Approach to Web Applications• http://www.adaptivepath.com/publications/essays/archives/
000385.php
• http://de.wikipedia.org/wiki/Ajax_(Programmierung)• http://en.wikipedia.org/wiki/AJAX
AJAX – Hype and Reality 12.04.23 / Seite 7
Agenda• AJAX defined• The Roots• The Reality• The AJAX Model• The Code• The Engine & MVC• The Hype & The Vision• JavaScript hints• Frameworks• AJAX Mistakes & Discussion
AJAX – Hype and Reality 12.04.23 / Seite 8
Reality first – Samples 1Outlook Web Access
Google Mail (http://mail.google.com)Details on the implementation can be found at:http://johnvey.com/features/gmailapi/
Amazon Search Engine (http://www.a9.com)
Flickr Image Libraries (http://www.flickr.com)
Google Suggest (http://www.google.com/webhp?complete=1&hl=en)Details on the implementation can be found at:http://serversideguy.blogspot.com/2004/12/google-suggest-dissected.html
.
Microsofts playground athttp://www.start.com/ http://www.live.com
AJAX – Hype and Reality 12.04.23 / Seite 9
Reality first – Samples 2http://maps.google.com
maps, routes & satelite images, Geo-Coding, Geo-Images
http://www.writely.comA TextEditor and Document Web Storage System
http://www.zimbra.comA(nother) Mail Client
http://www.kiko.comOnline Calendar
http://numsum.comOnline Spreadsheet
AJAX – Hype and Reality 12.04.23 / Seite 10
About…, more explained…
• http://www.phpmagazine.net/18_ajax• http://www.ajaxpatterns.org/ is a very useful link
collection• http://www.fiftyfoureleven.com/resources/programming/x
mlhttprequest/examples
• AJAX is not a new thing
http://msdn.microsoft.com/library/en-us/dnaspp/html/lifewithoutrefresh.asp
AJAX – Hype and Reality 12.04.23 / Seite 11
AJAX Source Code Sampleshttp://www.javarss.com/ajax/j2ee-ajax.html
Simple and easy to read article that explains details on the XMLHTTP object. Has a sample for using JSP on the server.
http://msdn.microsoft.com/workshop/author/webservice/webservice.aspHow to call WebServices with the XMLHTTP ActiveXControl in IE. This a non reusable sample on how to use the XMLHTTP object in IE.
https://bpcatalog.dev.java.net/nonav/ajax/ajax.htmlAn article from Sun, how to use the XMLHTTP object and call the server by using a simple http GET request with parameters in the url. – No details about the server code.
http://www.omnytex.com/articles/xhrstruts/Ajax using XMLHTTPRequest and Struts – again shows how to use the XMLHTTP object using a simple http GET request with parameters in the url.
http://www.devarticles.com/c/a/XML/XML-in-the-Browser-Submitting-forms-using-AJAX/Submitting http forms using AJAX
AJAX – Hype and Reality 12.04.23 / Seite 12
Agenda• AJAX defined• The Roots• The Reality• The AJAX Model• The Code• The Engine & MVC• The Hype & The Vision• JavaScript hints• Frameworks• AJAX Mistakes & Discussion
AJAX – Hype and Reality 12.04.23 / Seite 13
ServerServerBrowserBrowser
Page & Sub-PagesPage & Sub-Pages
Form
old "post-back" Model1. A request (GET) to the
server2. The server "builds" the
HTML, data is included3. The page and data is
downloaded.4. All resources (images,
include files etc.) are requested and downloaded as defined by the page
5. Client-side JavaScript functions are used to handle events and to change the HTML DOM.
6. A Form is submitted (POST) and all form data is sent to the server.
Steps 2 to 6 are repeated
RessourcesRessourcesgif
css
JS
The page (HTML ) and the resources are downloaded on every request.
The page (HTML ) and the resources are downloaded on every request.
AJAX – Hype and Reality 12.04.23 / Seite 14
ServerServerBrowserBrowser
Page & Sub-PagesPage & Sub-Pages
(no form)
AJAX Model
RessourcesRessourcesgif
css
JS
Only data is transferred after the Web Form has loaded.
Only data is transferred after the Web Form has loaded.
1. A request (GET) to the server2. The server "builds" the HTML,
no data is included !3. The page is downloaded.4. All resources (images, include
files etc.) are requested and downloaded as defined by the page.
5. Client-side JavaScript functions are used to get new data from the server using a separate channel (WebService)
6. handle events and to change the HTML DOM.
Steps 5 to 6 are repeated
WebServiceWebService
How ?How ?
AJAX – Hype and Reality 12.04.23 / Seite 15
Agenda• AJAX defined• The Roots• The Reality• The AJAX Model• The Code• The Engine & MVC• The Hype & The Vision• JavaScript hints• Frameworks• AJAX Mistakes & Discussion
AJAX – Hype and Reality 12.04.23 / Seite 16
The client side – the channelThe XMLHTTP Object• Scriptable• ActiveXControl or built-in
try { x = new ActiveXObject("Msxml2.XMLHTTP");} catch (e) { }
if (x == null) { try { x = new ActiveXObject("Microsoft.XMLHTTP"); } catch (e) { }} // if // Gecko / Mozilla / Firefoxif ((x == null) && (typeof(XMLHttpRequest) != "undefined")) x = new XMLHttpRequest();
try { x = new ActiveXObject("Msxml2.XMLHTTP");} catch (e) { }
if (x == null) { try { x = new ActiveXObject("Microsoft.XMLHTTP"); } catch (e) { }} // if // Gecko / Mozilla / Firefoxif ((x == null) && (typeof(XMLHttpRequest) != "undefined")) x = new XMLHttpRequest();
AJAX – Hype and Reality 12.04.23 / Seite 17
The client side – asynchronous• Message oriented programmingSending:
The callback method:
• Synchronous processing is possible, but blocking.
x.open("POST", url, fResponse);x.setRequestHeader("SOAPAction", Action);x.setRequestHeader("Content-Type", "text/xml; charset=utf-8");x.send(text);
x.open("POST", url, fResponse);x.setRequestHeader("SOAPAction", Action);x.setRequestHeader("Content-Type", "text/xml; charset=utf-8");x.send(text);
function fResponse { if ((x != null) && (x.readyState == 4)) { //COMPLETED outputText = x.ResponseText; x = null;
document.getElementById("outputField").value = outputText; } // if} // fResponse
function fResponse { if ((x != null) && (x.readyState == 4)) { //COMPLETED outputText = x.ResponseText; x = null;
document.getElementById("outputField").value = outputText; } // if} // fResponse
AJAX – Hype and Reality 12.04.23 / Seite 18
The server side• Regular request with or without data
• Alternative 1: regular *.aspx / *.jsp / *.php pages– data oriented programming and remote execution
in html oriented technology– works without infrastructure changes
• Alternative 2: special implementations– data oriented programming get easier– parameter parsing, reflection, protocol…– special infrastructure is needed (AJAX.NET)
• Alternative 3: using the WebService standard– Made for remote execution and standard data types– no coding in infrastructure needed (ASP.NET, JSR 181)
http://jcp.org/aboutJava/communityprocess/final/jsr181/index.html
AJAX – Hype and Reality 12.04.23 / Seite 19
No native programming !• Native programming can be done – but costs a lot• JavaScript overhead should be concentrated into
common include files
Common features needed:• Parameter -> protocol• Protocol -> return values• Simple data types• Complex data types• Queuing of AJAX requests (max. 2 http connections per
server)• Memory leaks
Many reasons for building a reusable framework and engine.
AJAX – Hype and Reality 12.04.23 / Seite 20
WebService proxies for JavaScriptDeclarative WebService:
WSDL Description is auto-generatedXSLT file for transformationJavaScript fragment & common include file
Usage:
Or:
also see:http://www.codeproject.com/soap/JavaScriptProxy_01.asp
XSLTXSLT
WSDLWSDL
WebServiceWebService
JavaScript
JavaScript
[WebMethod]public string CalcPrimeFactors(string inputText) { // implementation cut out return (outputText);} // CalcPrimeFactors
[WebMethod]public string CalcPrimeFactors(string inputText) { // implementation cut out return (outputText);} // CalcPrimeFactors
alert(proxies.CalcService.CalcPrimeFactors("12")); alert(proxies.CalcService.CalcPrimeFactors("12"));
proxies.CalcService.CalcPrimeFactors.func = displayFactors; proxies.CalcService.CalcPrimeFactors("12");
displayFactors(retVal) { alert(retVal); }
proxies.CalcService.CalcPrimeFactors.func = displayFactors; proxies.CalcService.CalcPrimeFactors("12");
displayFactors(retVal) { alert(retVal); }
@WebServicepublic class MyWebService { @WebMethod(operationName = "echo", action="urn:Echo") public String echo(String input) { return input; }}
@WebServicepublic class MyWebService { @WebMethod(operationName = "echo", action="urn:Echo") public String echo(String input) { return input; }}
AJAX – Hype and Reality 12.04.23 / Seite 21
(µ)Process oriented programmingAsynchronous programming is very different when comparedto the usual programming style.• Asynchronous programming needs functional entry points
on message events.• Programmers "love" linear programming style when
programming processes.• Multi-threading is not supported on JavaScript platforms.• Synchronous processing of server-calls works – but blocks.• API of the AJAX engine is critical for success.• Keep it simple. (http://en.wikipedia.org/wiki/KISS_Principle
)// declare an AJAX actionvar actionDefinition = { prepare: function() { return (document.getElementById("inputField").value); }, call: proxies.CalcService.CalcPrimeFactors, finish: function (p) { document.getElementById("outputField").value = p; }} // actionDefinition
// declare an AJAX actionvar actionDefinition = { prepare: function() { return (document.getElementById("inputField").value); }, call: proxies.CalcService.CalcPrimeFactors, finish: function (p) { document.getElementById("outputField").value = p; }} // actionDefinition
AJAX – Hype and Reality 12.04.23 / Seite 22
Agenda• AJAX defined• The Roots• The Reality• The AJAX Model• The Code• The Engine & MVC• The Hype & The Vision• JavaScript hints• Frameworks• AJAX Mistakes & Discussion
AJAX – Hype and Reality 12.04.23 / Seite 23
An AJAX Engine
• A Client-side framework• No special deployment (JavaScript includes only)• Model View Controller Pattern• Timing• Queuing• Caching
AJAX – Hype and Reality 12.04.23 / Seite 24
AJAX Controls
• Server & client-side framework.• No special deployment (JavaScript includes only).• General implementation of JavaScript behaviours.• Extending pages by reusing components as controls.• Using ASP.NET web controls & user controls
infrastructure.
AJAX – Hype and Reality 12.04.23 / Seite 25
AJAX Controls• Declarative programming• Less code• Reusable components• Less complex when using controls• More complex when programming controls
<script type="text/javascript"src="../ajaxcore/GetJavaScriptProxy.aspx?service=../S03_AJAXControls/TableData.asmx"></script>
<ajax:TableDataPager ID="TableDataPager33" runat="server" Service="TableData" tabledatapart="tab44" Pagesize="20" showall="true" /><ajax:TableData ID="tab44" cols="company[Company];name[Name]:200;city[City]:100;country[Country]:100" runat="server" />
<script type="text/javascript"src="../ajaxcore/GetJavaScriptProxy.aspx?service=../S03_AJAXControls/TableData.asmx"></script>
<ajax:TableDataPager ID="TableDataPager33" runat="server" Service="TableData" tabledatapart="tab44" Pagesize="20" showall="true" /><ajax:TableData ID="tab44" cols="company[Company];name[Name]:200;city[City]:100;country[Country]:100" runat="server" />
AJAX – Hype and Reality 12.04.23 / Seite 26
Agenda• AJAX defined• The Roots• The Reality• The AJAX Model• The Code• The Engine & MVC• The Hype & The Vision• JavaScript hints• Frameworks• AJAX Mistakes & Discussion
AJAX – Hype and Reality 12.04.23 / Seite 27
The Hype Keywords• Faster• Rich Web application experience
• Web 2.0
AJAX – Hype and Reality 12.04.23 / Seite 28
Expected results:Bytes Transferred
0 500.000 1.000.000 1.500.000 2.000.000
Traditional
Ajax
73% More Compact
AJAX – Hype and Reality 12.04.23 / Seite 29
Expected results:Estimated Transmission Time
0 50 100 150 200 250 300 350
Traditional
Ajax
68% Faster
AJAX – Hype and Reality 12.04.23 / Seite 30
Expected results:Total Task Time
0 20 40 60 80 100 120 140
Traditional
Ajax
32% Faster
AJAX – Hype and Reality 12.04.23 / Seite 31
Vision 1
Less Network+
Faster Transmissions
More Transactions / sec+
Cost savings
AJAX – Hype and Reality 12.04.23 / Seite 32
Expected results:more complex dev.
• Complex, unusual JavaScript programming• no usable debugger (in FireFox)• no Profiler• no high level design tools (UML, DSL, …)• No multithreading but asynchronous callbacks
AJAX – Hype and Reality 12.04.23 / Seite 33
Vision 2
Low Cost of Web Applications+
Usability of Desktop Appliactions
Web 2.0(AJAX Applications)
AJAX – Hype and Reality 12.04.23 / Seite 34
Browser History
http://www.microsoft.com/windows/WinHistoryIE.mspx
96
97 98 99 00 01 02 03 04 05
NS 2.0B3
JavaScript
IFrames
JScript
Browser Wars
FF 1.0
CSS
ECMAScript
DOM
DOM 1
Flash 3
Flash 8Java Applet
FF 1.5
E4X
XML
XMLHTTP
DOM 3
XForms
XSL-T
xslt2
The Web Depression Web 2.0 … ???
RDF
XHTML SVG
Mozilla 1.0
06
SOAP WSDL
95
IE 1 2 IE 3 IE 4 IE 5 5.5 IE 6 IE 7
HTML
AJAX – Hype and Reality 12.04.23 / Seite 35
The time is right
There is no innovation
when there is no competition
http://en.wikipedia.org/wiki/Browser_wars
AJAX – Hype and Reality 12.04.23 / Seite 36
Portals and Desktops• Gadgets• Portlets• Web Parts
•The Obsolete Operating
System
•Web OS
•The Obsolete Operating
System
•Web OS
AJAX – Hype and Reality 12.04.23 / Seite 37
Web 2.0 – The Vision… is using Web 2.0 technologies & techniques… and a cloud of new keywords
– Semantic Web– CSS– SVG– AJAX– Java Web Start, Click to install– Flex, Lazlo, Flash– XUL, XBL– RSS, Atom– Clean and meaningful URLs– Posting information to services– SOAP, WSDL, REST WebServices– Social networking http://en.wikipedia.org/wiki/Web_2.0
AJAX – Hype and Reality 12.04.23 / Seite 38
Agenda• AJAX defined• The Roots• The Reality• The AJAX Model• The Code• The Engine & MVC• The Hype & The Vision• JavaScript hints• Frameworks• AJAX Mistakes & Discussion
AJAX – Hype and Reality 12.04.23 / Seite 39
The Art of JavaScriptYou MUST understand JavaScript !
JSON (JavaScript Object Notation)http://www.crockford.com/JSON/index.html
Strange Zen Of JavaScriptBlog from Scott Andrew at http://jszen.blogspot.com/
BehaviourBehaviour is the missing link for your ajax apps.http://bennolan.com/behaviour/
prototypehttp://prototype.conio.net/ is a JavaScript Framework for dynamic web applications with great ideas !
AJAX – Hype and Reality 12.04.23 / Seite 40
Agenda• AJAX defined• The Roots• The Reality• The AJAX Model• The Code• The Engine & MVC• The Hype & The Vision• JavaScript hints• Frameworks• AJAX Mistakes & Discussion
AJAX – Hype and Reality 12.04.23 / Seite 41
Frameworks and Engines - 1Open Source Frameworks
Ajax.NETis a great engine written by Michael Schwarz.It uses a special protocol based on JSON for expressing JavaScript objects so you have to write special server side classes. (WebServices are announced).He’s also discussing and writing on his blog athttp://weblogs.asp.net/mschwarz/.Samples for this engine:http://ajax.schwarz-interactive.de/csharpsample/default.aspxSource at:https://svn.borgworx.net/SVN/BorgWorX/trunk/Web/Core/Ajax/
My statement:
will not be finished because of …
My statement:
will not be finished because of …
AJAX – Hype and Reality 12.04.23 / Seite 42
Frameworks and Engines – 2Atlas http://atlas.asp.net/
Microsoft is also working on AJAX application framework.The project with the codename Atlas was announced onhttp://weblogs.asp.net/scottgu/archive/2005/06/28/416185.aspx
see:http://www.live.comhttp://www.start.comhttp://microsoftgadgets.comnext version of hotmail…
My statement:
• bound to ASP.NET
• unfinished
• Using new XML based modeling +
scripting
My statement:
• bound to ASP.NET
• unfinished
• Using new XML based modeling +
scripting
AJAX – Hype and Reality 12.04.23 / Seite 43
Frameworks and Engines - 3ComponentArt
http://www.componentart.com/home.aspx
Rico - Open Sourcehttp://openrico.org/rico/home.page is a rich JavaScript
framework that also does AJAX.
My statement:
• AJAX is a Hype keyword
• HTML frameworks will adopt it
• AJAX is a "MUST HAVE" featureMy statement:
• AJAX is a Hype keyword
• HTML frameworks will adopt it
• AJAX is a "MUST HAVE" feature
AJAX – Hype and Reality 12.04.23 / Seite 44
Frameworks and Engines - 4
and many more…see http://www.ajaxpatterns.org/Ajax_Frameworks
AJAX – Hype and Reality 12.04.23 / Seite 45
Agenda• AJAX defined• The Roots• The Reality• The AJAX Model• The Code• The Engine & MVC• The Hype & The Vision• JavaScript hints• Frameworks• AJAX Mistakes & Discussion
AJAX – Hype and Reality 12.04.23 / Seite 46
AJAX MistakesUsing AJAX for the sake of AJAXBreaking the Back ButtonNot giving immediate visual cues for clickingLeaving offline people behindWhat happens if JavaScript is disabled ?Sending sensitive information in the clearSingle platform developmentToo much codeInventing new UI conventionsNot being linkableAsynchronously performing batch operationsBlocking spidering & web crawlers
AJAX – Hype and Reality 12.04.23 / Seite 47
More LinksOpenAjax http://www.openajax.net/wordpress/
Understanding and Solving IE Leak Patternshttp://msdn.microsoft.com/library/en-us/IETechCol/dnwebgen/ie_leak_patterns.asp
AJAX – Hype and Reality 12.04.23 / Seite 48
Questions ?