14. Server Resource public class ServerResourceServlet extends HttpServlet { public void doGet(req, res) { String key = req.getParameter("key"); …… . if (key != null) { returnXML = new StringBuffer("<returnedData>"); returnXML.append(…); returnXML.append("</returnedData>"); // setup the response res.setContentType("text/xml"); // 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”} }
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("key"); dojo.io.bind ({ url: "/server/resource?key="+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=" + escape(key); new Ajax.Request (“/server/resource", { method: "get", 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
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
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.
42.
43.
Notas do Editor
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.
![What is AJAX? ,[object Object],[object Object],[object Object],[object Object],[object Object]](data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7)