AJAX:  The New Paradigm for Enterprise Web Applications Rizwan Ahmed
What is AJAX? <ul><li>New approach to web interaction </li></ul><ul><li>Involves transmitting only small amounts of  infor...
Components of AJAX <ul><li>Asynchronous data retrieval using  XMLHttpRequest </li></ul><ul><li>Data interchange and manipu...
Characteristics of AJAX apps <ul><li>Continuous Feel </li></ul><ul><li>Real-Time updates </li></ul><ul><li>Established Sta...
AJAX Model
Sequences of AJAX vs. Traditional web model
Who is using AJAX? <ul><li>Yahoo! Web Search </li></ul>
Who is using AJAX? <ul><li>Google Maps </li></ul>
Who is using AJAX? <ul><li>Yahoo! News </li></ul>
Beneath the Hood  <ul><li>At the very core of any AJAX app: </li></ul><ul><li>Request variable in JavaScript instantiated ...
XMLHttpRequest <ul><li>A JavaScript class built into the browser that lets you make Asynchronous HTTP requests </li></ul><...
XMLHttpRequest Properties <ul><li>onreadystatechange – informs Ajax engine that response is ready for call back function <...
XMLHttpRequest Example <ul><li>var key = document.getElementById(&quot;key&quot;);  </li></ul><ul><li>var  url  = &quot;/s...
Server Resource public class ServerResourceServlet extends HttpServlet { public void doGet(req, res) { String key = req.ge...
Callback Callback can be either discrete functions or anonymously declared. function  callback (){  if (req.readyState==4)...
Mining the Response function  modifyHTML (){  var resp = req.responseText; var parser = new DOMParser(); var dom = parser....
Cross Browser Compatibility if (window.XMLHttpRequest) {  req = new XMLHttpRequest();  } else if (window.ActiveXObject) { ...
Data Vehicles ●  XML <returnedData> <zip>29203</zip> <city>Columbia</city> <state>SC</state> </returnedData> ●  Plain Text...
Data Vehicles (cont.) ●  JavaScript Object Notation (JSON) A lightweight data format based off the JavaScript syntax.  Def...
Some AJAX Libraries ●  DoJo Toolkit  (http://dojotoolkit.org/) ●  Rico Toolkit  (http://openrico.org/) ●  DWR Toolkit  (ht...
AJAX Libraries (cont.) DoJo Toolkit ●   DoJo is an open source DHTML toolkit written in JavaScript and include the AJAX  s...
AJAX Libraries (cont.) Rico Toolkit Rico is an open source toolkit allows for registering AJAX request handlers and HTML e...
AJAX Libraries (cont.) DWR Toolkit Direct Web Remoting is an open source AJAX framework for Java/JSP ●   DWRServlet  on th...
AJAX Libraries (cont.) Prototype Framework ●   Prototype is another open source framework that does AJAX requests with bro...
AJAX Libraries (cont.) Prototype Framework (cont.) ●   Prototype includes enhanced library support for JSON, DOM and other...
AJAX Libraries (cont.) AJAX using Custom Tags ●   Writing Ajaxian code over and over can be tedious and error prone ●   En...
AJAX Libraries (cont.) AjaxTags ●  AjaxTags is a Sourceforge project.  Allows use of AJAX with minimal effort ●  Consists ...
AJAX Design Patterns <ul><li>A. Predictive Fetch </li></ul><ul><li>Traditional web solutions – app has no idea what is to ...
AJAX Design Patterns <ul><li>A. Predictive Fetch (cont.) </li></ul><ul><li>Guess what the user is going to do next and pre...
AJAX Design Patterns (cont.) <ul><li>B. Submission Throttling </li></ul><ul><li>In AJAXian apps user interacts with the ap...
AJAX Design Patterns (cont.) <ul><li>B. Submission Throttling (cont.) </li></ul><ul><li>Using ST you buffer the data on th...
AJAX Design Patterns (cont.) <ul><li>B. Submission Throttling (cont.) </li></ul><ul><li>ST begins when application first l...
AJAX Design Patterns (cont.) <ul><li>C. Periodic Refresh </li></ul><ul><li>Process of checking for new server info at spec...
AJAX Design Patterns (cont.) <ul><li>C. Periodic Refresh (cont.) </li></ul><ul><li>Successfully used by ESPN to update its...
AJAX Design Patterns (cont.) <ul><li>C. Periodic Refresh (cont.) </li></ul><ul><li>The period between refreshes would idea...
AJAX Design Patterns (cont.) <ul><li>D. Multi-Stage Download </li></ul><ul><li>Lasting problems on the web - the speed at ...
AJAX Design Patterns (cont.) <ul><li>D. Multi-Stage Download (cont.) </li></ul><ul><li>AJAX pattern where only the basic f...
AJAX Design Patterns (cont.) <ul><li>D. Multi-Stage Download (cont.) </li></ul><ul><li>Page must work in its simplest form...
Request Management <ul><li>●  Issues related to the  frequency  and  timing  of requests </li></ul><ul><li>●  Major concer...
Request Management ●  Most browsers have inbuilt queuing mechanisms which is not robust ●  Works well when requests are fe...
Request Management (cont.) <ul><li>●  Implement a  Priority Queue </li></ul><ul><li>Priority based promotion. Values inser...
Recap <ul><li>What is AJAX </li></ul><ul><ul><ul><ul><li>Asynchronous data retrieval using XMLHttp </li></ul></ul></ul></u...
References <ul><li>http://ajaxpatterns.org </li></ul><ul><li>http://www.w3cschools.com/ajax </li></ul><ul><li>http://www.a...
Upcoming SlideShare
Loading in...5
×

Ajax

1,614

Published on

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,614
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
42
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • Assuming you have used a web browser from the last few years – IE, Firefox, Safari or Opera you’ve seen AJAX at work if you’ve ever used Google Maps, GMail or Yahoo! News. Spurred on by little known and lesser used technologies that had been included in web browsers for some time, the web in the last few years has taken a bold step forward, shattering the traditional usage model that required a full page to load every time new data or a new part of the application logic was accessed. Companies began to experiment with dynamic reloading of web pages transmitting only a small amount of data to the client resulting in faster and arguably better user experience.
  • Ajax

    1. 1. AJAX: The New Paradigm for Enterprise Web Applications Rizwan Ahmed
    2. 2. What is AJAX? <ul><li>New approach to web interaction </li></ul><ul><li>Involves transmitting only small amounts of information to and from server </li></ul><ul><li>Gives user the most responsive experience </li></ul><ul><li>Traditional web app model – browser initiates requests and processes HTML response </li></ul><ul><li>AJAX model provides an intermediate layer – AJAX Engine to handle this communication </li></ul>
    3. 3. Components of AJAX <ul><li>Asynchronous data retrieval using XMLHttpRequest </li></ul><ul><li>Data interchange and manipulation using XML , XPath and XSLT </li></ul><ul><li>Dynamic display and interaction using the D ocument O bject M odel </li></ul><ul><li>Standards based presentation using XHTML and CSS </li></ul><ul><li>JavaScript binding everything together </li></ul>
    4. 4. Characteristics of AJAX apps <ul><li>Continuous Feel </li></ul><ul><li>Real-Time updates </li></ul><ul><li>Established Standards Non proprietary </li></ul><ul><li>Language Neutrality XML declarative interface </li></ul><ul><li>Non Browser specific </li></ul>
    5. 5. AJAX Model
    6. 6. Sequences of AJAX vs. Traditional web model
    7. 7. Who is using AJAX? <ul><li>Yahoo! Web Search </li></ul>
    8. 8. Who is using AJAX? <ul><li>Google Maps </li></ul>
    9. 9. Who is using AJAX? <ul><li>Yahoo! News </li></ul>
    10. 10. Beneath the Hood <ul><li>At the very core of any AJAX app: </li></ul><ul><li>Request variable in JavaScript instantiated with one of the following methods: </li></ul><ul><li>ActiveXObject(“Microsoft.XMLHTTP”) for IE 6 browsers </li></ul><ul><li>XMLHttpRequest Object for all others </li></ul><ul><li>IE 7+ will have native XMLHttpRequest support </li></ul>
    11. 11. XMLHttpRequest <ul><li>A JavaScript class built into the browser that lets you make Asynchronous HTTP requests </li></ul><ul><li>Class is instantiated by custom JavaScript code triggered from HTML events </li></ul><ul><li>A Forward URL string representing the server resource is included with each call </li></ul><ul><li>A Call Back JavaScript function is invoked depending on the state of the HTTP Response </li></ul>
    12. 12. XMLHttpRequest Properties <ul><li>onreadystatechange – informs Ajax engine that response is ready for call back function </li></ul><ul><li>readyState – current state of the HTTP call </li></ul><ul><li>responseText – the text result of the request </li></ul><ul><li>responseXML – DOM XML object result of the request </li></ul><ul><li>status – HTTP status code of the response </li></ul><ul><li>statusText – HTTP status text </li></ul>
    13. 13. XMLHttpRequest Example <ul><li>var key = document.getElementById(&quot;key&quot;); </li></ul><ul><li>var url = &quot;/server/resource?key=&quot;+key.value; </li></ul><ul><li>if (window.XMLHttpRequest) { </li></ul><ul><li>req = new XMLHttpRequest(); </li></ul><ul><li>} </li></ul><ul><li>req.open(&quot;Get&quot;, url , true ); </li></ul><ul><li>req.onreadystatechange = callback ; </li></ul><ul><li>req.send(); </li></ul>
    14. 14. Server Resource public class ServerResourceServlet extends HttpServlet { public void doGet(req, res) { String key = req.getParameter(&quot;key&quot;); …… . if (key != null) { returnXML = new StringBuffer(&quot; <returnedData>&quot;); returnXML.append(…); returnXML.append(&quot; </returnedData>&quot;); // setup the response res.setContentType(&quot;text/xml&quot;); // write out the xml string res.getWriter().write(returnXML.toString()); } } }
    15. 15. Callback Callback can be either discrete functions or anonymously declared. function callback (){ if (req.readyState==4){ if (req.status == 200){ modifyHTML (…); } } clear(); }
    16. 16. Mining the Response function modifyHTML (){ var resp = req.responseText; var parser = new DOMParser(); var dom = parser.parseFromString(resp); var val = dom.getElementsByTagName(..); var elemId = document.getElementbyId(..); elemId.value = val[0].childNodes[0].nodeValue; ……… . }
    17. 17. Cross Browser Compatibility if (window.XMLHttpRequest) { req = new XMLHttpRequest(); } else if (window.ActiveXObject) { try { req = new ActiveXObject(Msxml2.XMLHTTP); } catch (Exception e) { req = new ActiveXObject(Microsoft.XMLHTTP); } }
    18. 18. Data Vehicles ● XML <returnedData> <zip>29203</zip> <city>Columbia</city> <state>SC</state> </returnedData> ● Plain Text (Custom formatted eg. CSV, HTML) returnedData;29203;Columbia;SC
    19. 19. Data Vehicles (cont.) ● JavaScript Object Notation (JSON) A lightweight data format based off the JavaScript syntax. Definitions can be included and parsed with JavaScript. {“returnedData”:{ “ zip”: “29203”, “ city”: “Columbia”, “ state”: “SC”} }
    20. 20. Some AJAX Libraries ● DoJo Toolkit (http://dojotoolkit.org/) ● Rico Toolkit (http://openrico.org/) ● DWR Toolkit (http://getahead.org/dwr/) ● Prototype (http://prototypejs.org) ● AjaxTags (http://ajaxtags.sourceforge.net)
    21. 21. AJAX Libraries (cont.) DoJo Toolkit ● DoJo is an open source DHTML toolkit written in JavaScript and include the AJAX specific libraries dojo.io; dojo.rpc; dojo.json var key = document.getElementById(&quot;key&quot;); dojo.io.bind ({ url: &quot;/server/resource?key=&quot;+key.value, load: function(type, data, evt) { callback(data); }, error: function(type, data, evt) { reportError(data); }, mimetype: “text/plain” });
    22. 22. AJAX Libraries (cont.) Rico Toolkit Rico is an open source toolkit allows for registering AJAX request handlers and HTML elements as AJAX response objects ● ajaxEngine.registerElement (‘rHdl’,’server url’) ajaxEngine.sendRequest (‘rHdl’,’key=‘+key.value) ● Server resource must respond with XML formatted document. Rico matches id attributes in the document with fields in the HTML form and populates it accordingly ● No callback functions are necessary
    23. 23. AJAX Libraries (cont.) DWR Toolkit Direct Web Remoting is an open source AJAX framework for Java/JSP ● DWRServlet on the server end runs the whole show. Instantiated during application load time ● On browser side a JavaScript wrapper library is created using Java’s Reflections API that mirror the server side classes ● An XML configuration file dwr.xml provides the plumbing that connects the server side classes with the JavaScript
    24. 24. AJAX Libraries (cont.) Prototype Framework ● Prototype is another open source framework that does AJAX requests with browser differences abstracted from user parameterString = “key=&quot; + escape(key); new Ajax.Request (“/server/resource&quot;, { method: &quot;get&quot;, parameters: parameterString, onSuccess: function(request) { var result = request.responseText; … .. }, onFailure: function(request) {…...} });
    25. 25. AJAX Libraries (cont.) Prototype Framework (cont.) ● Prototype includes enhanced library support for JSON, DOM and other utilities ● Prototype is largely used in conjunction with scriptaculous ● Scriptaculous toolkit provides easy to use, cross browser JS libraries. Includes animation framework, visual effects, drag and drop features and AJAX controls
    26. 26. AJAX Libraries (cont.) AJAX using Custom Tags ● Writing Ajaxian code over and over can be tedious and error prone ● Encapsulate the functionality into a custom JSP tag for easy reuse ● Using Tag Libraries will save time and enhance reusability and maintainability of the code ● Consists of a TLD and Tag Support class ● There are a number of 3 rd party Tags that encapsulate Ajaxian functionality
    27. 27. AJAX Libraries (cont.) AjaxTags ● AjaxTags is a Sourceforge project. Allows use of AJAX with minimal effort ● Consists of the following representative tags: Autocomplete – Displays list of entries that match text into the autocomplete field HTML Content Replace - Connects a content area to an HTML onclick event Portlet – Adds a portlet to a JSP page Select/Dropdown – Populates a select field based on selection in another select field
    28. 28. AJAX Design Patterns <ul><li>A. Predictive Fetch </li></ul><ul><li>Traditional web solutions – app has no idea what is to come next </li></ul><ul><li>Fetch on Demand – User through his actions requests data retrieval </li></ul><ul><li>Unfortunate side effect of forcing the start-and-stop model of user interaction upon the user </li></ul>
    29. 29. AJAX Design Patterns <ul><li>A. Predictive Fetch (cont.) </li></ul><ul><li>Guess what the user is going to do next and pre-fetch the appropriate data </li></ul><ul><li>Simple use cases where predicting user actions are easier </li></ul><ul><li>Anticipate and preload information to make app feel lighter and responsive </li></ul><ul><li>Must exercise “logical to assume” criterion </li></ul>
    30. 30. AJAX Design Patterns (cont.) <ul><li>B. Submission Throttling </li></ul><ul><li>In AJAXian apps user interacts with the app by sending async requests </li></ul><ul><li>The timing and frequency of sending requests is of paramount importance </li></ul><ul><li>One solution would be to send data to server each time a user action occurs </li></ul><ul><li>This generates a large number of requests in a short period of time </li></ul>
    31. 31. AJAX Design Patterns (cont.) <ul><li>B. Submission Throttling (cont.) </li></ul><ul><li>Using ST you buffer the data on the client and then send it at pre-determined intervals </li></ul><ul><li>Yahoo! and Google search does this </li></ul><ul><li>Wait for a certain amt of time and then sends all data in the text box </li></ul><ul><li>The delay from typing to sending has been fine tuned </li></ul>
    32. 32. AJAX Design Patterns (cont.) <ul><li>B. Submission Throttling (cont.) </li></ul><ul><li>ST begins when application first loads or a specific user action </li></ul><ul><li>Client side function is called to begin the buffering of data </li></ul><ul><li>Determination when, what and how much to send depends on use case </li></ul><ul><li>May want to send data when it reaches a particular size </li></ul>
    33. 33. AJAX Design Patterns (cont.) <ul><li>C. Periodic Refresh </li></ul><ul><li>Process of checking for new server info at specific intervals – polling </li></ul><ul><li>In its simplest form a loop can be established to run indefinitely </li></ul><ul><li>setInterval(callServer, REFRESH_PERIOD_MILLIS); </li></ul><ul><li>Periodic Refresh fakes a back channel situation forcing server data back to client </li></ul>
    34. 34. AJAX Design Patterns (cont.) <ul><li>C. Periodic Refresh (cont.) </li></ul><ul><li>Successfully used by ESPN to update its online scoreboards: </li></ul><ul><li>( sports.espn.go.com/nfl/scoreboard ) </li></ul>
    35. 35. AJAX Design Patterns (cont.) <ul><li>C. Periodic Refresh (cont.) </li></ul><ul><li>The period between refreshes would ideally be 0. Latency issues. </li></ul><ul><li>Entails significant resource cost. Ensure bandwidth and associated infrastructure. </li></ul><ul><li>Key design aim must be to increase the average refresh period and reduce content per refresh </li></ul>
    36. 36. AJAX Design Patterns (cont.) <ul><li>D. Multi-Stage Download </li></ul><ul><li>Lasting problems on the web - the speed at which pages download </li></ul><ul><li>Residential broadband has caused many sites to increase multimedia content (animation, pictures etc.) </li></ul><ul><li>Slower download times as everything is loaded in random order </li></ul>
    37. 37. AJAX Design Patterns (cont.) <ul><li>D. Multi-Stage Download (cont.) </li></ul><ul><li>AJAX pattern where only the basic functionality is loaded initially </li></ul><ul><li>The page then begins to download other components that should appear </li></ul><ul><li>Popularized by start.com </li></ul><ul><li>User driven activity determines content loading behind scenes </li></ul>
    38. 38. AJAX Design Patterns (cont.) <ul><li>D. Multi-Stage Download (cont.) </li></ul><ul><li>Page must work in its simplest form for non-AJAX browsers </li></ul><ul><li>Provide “graceful degradation” – those supporting AJAX technologies will get extensive interface while others get the bare bones </li></ul><ul><li>Important if you expect search engines to crawl through your web site </li></ul>
    39. 39. Request Management <ul><li>● Issues related to the frequency and timing of requests </li></ul><ul><li>● Major concern is the number of times that communication occurs between client and server </li></ul><ul><li>Server can get bogged down while trying to handle multiple user requests </li></ul><ul><li>Client can become unresponsive while waiting for server responses </li></ul>
    40. 40. Request Management ● Most browsers have inbuilt queuing mechanisms which is not robust ● Works well when requests are few and far in between ● In real world requests are being sent from various parts of the application at different times ● No control over when requests are sent or what order they should be sent
    41. 41. Request Management (cont.) <ul><li>● Implement a Priority Queue </li></ul><ul><li>Priority based promotion. Values inserted based on request priority. </li></ul><ul><li>Age based promotion. Requests bumped up the priority based on age. </li></ul><ul><li>RequestManager Object to handle XMLHttpRequest </li></ul>
    42. 42. Recap <ul><li>What is AJAX </li></ul><ul><ul><ul><ul><li>Asynchronous data retrieval using XMLHttp </li></ul></ul></ul></ul><ul><ul><ul><ul><li>Data interchange and manipulation using XML/XPath/XSLT </li></ul></ul></ul></ul><ul><ul><ul><ul><li>Dynamic display and interaction using DOM </li></ul></ul></ul></ul><ul><ul><ul><ul><li>Standards based presentation using XHTML and CSS </li></ul></ul></ul></ul><ul><ul><ul><ul><li>JavaScript binding everything together </li></ul></ul></ul></ul><ul><li>Characteristics of AJAX applications </li></ul><ul><ul><ul><ul><li>Continuous feel/Real Time Updates </li></ul></ul></ul></ul><ul><ul><ul><ul><li>Established Standards/Language neutrality </li></ul></ul></ul></ul><ul><ul><ul><ul><li>Dynamic display and interaction using DOM </li></ul></ul></ul></ul><ul><li>AJAX Libraries </li></ul><ul><li>AJAX Design Patterns </li></ul><ul><ul><ul><ul><li>Predictive Fetch </li></ul></ul></ul></ul><ul><ul><ul><ul><li>Submission Throttling </li></ul></ul></ul></ul><ul><ul><ul><ul><li>Periodic Refresh </li></ul></ul></ul></ul><ul><ul><ul><ul><li>Multi-Page Download </li></ul></ul></ul></ul>
    43. 43. References <ul><li>http://ajaxpatterns.org </li></ul><ul><li>http://www.w3cschools.com/ajax </li></ul><ul><li>http://www.adaptivepath.com/ideas/essays/archives/000385.php - Seminal Article on AJAX </li></ul><ul><li>Ajax on Java : Steven Douglas Olson </li></ul><ul><li>Professional AJAX : Zakas, McPeak, Fawcett </li></ul>
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×