Uploaded on


  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads


Total Views
On Slideshare
From Embeds
Number of Embeds



Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

    No notes for slide


  • 1. Intro to Ajax
  • 2. Background • AJAX / Ajax: Asynchronous Javascript and XML • Originally developed by Microsoft as an ActiveX control in IE5 (1999) • Became draft part of W3C in 2005 • Allows asynchronous calls from a page to the server without refreshing entire page
  • 3. Ajax* • Does not have to be Asynchronous • Does not have to use JavaScript • Does not have to use XML • Ajax applies to many techniques of the browser communicating with a server in the “background”
  • 4. browser javascript XMLHttpRequest server executes creates request.send() response callback
  • 5. Standard Request/Response request browser server pageA e ns po browser res pageB http://www.slideshare.net/iprof/01-ajax-intro-presentation
  • 6. Ajax Request/Response browser pageA request server divB response http://www.slideshare.net/iprof/01-ajax-intro-presentation With Ajax, you can send a request to the server and update a subset of the page you’re already on, without refreshing the entire page. In this case, the response only updates divB
  • 7. Pros • Rich user interfaces • Faster response times • Less bandwidth usage
  • 8. Cons • Lots of small, short lived requests • “back button” support doesn’t always work as expected • 508 Accessibility?
  • 9. Examples • Autocomplete • Periodic Updater • Inline Edit • In Place Submission • Drag and Drop Auto Complete - google suggest, google finance Periodic Updater - Gmail, google, http://ajaxify.com/run/time/ periodicRefresh/ Inline Edit - http://24ways.org/examples/edit-in-place-with- ajax/ Inline Submission - Star Rating: http://www.unessa.net/en/hoyci/ projects/yui-star-rating/ Drag and Drop iGoogle
  • 10. Ajax Frameworks • Prototype (Grails default) • jQuery • Dojo • Script.aculo.us (UI effects for prototype) • Ext
  • 11. Ajax in Grails • add <g:javascript library="prototype" /> to main.gsp • Built in tag libraries: • remoteLink • remoteFunction • remoteField • formRemote • submitToRemote
  • 12. http://grails.org/doc/1.1.x/ The user guide lists all the attributes and events that each tag library supports See the “Tags” section in the left hand frame
  • 13. remoteLink example <li><g:remoteLink action="updateStatus" update="status" id="${incidentInstance.id}" params="[status:'Resolved']">Resolved</g:remoteLink> </li>
  • 14. Periodic Update • Ajax.PeriodicalUpdater • Parameters • container to update • url • frequency • decay (from prototype docs) decay: This controls the rate at which the request interval grows when the response is unchanged. It is used as a multiplier on the current period (which starts at the original value of the frequency parameter). Every time a request returns an unchanged response text, the current period is multiplied by the decay. Therefore, the default value means regular requests (no change of interval). Values higher than one will yield growing intervals. Values below one are dangerous: the longer the response text stays the same, the more often you’ll check, until the interval is so short your browser is left with no other choice
  • 15. <div id="serverTimeTemplateUpdater"> <g:render template="updateTime"/> </div> <g:javascript> new Ajax.PeriodicalUpdater('serverTimeTemplateUpdater', '<g:createLink action="updateTimeTemplate"/>', {frequency: 3, maxFrequency: 20, decay: 2}); </g:javascript> // _updateTime.gsp (template) The current server time is: ${date} Div to update: serverTimeTemplateUpdater URL: /controller/updateTimeTemplate (<g:createLink action="updateTimeTemplate"/>) Frequency: 3 Decay: 2