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 technologies Named in 2005 and popularised by Google &c It 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 data Enables scripts to update small parts of a page rather than the whole thing Uses 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 RequestData: 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 RequestXML 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 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");

Ajax Technology for the Web Nic Shulver, FCET, Staffordshire University 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 application Parts of Flickr are based on AJAX technology Note that Java + XML, Java Applets + XML, Flash + XML and lots of other technologies have many features in common with AJAX

Ajax Technology for the Web Nic Shulver, FCET, Staffordshire University Example application

Ajax Technology for the Web Nic Shulver, FCET, Staffordshire University Example application

Ajax Technology for the Web Nic Shulver, FCET, Staffordshire University 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

Ajax Technology for the Web Nic Shulver, FCET, Staffordshire University 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

Ajax Technology for the Web Nic Shulver, FCET, Staffordshire University Background Reading Ajax programming from Wikipedia Ajax programming from Wikipedia php Ajax: A new approach to Web Applications by Jesse James Garrett, February php Ajax: A new approach to Web Applications by Jesse James Garrett, February First AJAX SDK for Apple's iPhone, August First AJAX SDK for Apple's iPhone, August Frameworks for Ajax development, Wikipedia Frameworks for Ajax development, Wikipedia soa.html Is AJAX Here to Stay? By Jordan Frank October soa.html Is AJAX Here to Stay? By Jordan Frank October 2005

Ajax Technology for the Web Nic Shulver, FCET, Staffordshire University Examples of Ajax in Use &q=Staffordshire+University&sll=0,0&sspn= , &ie=UTF8&ll= , &spn= , &t=h&z=16&iwloc=C Google Maps – Stoke, Staffordshire University Lots of demos with some code – uses Ajax libraries extensively Edit-in-Place with Ajax