1. AJAX
Ajax-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 applications
Why 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 fetching
Why 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 validation
Ajax uses

9. • Windows Live Mail
• Google
-Google mail
-Google maps
-Google Suggests
• Yahoo! Flickr
• Meebo
Who 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 end
Google 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
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

13. 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

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 panel
Google maps

16. • Google Maps is probably the best-known Ajax
application. Functionally, it offers some great advances
over conventional map websites
Google 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
environments
Ajax 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 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 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 actions
Ajax 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
pain
Ajax 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