Your SlideShare is downloading. ×
0
Ajax tutorial
Ajax tutorial
Ajax tutorial
Ajax tutorial
Ajax tutorial
Ajax tutorial
Ajax tutorial
Ajax tutorial
Ajax tutorial
Ajax tutorial
Ajax tutorial
Ajax tutorial
Ajax tutorial
Ajax tutorial
Ajax tutorial
Ajax tutorial
Ajax tutorial
Ajax tutorial
Ajax tutorial
Ajax tutorial
Ajax tutorial
Ajax tutorial
Ajax tutorial
Ajax tutorial
Ajax tutorial
Ajax tutorial
Ajax tutorial
Ajax tutorial
Ajax tutorial
Ajax tutorial
Ajax tutorial
Ajax tutorial
Ajax tutorial
Ajax tutorial
Ajax tutorial
Ajax tutorial
Ajax tutorial
Ajax tutorial
Ajax tutorial
Ajax tutorial
Ajax tutorial
Ajax tutorial
Ajax tutorial
Ajax tutorial
Ajax tutorial
Ajax tutorial
Ajax tutorial
Ajax tutorial
Ajax tutorial
Ajax tutorial
Ajax tutorial
Ajax tutorial
Ajax tutorial
Ajax tutorial
Ajax tutorial
Ajax tutorial
Ajax tutorial
Ajax tutorial
Ajax tutorial
Ajax tutorial
Ajax tutorial
Ajax tutorial
Ajax tutorial
Ajax tutorial
Ajax tutorial
Ajax tutorial
Ajax tutorial
Ajax tutorial
Ajax tutorial
Ajax tutorial
Ajax tutorial
Ajax tutorial
Ajax tutorial
Ajax tutorial
Ajax tutorial
Ajax tutorial
Ajax tutorial
Ajax tutorial
Ajax tutorial
Ajax tutorial
Ajax tutorial
Ajax tutorial
Ajax tutorial
Ajax tutorial
Ajax tutorial
Ajax tutorial
Ajax tutorial
Ajax tutorial
Ajax tutorial
Ajax tutorial
Ajax tutorial
Ajax tutorial
Ajax tutorial
Ajax tutorial
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Ajax tutorial

880

Published on

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
880
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
15
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. ion ’s n an d D AjaxBe Tutorial ajaxians@ajaxian.com
  • 2. Ben Galbraith Kevin Lynch Chief Software Architect Dion AlmaerCo-founder, Ajaxian.com Adobe Co-founder, Ajaxian.comIndependent Consultant Google Shill Conservative Liberal
  • 3. Ajax: A New Approach to Web Applicationsby Jesse James Garrett February 18, 2005 “Google Suggest and Google Maps are two examples of a new approach to web applications that we at Adaptive Path have been calling Ajax. The name is shorthand for Asynchronous JavaScript + XML, and it represents a fundamental shift in what’s possible on the Web.”
  • 4. Ajax: A New Approach to Web Applicationsby Jesse James Garrett February 18, 2005 “Google Suggest and Google Maps are two examples of a new approach to web applications that we at Adaptive Path have been calling Ajax. The name is shorthand for Asynchronous JavaScript + XML, and it represents a fundamental shift in what’s possible on the Web.”
  • 5. Ajax: A New Approach to Web Applicationsby Jesse James Garrett February 18, 2005 “Google Suggest and Google Maps are two examples of a new approach to web applications that we at Adaptive Path have been calling Ajax. The name is shorthand for Asynchronous JavaScript + XML, and it represents a fundamental shift in what’s possible on the Web.”
  • 6. Ajax: A New Approach to Web Applicationsby Jesse James Garrett February 18, 2005
  • 7. Demo
  • 8. Ajax == DHTML• Key Ajax ingredient: • XMLHttpRequest (a.k.a. XMLHTTP) • Introduced by MS in 1997 • Copied by Mozilla 1.0 in 2002• innerHTML helps a great deal • DOM API snobs notwithstanding
  • 9. XMLHttpRequest Method Descriptionopen("method", "URL"[, asyncFlag[, "userName"[, "password"]]]) Setup the request (note the asyncFlag parameter) send(content) Send the request; “content” is request body (i.e. POST data) abort() Stop a request in process getAllResponseHeaders() Return a hash of header/value pairs getResponseHeader(”header”) Retrieve a response header value setRequestHeader(”label”, “value”) Set header (overriding browser headers allowed)
  • 10. XMLHttpRequest Property Descriptiononreadystatechange Reference to callback function Current state of XHR; one of: 0 = uninitialized 1 = loading readyState 2 = loaded 3 = interactive 4= complete responseText Text value of response body responseXML DOM tree of response body status Numeric status code (e.g., 200, 404) statusText Text status message corresponding to status code
  • 11. Three Main Ajaxian Architectures Return HTML Return Data Return JavaScript (responseText +(JSON / XML) (eval) innerHTML)
  • 12. The Ajax Innovators
  • 13. The Ajax Innovators
  • 14. The Ajax Innovators
  • 15. The Ajax Innovators
  • 16. Ajax is the victory ofthe pragmatists over the purists* * they want a rematch
  • 17. Ajax is about morethan sending data back and forth
  • 18. Ajax has become acatch-all buzzword for highly interactive websites (get over it)
  • 19. And the biggest surprise?
  • 20. JavaScript doesn’t suck, after all(but still don’t hire people who call it ‘Java’ on their CV)
  • 21. What about Flash? Is Flash Ajax?
  • 22. Web / Ajax Myths• Ajax is hard• Cross-browser differences are painful• Rich effects (and widgets) are best left to desktop applications• Off-line mode isn’t possible• Client-side validation is a pain
  • 23. dojo.gfx• A graphics library built on top of SVG and VML • Think portable SVG subset for IE• Like SVG, exposes a DOM for accessing and manipulating paths
  • 24. dojo.gfxvar node = document.createElement("div");document.body.appendChild(node);var surfaceWidth = 120;var surfaceHeight = 220;var surface = dojo.gfx.createSurface(node,surfaceWidth, surfaceHeight);var rect = { x: 100, y: 0, width: 100, height: 100 };var circle = { cx: 150, cy: 160, r: 50 };var group = surface.createGroup();var blueRect = group.createRect(rect) .setFill([0, 0, 255, 0.5]) .applyTransform(dojo.gfx.matrix.identity);var greenCircle = group.createCircle(circle) .setFill([0, 255, 0, 1.0]) .setStroke({color: "black", width: 4, cap: "butt", join: 4}) .applyTransform(dojo.gfx.matrix.identity);
  • 25. Ajax vs. Desktop Apps Ajax Advantages Desktop Advantages Ease of development model Much faster than JavaScript Ease of deployment Advanced graphical capabilities Mash-ups Tight integration with OS Separation of concerns Mature UI toolkitsHackability (e.g., Greasemonkey) Lack of hackability (e.g., security)
  • 26. Ajaxian Frameworks RAD High-level Tools (TIBCO, Backbase) Server-side Web Frameworks (ASP.NET, JSF + ICEfaces, Tapestry, Rails) UI Toolkits JavaScript (Dojo, Script.aculo.us, Moo.fx) Tools and Remoting Toolkits Utilities (Prototype, Dojo, Mochikit)XMLHttpRequest IFrame ...
  • 27. Ajaxian Frameworks RAD High-level Tools (TIBCO, Backbase) Server-side Web Frameworks (ASP.NET, JSF + ICEfaces, Tapestry, Rails) JavaScript Client-side Frameworks Tools (Effects + Remoting) and (Dojo, Prototype + Script.aculo.us, jQuery, Moo.fx + other Moo tools) UtilitiesXMLHttpRequest IFrame ...
  • 28. Ajaxian Client-side FrameworksPrototype Script.aculo.us Dojo DWR GWT jQuery moo tools Behaviour MochiKit Rico qooxdoo Yahoo! UI and a thousand other frameworks...
  • 29. Prototype• Prototype takes the pain out of common Ajax tasks • Tightly integrated with Ruby-on-Rails • Can be used with any backend• Now documented! (by the community)• Reclusive maintainer
  • 30. Prototype Contents• Prototype provides three levels of functionality: • Utility functions (globally scoped) • Custom objects • Extended properties on JavaScript native and hosted objects • Some folks consider this a no-no
  • 31. Basic Utilities• Prototype contains a number of tools that take the pain out of DOM manipulation: • $() function - shortcut for Document.getElementById • Can take multiple arguments and will return all matching elements • $F() function - returns the value of any form control • Pass it either the element id or the element object • $$() function - select elements based on CSS selectors • Pass it a CSS selector expression
  • 32. More Basic Utilities• Try.these() function - takes functions as arguments and returns the return value of the first function that doesn’t throw an exception. var returnValue; for (var i = 0; i < arguments.length; i++) { var lambda = arguments[i]; try { returnValue = lambda(); break; } catch (e) {} } return returnValue;
  • 33. Ajax Helpers• The Ajax object provides a number of helpful Ajax-related functionality• At its simplest, can be used to obtain XHR in a cross-browser way: var xhr = Ajax.getTransport()
  • 34. Ajax Helpers• Implementation of Ajax.getTransport(): var Ajax = { getTransport: function() { return Try.these( function() {return new XMLHttpRequest()}, function() {return new ActiveXObject(Msxml2.XMLHTTP)}, function() {return new ActiveXObject(Microsoft.XMLHTTP)} ) || false; } }
  • 35. Ajax Helpers• Provides higher-level functionality for performing Ajax operations: • Ajax.Request() object - takes a url and an “options” object as arguments • Performs an XHR request • Options argument specifies XHR configuration parameters and one or more callbacks
  • 36. Ajax Helpers• Options object: • Created using anonymous object creation syntax: { method: ‘get’, onComplete: callBackRef } • Supported properties: • method, asynchronous (true/false), parameters, postBody, requestHeaders (hash), onLoading, onLoaded, onInteractive, onComplete
  • 37. Ajax.Request Examplevar request = new Ajax.Request( ‘/someUrl’, { method: get, onComplete; myCallBack });function myCallBack(xhr) { $(‘someElementId’).innerHTML = xhr.responseText;}
  • 38. Ajax Helpers• Ajax.Updater() object - takes an element id, a url and an “options” object as arguments • Executes XHR and displays response as contents (innerHTML) of specified element • First argument can be an anonymous object with a success property and a failure property set to the ids of elements • Executes JavaScripts contained in response HTML
  • 39. Ajax.Updater Examplevar request = new Ajax.Updater( ‘someElementId’, ‘/someUrl’, { method: ‘get’, parameters: ‘value=foo’ });
  • 40. Ajax Helpers• Ajax.PeriodicalUpdater() object - takes an element id, a url and an “options” object as arguments • Same behavior as Ajax.Updater() but continuously performs request every 2 seconds • frequency property on options object controls the update frequency in seconds • stop() function halts the updating; start() function can restart it
  • 41. JavaScript Extensions• Number.toColorPart() function - converts decimal to hex• String.stripTags() function - removes any tags from the string• String.escapeHTML(), String.unescapeHTML()• Document.getElementsByClassName()
  • 42. Custom Objects• Element object makes manipulating elements much easier: • Element.show(), Element.hide(), Element.toggle() - take an unlimited number of element id or references • Show/hide based on CSS display attribute • Element.remove() - nukes element by id or reference from the DOM
  • 43. Custom Objects• Element.addClassName(), Element.hasClassName(), Element.removeClassName() - take two arguments: element id (or reference) and the class name• Field.clear() - takes an unlimited number of form element ids or references and clears their values• Field.present() - takes form elements ids or references; returns true if all are non-blank• Field.focus(), Field.select(), Field.activate() - takes an element id/ref, and focuses, selects, or focuses/selects
  • 44. Custom Objects• Form.serialize() - takes form element id/ ref; returns the HTTP query string• Form.getElements() - takes form element id/ref; returns array with all form elements• Form.disable(), Form.enable(), Form.focusFirstElement(), Form.reset() - take form element id/ref
  • 45. And Much More...• Prototype also contains utilities for inserting values into existing HTML content, event handling, JavaScript object definition, HTML element positioning, and more
  • 46. http://archive.dojotoolkit.org/nightly/core/tests/data/test_ManyStores.html
  • 47. http://app.lightstreamer.com/DojoDemo/
  • 48. Comet• Server-push for the Web • Not really, but a close approximation: a persistent XHR connection• Overkill for most “push” applications (i.e., just do polling)• Dojo’s Comet implementation is cometd • Jetty supports cometd
  • 49. DWR• DWR (Direct Web Remoting) provides tight integration with Java• DWR provides two major functions: • A dynamic Java→JavaScript proxy generation library (engine.js) • Utility library of miscellaneous JavaScript functionality (util.js)
  • 50. Using DWR• Step 1: Add the DWR servlet to your project• Step 2: Create a DWR configuration file• Step 3: Add DWR JavaScript to your HTML
  • 51. JavaScript Example<script type="text/javascript" src="/dwr/engine.js"></script><script type="text/javascript" src="/dwr/Validator.js"></script><script type=”text/javascript”> Validator.echoMethod(‘Hello, world!’, callback); function callback(data) { alert(data); }</script> public String echoMethod(String arg) { return arg; }
  • 52. Additional Features• Worried about latency? DWR allows you to batch opereations: • DWREngine.beginBatch() • DWREngine.endBatch()• Race conditions caused by asynchronicity got you down? • DWREngine.setOrdered(true) forces serial FIFO execution of DWR requests
  • 53. DWR “Reverse Ajax”WebContext wctx = WebContextFactory.get();String chatPage = wctx.getCurrentPage();// Find all the browser on window open on the chat page:Collection sessions = wctx.getScriptSessionsByPage(chatPage);// Use the Javascript Proxy API to empty the chatlog// <ul> element and re-fill it with new messagesUtil utilAll = new Util(sessions);utilAll.removeAllOptions("chatlog");utilAll.addOptions("chatlog", messages, "text");
  • 54. TIBCO GI:The I-Can’t-Believe-Its-Free Department
  • 55. Tools
  • 56. Off-line Two Years Ago
  • 57. Off-line One Year Ago
  • 58. Off-line Today• Google Gears• Firefox• Safari
  • 59. Offline Web via Open Web• Why just solve this problem for Google?• Why not solve it for others?• Solution: Make it open source with a liberal license • New BSD
  • 60. Why? “How often are you on a plane?”• Reliability • 1% of downtime can hurt at the wrong time• Performance • Local acceleration• Convenience • Not having to find a connection• You are offline more than you think!
  • 61. What is the philosophy?• One application, one URL• Seamless transitions between online and offline• Ability to use local data, even when online• Available to all users on all platforms• ... and a pony
  • 62. What is the philosophy?
  • 63. What is the philosophy? Do for offline what XMLHttpRequest did for web apps Ajax Libraries Gears LibrariesDojo, jQuery, Prototype, GWT Dojo Offline, GWT XMLHttpRequest Gears Open Web Open Web
  • 64. Gears Architecture• Read and write using local store• Changes are queued for later synchronization• Server communication is completely decoupled from UI actions, happens periodically whenever there is a connection
  • 65. What are the pieces?
  • 66. Database Embedded using SQLite Contributed Full Text Searchvar db = google.gears.factory.create(beta.database, 1.0);db.open(database-demo);db.execute(create table if not exists Demo (Phrase varchar(255),Timestamp int));db.execute(insert into Demo values (?, ?), [phrase, currTime]);var rs = db.execute(select * from Demo order by Timestamp desc);
  • 67. Mouse Moved Mouse Pressed Mouse Released Key PressedOperating System Key Released Event Queue User Code Painting, etc. “UI Thread”
  • 68. Mouse Moved Mouse Pressed Mouse Released Key PressedOperating System Key Released Event Queue Web JavaScript Browsing Browser
  • 69. Jakob NielsenNoted Usability ExpertProlific Author“The basic advice regarding response times has been aboutthe same for thirty years:“0.1 second is about the limit for having the user feelthat the system is reacting instantaneously, meaning that nospecial feedback is necessary except to display the result.“1.0 second is about the limit for the users flow ofthought to stay uninterrupted, even though the user willnotice the delay. Normally, no special feedback is necessaryduring delays of more than 0.1 but less than 1.0 second, butthe user does lose the feeling of operating directly on thedata.”
  • 70. 1 “UI Thread”User Interface 2 Background Thread
  • 71. 1 BrowserUser Interface X 2 Background Thread
  • 72. Firefox 3• Off-line support consists of: • Off-line cache • Off-line events • DOMStorage• Driving WHATWG spec.
  • 73. Firefox Off-line Details• <link rel="offline-resource"> to put resources into the browsers off-line cache• Entire applications can live in a JAR bundle, which can then be cached off-line• Off-line mode driven by browser-generated off-line / online events
  • 74.   function loaded() {      updateOnlineStatus("load", false);       document.body.addEventListener ("offline", function () { updateOnlineStatus("offline", true) }, false);      document.body.addEventListener("online", function () { updateOnlineStatus("online", true) }, false);      if (typeof globalStorage != "undefined") {        var storage = globalStorage[storageDomain];        if (storage && storage.taskStorage) {          taskStorage = storage.taskStorage ;        }      }      fetchList();  }  function fetchList() {      if (navigator.onLine ) {        httpRequest("GET", null, loadList);      } else {        loadList(4, 200, taskStorage);      }  }
  • 75. Off-line Flash is coming in 3Q ’07
  • 76. Ajax is slow
  • 77. Fast Ajax is Coming T amarin
  • 78. Fast Flash is here today
  • 79. Fancy-pants browser graphics are here today• SVG was widely anticipated but hasn’t made an impact• Canvas has started to appear • Google’s ExplorerCanvas project brings it to IE
  • 80. Sound! http://ajaxian.com/downloads/sound/<script type="text/javascript" src="soundmanager2.js"></script><script type="text/javascript"> soundManager.onload = function() { soundManager.createSound(circle, circleoflife.mp3); } function play() { soundManager.play(circle); } function pause() { soundManager.pause(circle); } function stop() { soundManager.stop(circle); }</script>
  • 81. Sound! http://ajaxian.com/downloads/sound/<script type="text/javascript" src="soundmanager2.js"></script><script type="text/javascript"> soundManager.onload = function() { soundManager.createSound(circle, circleoflife.mp3); } function play() { soundManager.play(circle); } function pause() { soundManager.pause(circle); } function stop() { soundManager.stop(circle); }</script>
  • 82. The Server-less Ajax Application• Amazon S3 provides storage• Amazon EC2 provides hosting• Local persistent storage is here • And more options around the corner...• Growing popularity of web services
  • 83. Imagine the Power of Client-side SQL!<script language="javascript"> // First we precompile the query language object with the schema... var queryLang = TrimPath.makeQueryLang(columnDefs); // Next, we do a SELECT statement. var statement = queryLang.parseSQL( "SELECT Customer.id, Customer.acctBalance, Invoice.total " + "FROM Customer, Invoice " + "WHERE Customer.id = Invoice.custId " + "ORDER BY Customer.id ASC"); // Here we run the query... var results = statement.filter(tableData); // Tada! Thats it -- the results now holds the joined, // filtered, and sorted output of our first query. // Also, we can convert the statement back to a SQL string... statement.toString() == "SELECT Customer.id, Customer.acctBalance, Invoice.total " + "FROM Customer, Invoice " + "WHERE Customer.id = Invoice.custId " + "ORDER BY Customer.id ASC"</script>
  • 84. We used to hate whenpeople asked us about accessibility...
  • 85. Enter Unobtrusive JavaScript Goals:Keep the HTML Increase Reusable clean Accessibility Components (JS out of it) (Degrade) (Tie with CSS)
  • 86. Unobtrusive Examples <abbr class="searchterm using:news" title="ajax"> Ajax </abbr> <ul class="feedbillboard access:randomly"> <li><a href="http://code.google.com/">Google Code</a> (<a href="http://code.google.com/feeds/updates.xml">RSS</a>)</li> <li><a href="http://ajaxian.com/">Ajaxian</a> (<a href="http://ajaxian.com/feed">RSS</a>)</li> <li><a href="http://almaer.com/blog">techno.blog(Dion)</a> (<a href="http://almaer.com/blog/index.xml">RSS</a>)</li> </ul>
  • 87. Creating an Unobtrusive Component <abbr class="searchterm using:news" title="ajax"> Ajax </abbr>Steps for creating nice unobtrusive code:1) What would look good in HTML (create the microformat)2) Create a JavaScript component that can create what you need3) Have a builder that bridges the HTML and the Components
  • 88. Step 1: Microformat <abbr class="searchterm using:blog withstyle:expanded orderby:relevance" title="search for ajax"> Ajax </abbr>• abbr plays nice in browsers• although a better title.You do the work in the JS• options to tweak the component directly from HTML
  • 89. Step 2: JavaScript Component var RelatedSearch = Class.create(); RelatedSearch.prototype = { initialize: function(e, id) { }, show: function() { } }• RelatedSearch encapsulates the popup• Multiple objects == multiple popups
  • 90. Step 3: Bridge Builder var RelatedSearchFinder = { find: function() { var count = 0; $$(.searchterm).each(function(node) { new RelatedSearch(node, ++count); }); } }; Event.observe(window, load, RelatedSearchFinder.find, false);• Selectors are the future (Dom.minimize!)• Also add functionality via: $(comments).addClassName(active)
  • 91. Accessibility• W3C Accessible Rich Internet Applications (WAI-ARIA) • IBM is leading the charge • A lot of their work is donated to the Dojo Toolkit • We overload HTML elements with meaning that readers and other devices don’t understand• WAI-ARIA defines Roles • A role helps define WHAT something is • <div role="wairole:slider"> • progressbar, slider, button, tree, textfield, checkbox, alert, and dialog• WAI-ARIA defines Stats • A state helps add meaning • <input type="text" name="email" aaa:required="true" /> • <div role="wairole:button" aaa:controls="price"> • <h2 id="price" aaa:sort="descending">price</h2>
  • 92. The Future?• Apollo as the Web+ Platform?• Off-line Ajax Abundant• Abundant custom rendering• Microformats?• Fast JavaScript interpreters• “Wow” versus the Web• HTML 5

×