Ajax Transport Layer Alternatives
[img[cuttingfig02.gif]]
!Security Restrictions\n*Browser Settings\n*Firewalls\n\n!JVM differences\n*IE Mac JVM not scriptable\n\n!Browser Upgrades\n*Netscape 5\n**JVM different \n***security model\n*XP\n**Bye-bye JVM\n
Ajax Transport Layer Alternatives
[[Early Browser Scriptability]] : [[Microsoft Remote Scripting]] \n[[Other Embeddable Transports]] : [[Browser Native Transports]] : [[Convergence]]\n
!Remote Procedure Calls\n*Part of Microsoft Scripting Library \n**Java Applet on client\n**Active Server Pages on server\n*invoke server procedures from client\n**proxy object\n**data marshalling\n\n1998 - [[Dino Esposito's MIND Article|http://www.microsoft.com/mind/0498/cutting0498.asp]] \n1999 - [[Andrew Clinick's MSDN Tutorial|http://msdn.microsoft.com/library/default.asp?url=/library/en-us/dnclinic/html/scripting041299.asp]]\n\n!Java Issues\n*Browser Settings\n*Firewalls\n*IE Mac JVM not scriptable\n*Browser Upgrades\n**Netscape 5\n***security model\n**XP\n***Bye-bye JVM\n
''Early 2000's - Browser features converge''\n!Standards (~1999)\n*[[DOM|http://www.w3.org/DOM/]]\n*[[CSS|http://www.w3.org/Style/CSS/]]\n*~JavaScript 1.5 / [[ECMAScript 3|http://www.ecma-international.org/publications/standards/Ecma-262.htm]]\n\n!~XMLHttpRequest adoption (2001+)\n*Mozilla 1.0\n*Safari 1.2\n*Opera 8.0\n\n!Browser Adoption, Attrition\n*~Y2K, technology refresh\n*Up with Mozilla / Firefox / Opera / Safari / IE 5+\n*Down with Netscape 4.x, IE pre-5\n\n!2005 - Jesse [[utters the A-word|http://www.adaptivepath.com/publications/essays/archives/000385.php]]\n*[[O frabjous day!|http://www.jabberwocky.com/carroll/jabber/jabberwocky.html]] Callooh! Callay!
<<option chkOpenInNewWindow>> OpenLinksInNewWindow\n<<option chkAutoSave>> AutoSave\n<<option chkSaveBackups>> SaveBackups\n<<option chkSaveEmptyTemplate>> SaveEmptyTemplate\n<<option chkToggleLinks>> Clicking on links to tiddlers that are already open causes them to close\n^^(override with Control or other modifier key)^^\n<<option chkHttpReadOnly>> HideEditingFeatures when viewed over HTTP
!Reference\n[[W3C Spec|http://www.w3.org/TR/DOM-Level-3-LS/Overview.html#contents]]\n\n!Features\n*set of interfaces for loading and saving document objects and fragments\n** Serializer, Parser\n** Input, Output Streams\n** Stream Reader and Writer\n\n*Parser takes specified action against supplied DOM context node once loaded\n**Append as Children\n**Replace Children\n**etc\n\n*[[Taconite|http://taconite.sourceforge.net/]] works similarly but with XHR as transport\n\n!Pros\n*~W3C Recommendation\n\n!Cons\n*only barely implemented by Opera 7.6+\n*partial Mozilla implementation
!References\n[[Eric Costello's Apple article|http://developer.apple.com/internet/webcontent/iframe.html]] : [[AjaxPatterns|http://ajaxpatterns.org/IFrame_Call]]\n\n!Features\n*Hidden Iframe(s)\n*GET or POST\n*Callbacks\n\n!Pros\n*wide browser compatibility\n\n!Cons\n*browser history\n*that #@%^! IE click\n*iframe [[not supported|http://www.ashleyit.com/blogs/brentashley/archives/000443.html]] by XHTML strict\n*cross-domain policy\n** [[iframe communication hacks|http://blog.monstuff.com/archives/000304.html]]\n!Code\n{{{\n<iframe \n id='Iframe' \n style="height=1px;width=1px;visibility:hidden" \n/> \n\nfunction doIframe( url ){\n var iframe = document.getElementById('Iframe');\n iframe.onload=onIframeLoad;\n iframe.src = url;\n} \n \nfunction onIframeLoad(){\n var iframe = document.getElementById('Iframe');\n response = iframe.contentWindow.document.body.innerHTML;\n processResponse( response );\n}\n \n}}}
! :: Rich Application Processing Model ::\n[img[transportlayer.jpg]]\n!Transport Layer\n*Spans divide between client (above) and server (below)\n**includes request/response packaging interface\n**depending on transport may extend deeper to encoding layer
!~XMLHttpRequest\n*Created by Microsoft for Outlook Web Access\n*Internet Explorer 5\n*~ActiveX Object\n**only IE until Mozilla 1.0 release in 2002\n\n!Macromedia Flash\n*generally built as self-contained browser-hosted apps\n*seen as external dependency\n**wide deployment across main browsers\n**no fringe browser support\n*later Flash remoting\n**~ColdFusion backend
!References\n[[DotVoid|http://dotvoid.com/view.php?id=13]] : [[AjaxPatterns|http://ajaxpatterns.org/On-Demand_Javascript]] \n\n!Features\n*create a script tag, set its src attribute\n*server returns javascript to execute\n\n!Pros\n*no Same Origin restriction\n*code executes without explicit callback\n\n!Cons\n*limited to returning Javascript\n\n!Code\n{{{\nfunction doOnDemandJS( url ) {\n var head = document.getElementsByTagName('head').item(0);\n var old = document.getElementById('OnDemandJS');\n if (old) head.removeChild(old);\n\n script = document.createElement('script');\n script.src = url;\n script.type = 'text/javascript';\n script.defer = true;\n script.id = 'OnDemandJS';\n void(head.appendChild(script));\n}\n}}}\n!Example\n[[del.icio.us bookmarks service|http://del.icio.us/help/json]]\n*uses JSON to create bookmarks object\n
!Actionscript Objects\n[[XMLSocket|http://www.macromedia.com/support/flash/action_scripts/actionscript_dictionary/actionscript_dictionary860.html]]\n*Since Flash 5\n*XML encoding\n\n[[flex.net.socket|http://livedocs.macromedia.com/flex/2/langref/flash/net/Socket.html]]\n*Flash 8.5 / Flex 2.0\n*Raw TCP/IP socket\n\n!Javascript Helpers\nControl Flash from JS: [[AFLAX|http://www.aflax.org/]] \n\nControl JS from flash: [[Flex/Ajax Bridge|http://labs.macromedia.com/wiki/index.php/Flex_Framework:FABridge]]\n \n[[Flash4Ajax|http://blog.monstuff.com/archives/000280.html]]\n!Pros\n*integrates with Flash ui components\n*wide distribution\n*persistent TCP connection\n\n!Cons\n*plugin dependency\n*custom server\n*port > 1024\n*same-domain\n**mitigated by crossdomain.xml override\n***[[security caveats|http://shiflett.org/archive/263]] (use separate API domain)\n!Examples\n*[[AFLAX Demos|http://www.aflax.org/demos.htm]]\n*[[FABridge Sample App|http://flexapps.macromedia.com/flex2beta2/fabridge/samples/FABridgeSample.html]]\n\n
!References\n[[Ajax Patterns|http://ajaxpatterns.org/HTTP_Streaming]] : [[Alex Russell introduces Comet|http://alex.dojotoolkit.org/?p=545]] : [[Phil Windley on Comet|http://www.irishdev.com/NewsArticle.aspx?id=2173]]\n\n!Features\n*constantly open http connection\n*server push\n\n!Pros\n*low latency\n*event-based server push\n\n!Cons\n*client 2 connection limit\n*server resources\n**migitate by reconnecting per message\n*pragmatically requires custom server component\n**[[CometD|http://www.cometd.com/]]\n**[[LightStreamer|http://www.lightstreamer.com/]]\n**[[PHP Cometd implementation|http://www.phpclasses.org/blog/post/58-Responsive-AJAX-applications-with-COMET.html]]\n\n!Target\n*chat\n*realtime event monitoring\n\n!Code\n*see [[Ajax Patterns|http://ajaxpatterns.org/HTTP_Streaming]]\n\n
!!!Get this presentation at: http://www.ashleyit.com/ajax/transports.htm\n\n![[Brent Ashley|http://www.ashleyit.com]]\n*consultant, scripting specialist\n*long history promoting web remoting\n\n!Overview\nThe universal acceptance of the Ajax meme only became possible after more than 7 years of evolution and convergence of tools and techniques. Much of the evolution surrounded the transport layer, and there's still some change to come. I'm going to help you understand the issues that have driven the evolution so far and prepare you for future directions.\n\n!Agenda\n*History\n**how browsers and web apps have evolved\n**how and why different background transports have been tried along the way\n**how Ajax came to be the solution that stuck\n*Transport Layer\n**what challenges you need to understand when choosing a transport\n**What transports are available\n***How they work\n***Pros, Cons\n***Examples and code\n**Simple multi-transport app\n*Where to from here?\n**Now\n**Future\n\n
!Community Collaboration\n*microsoft.public.scripting.remote and other newsgroups\n*geeky sites then later blogs\n\n!Frameset\n*wrap app in frameset\n**scripted communication between frames\n\n![[IFrame]] \n*[[JSRS|http://www.ashleyit.com/rs/jsrs/test.htm]] (2000) \n**Cross-browser\n**multiple server environments\n*[[Eric Costello's Apple article|http://developer.apple.com/internet/webcontent/iframe.html]]\n\n![[Img Cookie]] \n*[[DepressedPress - GIF as Pipe|http://www.depressedpress.com/Content/Development/JavaScript/Articles/GIFAsPipe/Index.cfm]]\n*[[RSLite|http://www.ashleyit.com/rs/rslite/]] (2001)\n\n![[On-Demand Javascript]] \n*[[DotVoid|http://dotvoid.com/view.php?id=13]] (2002) Danne Lundqvist\n\n!HTTP Streaming\n*[[KnowNow|http://www.knownow.com/]] (2000) - prototype later [[open-sourced as mod-pubsub|http://www.scottandrew.com/blog/archives/2002/11/knownow_does_open_so.html]]\n**custom server side, javascript microserver on client\n**publish/subscribe event routing
!References\n[[EggHeadCafe Article|http://www.eggheadcafe.com/articles/20010828.asp]] : [[RSLite|http://www.ashleyit.com/rs/rslite/]]\n\n!Features\n*create an img object, set its url\n*server sends cookie, empty image\n\n!Pros\n*lightweight\n*really really extra wide compatibility\n\n!Cons\n*limited data due to GET and cookie limits \n\n!Code\n{{{\nfunction doIMGCookie( url ){\n var img = new Image();\n document.cookie = \n 'IMGCookie=x; expires=Fri, 31 Dec 1999 23:59:59 GMT;';\n img.src = url;\n window.setTimeout( "callbackCookie();", 1000 );\n}\n \nfunction callbackCookie(){ \n var response = null;\n var aCookie = document.cookie.split("; ");\n for (var i=0; i < aCookie.length; i++){\n var aCrumb = aCookie[i].split("=");\n if (aCrumb[0] == 'IMGCookie'){\n response = unescape(aCrumb[1]).replace(/\s+/g,' ');\n } \n }\n if ( response != null ){\n processResponse( response );\n } else {\n alert( 'cookie not set' );\n }\n}\n}}}\n\n\n
!References\n[[James Burke's original blog entry|http://tagneto.blogspot.com/2006/06/cross-domain-frame-communication-with.html]]\n\n!Features\n*modifies "anchor" portion of url of an iframe to communicate with its parent. \n\n!Pros\n*lightweight\n*secure\n*wide compatibility\n*implemented by Dojo library\n\n!Cons\n*based on an anomaly that isn't defined by a specification\n\n!Code\n[[See example from James|http://www.tagneto.org/blogcode/xframe/ui2.html]]\n\n
!References\n[[WWW2007 Paper|http://www2007.org/program/paper.php?id=801]]\n[[CrossSafe|http://xucia.com/#CrossSafe]]\n[[Google GData|http://code.google.com/apis/gdata/overview.html]]\n\n!Features\n* uses javascript closures and hidden iframes with modified domain identifiers to create secure communication channel between iframes from different sources.\n\n!Pros\n*secure\n*wide compatibility\n\n!Cons\n*unknown code ownership issues - Microsoft-sponsored research with no declared IP intentions.\n\n!Code\nsee [[CrossSafe|http://xucia.com/#CrossSafe]] implementation\n
!References\n[[Douglas Crockford's Proposal|http://json.org/JSONRequest.html]]\npartially implemented by [[CrossSafe|http://xucia.com/#CrossSafe]]\nCollin Jackson's [[Firefox Extension|http://crypto.stanford.edu/jsonrequest/]]\n!Features\n*Newly proposed browser builtin object\n**uses HTTP\n**reduced headers, no cookies\n**excess requests queued\n**must be JSON\n**Duplex connections accomodated\n**returns Request id\n\n!Pros\n*exempt from Same Origin restriction\n*less overhead (headers, cookies)\n*builtin attack throttles with random delay\n*duplex allows server event push\n*request ID solves sequencing\n\n!Cons\n*I didn't think of it\n*JSON only\n*duplex can use both connections depending on implementation\n**stretch RFC's [["should"|http://www.w3.org/Protocols/rfc2616/rfc2616-sec8.html#sec8.1.4]] to allow for more connections?\n\n!Code\n{{{\nrequestNumber = JSONRequest(\n "https://json.weather.yahoo.com/request", \n {\n user: "doctoravatar@yahoo.com",\n t: "vlIj",\n zip: 94089, \n forecast: 7\n }, \n function (requestNumber, value, exception) {\n if (value) {\n processWeather(value);\n } else {\n processError(exception);\n }\n }\n); \n}}}\n
!~TiddlyWiki\nJeremy Ruston created the original [[TiddlyWiki|http://www.tiddlywiki.com]] reusable non-linear personal web notebook. \nThe particular variant used in this presentation was derived from Nathan Bowers' [[GTDTiddlyWiki|http://shared.snapgrid.com/gtd_tiddlywiki.html]] because it looks nice.\n\n[[Harry Fuecks|http://www.sitepoint.com/articlelist/210]] provided helpful critical review, advice and links.\n\n----\n\n^^ MainMenu : SiteTitle : AdvancedOptions ^^
[[XHR]] : [[IFrame]] : [[Img Cookie]] : [[On-Demand Javascript]] : [[Flash]] : [[HTTP Streaming (Comet)]] : [[DOM-Load-And-Save]] : [[JSONRequest]] : [[Fragment Identifier]] : [[Subspace]] : [[Purple Include]]\n\n
!References\n[[Purple Include home|http://blueoxen.net/c/purple/purple-include/]]\n\n!Features\n* an abstraction on top of XHR\n* allows inclusion of parts of other pages in your web page\n* uses xpath syntax to select content from another page\n\n!Pros\n* simple\n* flexible\n\n!Cons\n* need proxy for cross-site transclusions\n\n!Code\n[[Purple Include Examples|http://blueoxen.net/c/purple/purple-include/tests/examples.html]]\n\n
!Naming\n*Many ways to skin this cat, it ain't just an acronym any more.\n**encodings, for instance - JSON, formatted HTML, text\n**AJAX, AJAH, AHAH, AFLAX etc are simply implementations of the Ajax stack. \n\n!Simple multi transport example application\n*Yet another [[Ajax Buzzword Bingo|http://www.ashleyit.com/ajax/bingo.htm]]
''Netscape and IE Versions 2.x to 4.x (~1998)''\n>"Dark Days of DHTML" - [[Dan Webb|http://www.danwebb.net/]]\n!Dynamic content\n*Initially very rudimentary scriptability\n**form elements - validation, manipulation\n**document.write() \n**images, mouseovers\n*~JavaScript, ~JScript\n**specifications in flux - 1.0, 1.1, 1.2, 1.3\n*DOM evolving\n**e.g. no document.images[] in ~IE3\n**Events: NS - capture; IE - bubbling; (Moz/~NS6 - listeners)\n*DHTML - Layers and Divs\n**src attribute\n**~Post-Render manipulation\n***animation\n\n!Developer sanity\n*A scarce commodity - [[Ode to Netscape 4.x|http://www.scottandrew.com/ns42002/]] [[haunting, ranting|http://jszen.blogspot.com/2005/09/ghost-of-ns4.html]]\n*improved somewhat by ~Cross-Browser Compatibility Libraries\n**[[DynAPI|http://dynapi.sourceforge.net/]], [[cross-browser.com|http://www.cross-browser.com/]], [[Dithered 1k DHTML API|http://dithered.chadlindstrom.ca/javascript/1kdhtml/index.html]]\n**equalization wrappers, often lowest common denominator\n\n!Bottom Line\n*Whizz bang presentation workable though often painful\n*notta lotta page-level application or data interaction
[[Introduction]] [[- Pre-Ajax Web Apps]] [[Transport Layer]] [[- Transports in Detail]] [[- Challenges]] [[- All Together Now]] [[Onward And Upward]]\n[[Credits]]\n
!Implementation in the browser\n*~ScottAndrew on [[ReadyState|http://www.scottandrew.com/blog/archives/2002/12/readystate.html]]\n*[[ActiveX restrictions in IE security patches|http://www.phpclasses.org/blog/post/51-PHPClasses-20-Beta-AJAX-XMLHttpRequest-x-IFrame.html]]\n*[[Ajax on Mobile Devices|http://linux.sys-con.com/read/167026.htm]]\n\n!Same Origin restriction\n*[[cross-site scripting|http://en.wikipedia.org/wiki/Cross-site_scripting]]\n*cookies vulnerable\n*inhibits direct mashups\n\n!Client connection limit\n*concurrent calls ([[RFC 2616-8.1.4|http://www.w3.org/Protocols/rfc2616/rfc2616-sec8.html#sec8.1.4]])\n**streaming\n\n!Overhead\n*HTTP headers\n*[[XML vs JSON|http://www.developer.com/lang/jscript/article.php/3596836]] vs HTML vs Delimited\n\n!Fault Tolerance\n*Harry Fuecks on [[Network Reliability|http://ajaxblog.com/archives/2005/06/01/async-requests-over-an-unreliable-network]]\nand [[Latency and Sequencing (AJAX@localhost)|http://www.sitepoint.com/blogs/2006/02/10/ajaxlocalhost]]\n\n!Performance\n*[[XMLHttp vs Iframes|http://me.eae.net/archive/2005/04/02/xml-http-performance-and-caching/]]\n\n!Async programming model\n*[[Approximating Sync with continuations|http://www.sitepoint.com/blogs/2006/09/12/eliminating-async-javascript-callbacks-by-preprocessing/]]\n\n!Security vs Scalability\n*[[Shaping the Future of Secure Ajax Mashups|http://www-128.ibm.com/developerworks/library/x-securemashups/]]
!References\n[[MSDN|http://msdn.microsoft.com/workshop/author/dhtml/reference/objects/obj_xmlhttprequest.asp]] : [[Mozilla|http://developer.mozilla.org/en/docs/XMLHttpRequest]] : [[W3C Draft Spec | http://www.w3.org/TR/XMLHttpRequest/]]\n\n[[TwinHelix|http://www.twinhelix.com/javascript/htmlhttprequest/]] (~HTMLHTTPRequest work-alike object with fallback to Iframe) \n\n[[Sergey Ilinsky's cross-browser XHR object|http://www.ilinsky.com/articles/XMLHttpRequest/]]\n\n!Features\n*object available in IE/Mozilla/Opera/Safari...\n*Sync and Async\n*POST and GET\n\n!Pros\n*It's the X, don't you know\n*[[W3C draft spec|http://www.w3.org/TR/XMLHttpRequest/]]\n**[[Ian Hickson's cross-domain proposal|http://lists.w3.org/Archives/Public/public-webapi/2006Apr/0214.html]]\n*not limited to XML\n\n!Cons\n*Same Origin\n*no support by older or fringe browsers\n*in IE, ~ActiveX control is sometimes blocked by security settings\n**not in ~IE7 with native browser object\n*[[Alex Bosworth - Rocky Shoals of Ajax Development|http://www.sourcelabs.com/blogs/ajb/2006/04/rocky_shoals_of_ajax_developme.html]]\n\n!Caveats\n*~IE7 XHR ~ActiveX bug - [[make sure you use native|http://www.ashleyit.com/blogs/brentashley/2006/06/05/ie7-make-sure-you-invoke-native-xmlhttprequest-object/]]\n*~IE7 ~XMLHttpRequest doesn't behave like a native object with expandos and prototype \n\n!Code\n{{{\n function createXMLHttpRequest() {\n try{ return new XMLHttpRequest(); } \n catch(e) {}\n try{ return new ActiveXObject("Msxml2.XMLHTTP"); } \n catch (e) {}\n try{ return new ActiveXObject("Microsoft.XMLHTTP"); } \n catch (e) {}\n alert('Could not create XHR!');\n }\n \n function doXHRSync( url ){\n var xhr = createXMLHttpRequest();\n xhr.open("GET", url, false);\n xhr.send(null);\n processResponse( xhr.responseText );\n }\n\n function doXHRAsync( url ){\n var xhr = createXMLHttpRequest();\n xhr.onreadystatechange = function() {\n if( xhr.readyState == 4 ){\n processResponse( xhr.responseText );\n }\n }\n xhr.open("GET", url, true);\n xhr.send(null);\n }\n}}}\n
!Status Quo\n*XHR for most things\n**add fault tolerance improvements\n**[[Sergey Ilinsky's cross-browser XHR|http://www.ilinsky.com/articles/XMLHttpRequest/]]\n\n!JSONRequest\n*Could become preferred over XHR (assuming browsers implement it)\n**no cookie vulnerabilities\n**cross-site mashup support\n**request id\n**streaming support\n\n!Exciting Developments\n[[JSONRequest Firefox Extension|http://crypto.stanford.edu/jsonrequest/]]\n[[CrossSafe|http://xucia.com/#CrossSafe]]\n[[Google GData|http://code.google.com/apis/gdata/overview.html]]\n\n!Discussion points\n[[Douglas Crockford on Mashups|http://ajaxian.com/archives/gears-and-the-mashup-problem]]\n[[AdSafe.org|http://www.adsafe.org/]]\n\n