Your SlideShare is downloading. ×
  • Like
Ajax
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Now you can save presentations on your phone or tablet

Available for both IPhone and Android

Text the download link to your phone

Standard text messaging rates apply
Published

 

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

Views

Total Views
242
On SlideShare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
9
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. AJAXAjax-based Applications Cancel Alexandru 4b Gavrilescu Andrei 3b
  • 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. Classic model vs AJAX
  • 4. Classic model vs AJAX
  • 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. • 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. • 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. 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. • Windows Live Mail• Google -Google mail -Google maps -Google Suggests• Yahoo! Flickr• MeeboWho uses AJAX?
  • 10. Google maps
  • 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. 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. 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. 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. • 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. • Google Maps is probably the best-known Ajax application. Functionally, it offers some great advances over conventional map websitesGoogle maps Conclusion
  • 17. Ajax on mobile devices
  • 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. • 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. 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. • 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. • 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. • 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. Questions?
  • 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