1. A New Way To Web Applications Development Tin Htut Htut Naing Oo Myanmar Information Technology

2. Did you use following? Do you want to develop the Rich Internet Application (RIA) likes following ?

3. Agenda Classic Web Application Model What is a new way? What can we do with AJAX? What is AJAX? XMLHttpRequest Object Sample Application with J2EE Who’s Using AJAX ConclusionFAQ

4. Classic Web Application Model A classic web application model adopts –“Click, wait and refresh” user interaction paradigm –Synchronous “request/response” communication model

5. Classic Web Application Model Do not work well for some web applications. Real time validation. Loss of operation context during page refresh. Excessive server load and bandwidth consumption due to redundant page refreshes.

6. What is a new way? USING AJAX AT WEB APPLICATIONS. USING AJAX AT WEB APPLICATIONS. Before AJAX, some developers used hidden iframe instead of AJAX.

7. What can we do with AJAX? Data can be manipulated without having to render the entire page again in the web browser. Allows web applications to respond more quickly to many types of user interaction and to avoid repeatedly sending unchanged information back and forth across the network.

8. What is AJAX? Asynchronous JavaScript And XML AJAX is not a technology itself. Refers to the use of a group of technologies together. – HTML or DHTML and CSS for presentation information. – Document Object Model manipulated through JavaScript to dynamically display and interact with the information presented. – XMLHttpRequest object to exchange data asynchronously with the web server.

9. AJAX Application Model AJAX Application Model adopts – “Partial screen update” replace “click, wait, and refresh” user interaction model. – Asynchronous communication replaces “synchronous request/response model”

10. Classic Vs AJAX

11. AJAX Architecture Use of a client-side engine as an intermediate between the User Interface (UI) and the server. User activity leads to program calls to the client-side engine instead of a page request to the server. XML data transfer between server and the client-side engine.

12. XMLHttpRequest Object Enables JavaScript functions to exchange HTTP transactions with a remote server completely in the background. First implemented by Microsoft in Internet Explorer 5 for Windows as an ActiveX object. Subsequently, developers on the Mozilla project and Apple's Safari browser implemented a compatible native object.

13. Creating the Object For Safari and Mozilla var req = new XMLHttpRequest(); var req = new XMLHttpRequest(); For the ActiveX branch var req = new ActiveXObject("Microsoft.XMLHTTP");

14. Object Methods MethodDescription abort() Stops the current request. getAllResponseHeaders() Returns complete set of headers (labels and values) as a string getResponseHeader("headerLabel") Assigns destination URL, method, and other optional attributes of a pending request open("method", "URL"[, asyncFlag[, "userName"[, "password"]]]) Assigns destination URL, method, and other optional attributes of a pending request send(content) Transmits the request, optionally with postable string or DOM object data setRequestHeader("label", "value") Assigns a label/value pair to the header to be sent with a request

15. Object Properties PropertyDescription onreadystatechange Event handler for an event that fires at every state change readyState Object status integer: 0 = uninitialized 1 = loading 2 = loaded 3 = interactive 4 = complete responseText String version of data returned from server process responseXML DOM-compatible document object of data returned from server process status Numeric code returned by server, such as 404 for "Not Found" or 200 for "OK" statusText String message accompanying the status code

16. Sample Application with J2EE Realtime Form Data Validation Client HTML - form element above will call the validate() each time a key is pressed in the form field.

17. Initialized the XMLHTTPRequest var req; function validate() { var idField = document.getElementById("idField"); var idField = document.getElementById("idField"); var url = "validate?id=" + escape(idField.value); var url = "validate?id=" + escape(idField.value); if (window.XMLHttpRequest) { if (window.XMLHttpRequest) { req = new XMLHttpRequest(); req = new XMLHttpRequest(); } else if (window.ActiveXObject) { } else if (window.ActiveXObject) { req = new ActiveXObject("Microsoft.XMLHTTP"); req = new ActiveXObject("Microsoft.XMLHTTP"); } req.open("GET", url, true); req.open("GET", url, true); req.onreadystatechange = callback; req.onreadystatechange = callback; req.send(null); req.send(null);}

18. Server Side Servlet public class ValidationServlet extends HttpServlet { private ServletContext context; private HashMap users = new HashMap(); public void init(ServletConfig config) throws ServletException { this.context = config.getServletContext(); users.put("greg","account data"); users.put("duke","account data"); } public void doGet(HttpServletRequest request, HttpServletResponse response) throws IOException, ServletException { String targetId = request.getParameter("id"); String targetId = request.getParameter("id"); if ((targetId != null) && !users.containsKey(targetId.trim())) { response.setContentType("text/xml"); response.setHeader("Cache-Control", "no-cache"); response.getWriter().write(“ valid "); if ((targetId != null) && !users.containsKey(targetId.trim())) { response.setContentType("text/xml"); response.setHeader("Cache-Control", "no-cache"); response.getWriter().write(“ valid "); } else { response.setContentType("text/xml"); response.setContentType("text/xml"); response.setHeader("Cache-Control", "no-cache"); response.getWriter().write(“ invalid "); response.setHeader("Cache-Control", "no-cache"); response.getWriter().write(“ invalid ");} } }

19. callback() function processes the result. function callback() { if (req.readyState == 4) { if (req.readyState == 4) { if (req.status == 200) { // update the HTML DOM based on whether or not message is valid // update the HTML DOM based on whether or not message is valid} }}

20. Sample Application with J2EE

21. Who’s Using AJAX Google is making a huge investment in developing the Ajax approach. – Google Groups, Google Suggest, Google Map and GMail – Amazon A9 search engine, Amazon A9 map Google's competitors have recently released similar Ajax-based websites. –America Online’s AIM Mail –Microsoft’s Virtual Earth

22. Libraries/Scripts with server-side integration.Net –Ajax.NET (free Microsoft.NET Library) –Aspects of Ajax (free Ajax Engine using Ajax base on WebServices and a Blog) –Bitkraft –PowerWEB livecontrols for ASP.NET (Ajax for Visual Studio ASP.NET) Java –AjaxTags (free set of JSP tags that simplify the use of Ajax technology) –DWR (free Java Library) –Echo2 (free Java Ajax library with a thick client API) –JSON-RPC-JAVA PHP –NAjax (PHP library that aims to connect JavaScript and PHP.) –Xajax (PHP Ajax toolkit) –Html_Ajax Multiplatform –Backbase –WebORB

23. Browsers which support AJAX Apple Safari 1.2 and above Konqueror Microsoft Internet Explorer 5.0 and above Mozilla Firefox 1.0 and above Netscape 7 and above Opera 7.6 and above

24. References www.ajaxmatters.com www.adaptivepath.com en.wikipedia.org/wiki/AJAX www.nextapp.com/products/echo2/ getahead.ltd.uk/dwr/ oss.metaparadigm.com/jsonrpc/ dev2dev.bea.com/pub/a/2005/08/ajax_intr oduction.html dev2dev.bea.com/pub/a/2005/08/ajax_intr oduction.html

25. Conclusion AJAX represents a generic application model that would enable more interactive, more responsive, and smarter Web applications. AJAX is not tied to a particular programming language, data format, or network object and is defined by two core attributes: partial screen update and asynchronous communication.

26. Thanks for your time. thhno@ifocoms.com