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
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 “ A synchronous J avaScript A nd X ML” - PowerPoint PPT Presentation
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
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
Ajax Technology for the Web
Nic Shulver, FCET, Staffordshire University
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
Ajax Technology for the Web
Nic Shulver, FCET, Staffordshire University
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
Ajax Technology for the Web
Nic Shulver, FCET, Staffordshire University
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
Ajax Technology for the Web
Nic Shulver, FCET, Staffordshire University
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
Ajax Technology for the Web
Nic Shulver, FCET, Staffordshire University
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]
Ajax Technology for the Web
Nic Shulver, FCET, Staffordshire University
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 Technology for the Web
Nic Shulver, FCET, Staffordshire University
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
Ajax Technology for the Web
Nic Shulver, FCET, Staffordshire University
Example JavaScript Code
// initialises the link
nicnax_httpLink = new XMLHttpRequest();
// sets up the named routine to handle server response, when it arrives