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