Published on

Published in: Technology
  • 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

No notes for slide


  1. 1. AJAXAjax-based Applications Cancel Alexandru 4b Gavrilescu Andrei 3b
  2. 2. • AJAX = Asynchronous JavaScript and XML.• AJAX is not a new programming language, but a new way to use existing standards.• AJAX is a technique of exchanging data with a server, and update parts of a web page - without reloading the whole page.What is Ajax?
  3. 3. Classic model vs AJAX
  4. 4. Classic model vs AJAX
  5. 5. • Faster web actions• Dynamic content• Less (or no) page refreshes• Reduce network traffic• Decrease server-side bandwidth usage• Web apps that rival installed GUI applicationsWhy Ajax?
  6. 6. • Intuitive and natural user interaction -No clicking required -Mouse movement is sufficient to trigger event• “Partial screen update” replaces the “click, wait, and refresh” user interaction model -Only user interface elements that contain new information are updated (fast response) -The rest of the user interface ramains displayed without interruption (no loss of operational context)Why Ajax?
  7. 7. • Data driven (as oposed to page-driven) -UI is handled in the client while server provides data• Asynchronous communication replaces “synchronous request/response model” -A user can continue to use the application while the client program requests information from the server in the background -Separation of displaying from data fetchingWhy Ajax?
  8. 8. Typical use cases for Ajax would be:• situations where only parts of a page needs to be updated in general• use ajax to speed things up, not to slow things down!• form submissions• show and hide stuff• image slide shows• Client side input validationAjax uses
  9. 9. • Windows Live Mail• Google -Google mail -Google maps -Google Suggests• Yahoo! Flickr• MeeboWho uses AJAX?
  10. 10. Google maps
  11. 11. • The map is broken up into a grid of 256x256 images (something like an old tile-based scrolling console game)• These images are absolutely positioned - and the infinite scrolling effect is achieved by picking up tiles that are off- screen on one end and placing them down on the other endGoogle maps
  12. 12. Getting the images• each tile represents a known area specified in longitude and latitude, at a given zoom level• getting map images - all you have to do is set an image tiles URL http://mt.google.com/mt?v=.1&x={x tile index}&{y tile index}=2&zoom={zoom level}• when a user moves or "drags" a map on Google, new tiles are loaded just beyond the visible edges of the screen.Google maps-server communication
  13. 13. Searching• you cant submit the entire page, because that would destroy your map and other context• solution is to submit a hidden IFrame, then gather the search results from it (it also preserves browser history)• The result is loaded into the hidden IFrame which, when loaded, will sent a XML back up to the outer frames _load() function. This saves the outer frame from having to determine when the IFrame is done loading.Google maps-server communication
  14. 14. XML response sample<?xml version="1.0"?><page><title>atlanta</title><query>atlanta</query><center lat="33.748889" lng="-84.388056"/><span lat="0.089988" lng="0.108228"/><overlay panelStyle="/mapfiles/geocodepanel.xsl"><location infoStyle="/mapfiles/geocodeinfo.xsl" id="A"><point lat="33.748889" lng="-84.388056"/><icon class="noicon"/><info><title xml:space="preserve"></title><address><line>Atlanta, GA</line></address></info></location></overlay></page>Google maps-server communication
  15. 15. • The JavaScript then uses the XSLTProcessor component to apply an XSLT to the result XML( done on the client)• This generates the HTML which is then shown in the right panelGoogle maps
  16. 16. • Google Maps is probably the best-known Ajax application. Functionally, it offers some great advances over conventional map websitesGoogle maps Conclusion
  17. 17. Ajax on mobile devices
  18. 18. • only a subset of mobile devices can fully use Ajax-powered websites • most websites are not optimized for mobile devices • Ajax is an attractive way to develop applications for bandwidth- constrained devices and environmentsAjax on mobile devices
  19. 19. • it can help address battery, bandwidth, latency and smooth multimedia issues • sites such as Google and FaceBook have customized the HTML sent to mobile devices to better address the characteristics of these devices.Ajax on mobile devices
  20. 20. The following browsers are known to support AJAX tosome degree:• Opera Mobile (>= 8.x, not Opera Mini)• Internet Explorer Mobile (WM 5.0/2003)• S60 3rd edition (WebKit/KHTML core)• Minimo (Gecko-based)• OpenWave (>=Mercury)• NetFront (>=3.4)• Safari Mobile (iPhone)Ajax on mobile devices
  21. 21. • Fetched content does not register with browser history• Search engines may not be able to index all pages• Inaccurate Back & Forward button actionsAjax Disadvantages?
  22. 22. • JavaScript can be easily disabled from client side• JavaScript may tax older machines CPU• May be disabled (for security reasons) or not available on some browsers• Cross Browser Issues can be a painAjax Disadvantages?
  23. 23. • Very powerfull when used appropriately• It’s a method not a necessity• Do not rely on it if possible.Have an alternate if it fails.Conclusion
  24. 24. Questions?
  25. 25. Sources:• http://en.wikipedia.org/wiki/Ajax_(programming)• http://www.adaptivepath.com/ideas/ajax-new-approach-web- applications• http://www.openajax.org/whitepapers/Introduction%20to%20Mobile %20Ajax• http://web.archive.org/web/20050331002145/jgwebber.blogspot.com/ 2005/02/mapping-google.html%20for%20Developers.php The end