1 / 16

Introduction

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”

lee-drake
Download Presentation

Introduction

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

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

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

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

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

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

  6. 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]

  7. Nic Shulver, FCET, Staffordshire University Client (Browser) Browser/user interaction HTTP Request Data: HTML, CSS, JS Server-side system Web Server Software Databases, data sources,other back-end processing 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

  8. 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 Client (Browser) Browser/user interaction JS Call DHTML Ajax intermediary (Javascript code) HTTP Request XML or JSON data Server-side system Web Server Software Databases, data sources,other back-end processing

  9. 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");

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

  11. Nic Shulver, FCET, Staffordshire University Example application

  12. Nic Shulver, FCET, Staffordshire University Example application

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

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

  15. Nic Shulver, FCET, Staffordshire University 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/394247First 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

  16. Nic Shulver, FCET, Staffordshire University 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

More Related