1. AJAX: The New Paradigm for Enterprise Web Applications Rizwan Ahmed

5. AJAX Model

6. Sequences of AJAX vs. Traditional web model

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. Callback Callback can be either discrete functions or anonymously declared. function callback (){ if (req.readyState==4){ if (req.status == 200){ modifyHTML (…); } } clear(); }

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

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