AJAX ? Hype and Reality

AJAX – Hype and Reality 12.04.23 / Seite 1

AJAX – Hype and Reality

Aspects of AJAX

Matthias HertelLeiter Anwendungsentwicklung TechnologieDeutsche Bank Bauspar AG


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


Keine Werbung !

Keine Werbung !


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 !








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 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

http://de.wikipedia.org/wiki/Ajax_(Programmierung)




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

http://mail.google.com/

http://johnvey.com/features/gmailapi/

http://www.a9.com/

http://www.flickr.com/

http://www.flickr.com/

http://www.google.com/webhp?complete=1&hl=en



http://serversideguy.blogspot.com/2004/12/google-suggest-dissected.html

http://serversideguy.blogspot.com/2004/12/google-suggest-dissected.html

http://www.start.com/

http://www.live.com/


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

http://maps.google.com/

http://www.writely.com/

http://www.zimbra.com/

http://www.kiko.com/

http://numsum.com/


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

http://www.phpmagazine.net/18_ajax

http://www.ajaxpatterns.org/



http://www.fiftyfoureleven.com/resources/programming/xmlhttprequest/examples

http://www.fiftyfoureleven.com/resources/programming/xmlhttprequest/examples




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

http://www.javarss.com/ajax/j2ee-ajax.html




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.


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 ?




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();


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


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

http://jcp.org/aboutJava/communityprocess/final/jsr181/index.html


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.


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; }}

http://www.codeproject.com/soap/JavaScriptProxy_01.asp


(µ)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

http://en.wikipedia.org/wiki/KISS_Principle

http://en.wikipedia.org/wiki/KISS_Principle




An AJAX Engine

• A Client-side framework• No special deployment (JavaScript includes only)• Model View Controller Pattern• Timing• Queuing• Caching


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 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" />




The Hype Keywords• Faster• Rich Web application experience

• Web 2.0


Expected results:Bytes Transferred

0 500.000 1.000.000 1.500.000 2.000.000

Traditional

Ajax

73% More Compact


Expected results:Estimated Transmission Time

0 50 100 150 200 250 300 350

Traditional

Ajax

68% Faster


Expected results:Total Task Time

0 20 40 60 80 100 120 140

Traditional

Ajax

32% Faster


Vision 1

Less Network+

Faster Transmissions

More Transactions / sec+

Cost savings


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


Vision 2

Low Cost of Web Applications+

Usability of Desktop Appliactions

Web 2.0(AJAX Applications)


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




The time is right

There is no innovation

when there is no competition

http://en.wikipedia.org/wiki/Browser_wars


Portals and Desktops• Gadgets• Portlets• Web Parts

•The Obsolete Operating

System

•Web OS

•The Obsolete Operating

System

•Web OS


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




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 !

http://www.crockford.com/JSON/index.html

http://jszen.blogspot.com/



http://bennolan.com/behaviour/

http://prototype.conio.net/




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 …

http://www.crockford.com/JSON/index.html

http://weblogs.asp.net/mschwarz/



http://ajax.schwarz-interactive.de/csharpsample/default.aspx

https://svn.borgworx.net/SVN/BorgWorX/trunk/Web/Core/Ajax/




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

http://atlas.asp.net/

http://weblogs.asp.net/scottgu/archive/2005/06/28/416185.aspx

http://weblogs.asp.net/scottgu/archive/2005/06/28/416185.aspx



http://www.start.com/

http://microsoftgadgets.com/

http://microsoftgadgets.com/


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





http://openrico.org/rico/home.page

http://openrico.org/rico/home.page


Frameworks and Engines - 4

and many more…see http://www.ajaxpatterns.org/Ajax_Frameworks

http://www.ajaxpatterns.org/Ajax_Frameworks




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


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

http://www.openajax.net/wordpress/




Questions ?

Date post:	15-May-2015
Category:	Documents
Upload:	sampetruda
View:	3,030 times
Download:	3 times

AJAX ? Hype and Reality

Documents