Post on 09-Dec-2014
description
transcript
AJAXAjax-based Applications
Cancel Alexandru 4b
Gavrilescu Andrei 3b
What is Ajax?
• 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.
Classic model vs AJAX
Classic model vs AJAX
Why Ajax?
• Faster web actions• Dynamic content• Less (or no) page refreshes• Reduce network traffic• Decrease server-side bandwidth usage• Web apps that rival installed GUI applications
Why Ajax?
• 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?
• 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 fetching
Ajax uses
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 validation
Who uses AJAX?
• Windows Live Mail • Google
-Google mail
-Google maps
-Google Suggests• Yahoo! Flickr• Meebo
Google maps
Google maps
• 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 end
Google maps-server communication
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
tile's 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
Searching• you can't '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 frame's _load() function. This saves the outer frame from having to determine when the IFrame is done loading.
Google maps-server communication
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
• 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 panel
Google maps Conclusion
• Google Maps is probably the best-known Ajax application. Functionally, it offers some great advances over conventional map websites
Ajax on mobile devices
Ajax on mobile devices
• 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 environments
Ajax on mobile devices
• 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
The following browsers are known to support AJAX to some 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 Disadvantages?
• Fetched content does not register with browser history
• Search engines may not be able to index all pages
• Inaccurate Back & Forward button actions
Ajax Disadvantages?
• 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 pain
Conclusion
• 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.
Questions?
The end
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