ajax technology for the web nic shulver, fcet, staffordshire university introduction what is it?...

Ajax Technology for the Web

Nic Shulver, FCET, Staffordshire University

Introduction What is it? Pros and Cons Why is it important? Traditional Client-Server The Ajax model of Client-Server Code examples Examples of live applications Critical appraisal



What is AJAX?

AJAX is an acronym that stands for “Asynchronous JavaScript And XML”

AJAX is a collection of technologiesNamed in 2005 and popularised by Google &cIt is based on XML data requests over HTTP

and “live updating” of the page through JavaScript programming and CSS

The asynchronous client-server communication idea has been around since the 1990's



Pros and Cons

Pros:JavaScript communicates asynchronously with

the server (non-blocking), giving a better user interface experience

Leads to “background” updates of dataEnables scripts to update small parts of a page

rather than the whole thingUses the JavaScript XMLHttpRequest object,

supported by all major browsers



Pros and Cons

Cons:

The XMLHttpRequest was initially developed by Microsoft, not standards organisations

AJAX is architecturally cross-platform but older MSIE (IE5-IE7) need non-standard coding

Although AJAX is now based on open standards, not all browsers implement these standards perfectly

Bookmarking and back button problems!

Businesses are wary of Javascript coding



Why is AJAX important?

It helps the developer minimise the number of new full page downloads

Can be faster, slicker and better than normal client-server page turnaround

Applications should end up being smaller due to less network traffic

Applications should run quicker and be easier to write – no more “stateless” page changes to deal with



Why is AJAX important?

“Much of the Web's innovation and evolution during the Web 2.0 era has relied upon and benefited immensely from the capabilities of an Ajax platform” [Wikipedia, AJAX]

“An Ajax application eliminates the start-stop-start-stop nature of interaction on the Web by introducing an intermediary — an Ajax engine — between the user and the server” [Adaptive Path, J.J.Garrett]



Traditional Client-Server

Client (browser) sends requests to server

Server uses whatever resources it needs to reply

The reply is a complete new Web page, replacing the old one

Browser/user interaction

Databases, data sources,other back-end processing

Web Server Software

HTTP Request Data: HTML, CSS, JS

Client (Browser)

Server-side system



Ajax model of server interaction

Client (browser) sends requests to the Ajax code

Ajax uses the XMLHttpRequest to invoke server code

Servers reply with data

Ajax code manipulates existing web page

Browser/user interaction

Databases, data sources,other back-end processing

Web Server Software

HTTP Request XML or JSON data

Client (Browser)

Server-side system

Ajax intermediary (Javascript code)

DHTMLJS Call



Example JavaScript Code

// initialises the link

nicnax_httpLink = new XMLHttpRequest();

// sets up the named routine to handle server response, when it arrives

nicnax_httpLink.onreadystatechange = nicnax_responseHandler;

// uses the script name to invoke server activity

nicnax_httpLink.open("POST", "test.php", true);

nicnax_httpLink.setRequestHeader("Content-Type","application/x-www-form-urlencoded;");

// this is an example parameter to send to the script test.php, in web-form style

nicnax_httpLink.send("moviestar=Halle Berry");



Examples of live applications

Google Maps is a good example of an AJAX application

Similar precursor frameworks have been used in the past – for example, Outlook Web Access

GMail is an AJAX applicationParts of Flickr are based on AJAX technologyNote that Java + XML, Java Applets + XML,

Flash + XML and lots of other technologies have many features in common with AJAX



Example application



Critical appraisal of Ajax

• Ajax is a Rich Internet Application platform

• There are many such platforms:– Java – Sun/Oracle

– Flash – Macromedia/Adobe, UI design

– SVG/SMIL – Scalable Vector Graphics with Synchronized Multimedia Integration Language (open standards)

– XUL – XML-based UI markup language/Mozilla

– XAML – Windows Presentation Framework



Critical appraisal of Ajax

• Ajax can be (and often is) used with Flash or SVG – complementary technologies

• Ajax does not need specific browser extensions, it's built into full-scale modern browsers [but may not be available on all phones]

• Trends in web application development are towards open standards and vendor neutrality, key for businesses

• Ajax has cross-browser support, unlike most rivals



Background Reading

• http://en.wikipedia.org/wiki/Ajax_(programming) Ajax programming from Wikipedia

• http://adaptivepath.com/ideas/essays/archives/000385.php Ajax: A new approach to Web Applications by Jesse James Garrett, February 2005

• http://web2.sys-con.com/node/394247 First AJAX SDK for Apple's iPhone, August 2007

• http://en.wikipedia.org/wiki/List_of_Ajax_frameworks Frameworks for Ajax development, Wikipedia

• http://www.xml.com/pub/a/2005/10/05/ajax-web-20-soa.html Is AJAX Here to Stay? By Jordan Frank October 2005



Examples of Ajax in Use

http://maps.google.co.uk/maps?f=q&source=s_q&hl=en&geocode=&q=Staffordshire+University&sll=0,0&sspn=0.001929,0.002175&ie=UTF8&ll=53.008509,-2.176795&spn=0.009283,0.017402&t=h&z=16&iwloc=C

Google Maps – Stoke, Staffordshire University

http://www.ajaxdaddy.com/Lots of demos with some code – uses Ajax libraries extensively

http://24ways.org/2005/edit-in-place-with-ajaxEdit-in-Place with Ajax

ajax technology for the web nic shulver, fcet, staffordshire university introduction what is it?...

Documents