AJAX

1. Ronen Cooper Roy Ben-Ami AJAX AJAX

2. Contents AJAX • What’s Ajax? • Classic Model Vs. Ajax Model • Defining Ajax • XHTML, DOM, XML, XMLHttpRequest, JavaScript • Advantages & Disadvantages • Ajax Alternatives • XUL, XAML, Applets, Flash, SVG • Enhanced Ajax • DWR, Xajax, Ajax.Net • Examples + Demo

3. What’s Ajax Ajax may sound familiar… Washing Machine powder Dutch soccer team AJAX

4. What’s Ajax Ajax is the buzzword of the moment among web developers It Stands for Asynchronous JavaScript And XML Jesse James Garrett invented this bad acronym in Feb 2005 to describe its use by Google. Most of the Ajax world is focused on the client side, and "ooooh ahhhh" effects  Lets see some of these effects! AJAX

5. What’s Ajax Google Suggest Microsoft Live Examples From the Web Writely Google Maps Gmail AJAX

6. What’s Ajax Ajax isn’t a technology Ajax is an approach to Web application development that uses client-side scripting to exchange data with the Web server Ajax is also more of a pattern -- a way to identify and describe a useful design technique Ajax is new in the sense that many developers are just beginning to be aware of it, but all of the components that implement an Ajax application have existed for several years AJAX

7. Classic Model The classic web application model works like this: Most user actions in the interface trigger an HTTP request back to a web server. The server does some processing — retrieves data, crunches numbers, talks to various legacy systems And then returns an HTML page to the client AJAX

8. Classic Model This approach makes a lot of technical sense, but it doesn’t make for a great user experience. At every step in a task, the user waits. The user sees the application go to the server AJAX

9. Ajax Model An Ajax application eliminates the start-stop-start-stop nature of interaction on the Web It introduces an intermediary, an Ajax engine, between the user and the server. Instead of loading a webpage, at the start of the session, the browser loads an Ajax engine, written in JavaScript and usually tucked away in a hidden frame. The Ajax engine allows the user’s interaction with the application to happen asynchronously, independent of communication with the server AJAX

10. Ajax Model Every user action that normally would generate an HTTP request takes the form of a JavaScript call to the Ajax engine AJAX

11. Ajax Model Any response to a user action that doesn’t require a trip back to the server — such as simple data validation, editing data in memory, and even some navigation — the engine handles on its own. If the engine needs something from the server in order to respond — if it’s submitting data for processing, loading additional interface code, or retrieving new data — the engine makes those requests asynchronously, usually using XML, without stalling a user’s interaction with the application. The user is never staring at a blank browser window and an hourglass icon, waiting around for the server to do something. AJAX

12. Defining Ajax Ajax incorporates several technologies, each flourishing in its own right, coming together in powerful new ways. standards-based presentation using XHTML, CSS dynamic display and interaction using DOM data interchange and manipulation using XML, XSLT asynchronous data retrieval using XMLHttpRequest and JavaScript binding everything together. AJAX

13. Ajax Advantages Client Side Can produce smooth, uninterrupted user workflow. Saves bandwidth by only transmitting new information Creates possibility of entirely new types of user interfaces not possible in traditional model. Developer Side Provides a Middle-of-the-Road approach between sophisticated web design (Java applets and Flash) to simple web design (HTML). Doesn't require 3rd party software like Java or Flash Fits into normal code flow Most developers already know JavaScript. AJAX

14. Ajax Disadvantages Client Side Poor compatibility with very old or obscure browsers, and many mobile devices. Limited Capabilities like multimedia, interaction with web-cams and printers, local data storage and real time graphics. The first-time long wait for Ajax sites. Problem with back/forward buttons and bookmarks. Developer Side Easily Abused by “bad” programmers. Not everyone have JavaScript enabled. Too much code makes the browser slow. AJAX

15. Ajax Alternatives As a new technology moves through the hype curve, people emerge to raise the inevitable question "Why not something else?“ Now we have AJAX – an admittedly powerful approach to web development is that because it's really the best option for the job? AJAX

16. Ajax Alternatives XUL Pronounced "zool", XUL is a high performance markup language for creating rich dynamic user interfaces It’s part of the Mozilla browser and related applications and is available in Mozilla browsers (like Firefox). XUL is comprised mainly of a set of high-performance widgets that can be combined together Advantages: high performance, fast, works with JavaScript, based on XML Disadvantages: Only compatible with Mozilla browsers. AJAX

17. Ajax Alternatives XAML XAML is a high performance markup language for creating rich dynamic user interfaces. It’s part of Avalon, Microsoft’s next generation UI technology (will be supported in IE 7). Advantages: high performance, robust, highly configurable. Disadvantages: Microsoft-only technology and will be available only when Vista is released. AJAX

18. Ajax Alternatives Java Applets An Applet is a program written in JAVA that can be included on a web page. Advantages: Fast. Supported on most platforms (with the Java plugin). Disadvantages: Requires the Sun Java plugin and takes a while to load. Macromedia Flash & Shockwave (or the new FLEX) These are powerful presentation-layer frameworks. Advantages: Browser and platform compatibility. Speed and flexibility. Increasingly powerful development tools. Disadvantages: General distrust from enterprise software developers. Rare skillset required. AJAX

19. Ajax Alternatives SVG (Scalable Vector Graphics) A text based graphics language that describes images with vector shapes, text, and embedded raster graphics. It has good interoperability with CSS and JavaScript Advantages: Speed and flexibility. Disadvantages: Requires proprietary plugins that many firms will not allow users to install. Rare skillset required to do development. This language is still somewhat immature and developing. AJAX

20. Ajax Alternatives AJAX

21. Enhanced Ajax Raw Ajax - using the XmlHttpRequest directly for creating asynchronous requests is cumbersome. It is verbose in the JavaScript code and hard to debug. You must consider the server-side work needed to marshal the results back to the browser Using different engines/frameworks you can eliminate all of the machinery of the Ajax request-response cycle from your application code. This means your client-side code never has to deal with an XMLHttpRequest object directly. You don't need to write object serialization code or use third-party tools to turn your objects into XML. AJAX

22. Enhanced Ajax DWR – Direct Web Remoting It is a Java framework that you can easily plug into your Web applications to allow your JavaScript code to call services on the server. DWR is deployed as a servlet within your Web application DWR dynamically generates JavaScript to include in your Web page for each exposed class The generated JavaScript contains stub functions that represent the corresponding methods on the Java class and also performs XMLHttpRequests behind the scenes. The DWR invokes those methods and sends the method's return value back to the client side in its servlet response, encoded into JavaScript AJAX

23. Enhanced Ajax This method of remoting functions from Java to JavaScript gives DWR users a feel much like conventional RPC mechanisms like RMI or SOAP, with the benefit that it runs over the web without requiring web-browser plug-ins. function eventHandler() { Data.getOptions(populateList); } public class Data { public String[] getOptions() { return new String[]{“1”,”2”,”3”}; } } function populateList(data) { DWRUtil.addOptions(“listid”,data); } AJAX

24. Enhanced Ajax There are many more such frameworks for Java and other languages: Xajax - an open source PHP class library for ajax Ajax.net – Ajax library for .Net (not by microsoft) AjaxAnywhere - designed to turn any set of existing JSP or JSF components into AJAX-aware components Dojo - an Open Source toolkit that allows you to easily build dynamic capabilities into web pages Bindows - object-oriented platform and IDE for developing Ajax applications AJAX

25. Demo The demo contains 2 identical examples for using Ajax. First example will use the raw XMLHttpRequest. Second example will use the DWR. The examples show a way for creating the “next generation” voting system. Old system is used in sites like walla, ynet and more… Currently, when you vote the entire page is refreshed/resent. Ajax can make the user experience more pleasant by providing a more responsive UI and eliminating the flicker of the page refresh. It also saves bandwidth since we can send only the results back, instead of the whole page. AJAX

26. Installation All we need to run Ajax is a compatible browser! Explorer, Mozilla or FireFox will do fine. But to develop and test our examples we also need a Web Server. We will use Tomcat 5.5 which can be found here We will need Java SDK 1.5 (5.0) – get here In general, you will also need a DB, but for simplicity we don’t use one in our examples. Lastly, for the DWR example, you need to d/l the dwr.jar from here (version 1.0 or 1.1 beta) AJAX

27. Installation Install Tomcat by running the binary file (after JDK 1.5) Start the tomcat web server by clicking the “Configure Tomcat” program. Press the Start. Wait until the service status says Started. Open your browser. Enter the address: localhost:8080 AJAX

28. Installation Make sure you have this page now in the browser Now place the dwr.jar in the WEB-INF/lib directory of your web app (default is TOMCAT_HOME/webapps/ROOT/ WEB-INF/lib). AJAX

29. Installation Now add these lines to the WEB-INF/web.xml file. The <servlet> section needs to go with the other <servlet> sections, and likewise with the <servlet-mapping> section. <servlet> <servlet-name>dwr-invoker</servlet-name> <display-name>DWR Servlet</display-name> <servlet-class>uk.ltd.getahead.dwr.DWRServlet</servlet-class> <init-param> <param-name>debug</param-name> <param-value>true</param-value> </init-param> </servlet> <servlet-mapping> <servlet-name>dwr-invoker</servlet-name> <url-pattern>/dwr/*</url-pattern> </servlet-mapping> AJAX

30. Installation That’s it!!! It’s that simple. Notice that Tomcat also supports JSP files and servlets (the Java equivalent to ASP.NET). All we need now is a Text Editor such as notepad or something else free to write the code down. Later we will go back to configure the DWR correctly for our example. But for right now, lets jump to the 1st example. AJAX

31. Direct Web Remoting DWR makes our lives much simpler but it’s a bit slower that regular AJAX, and also still buggy (getting better all the time). To use DWR we need to do the following: We need to tell the DWR engine what classes and methods we want it to “export” for us. We need to create a dwr.xml file and put it inside our TOMCAT_HOME/webapps/ROOT/ WEB-INF In the dwr.xml we will specify our Java Class, and will give it a JavaScript name that we can use in the HTML pages. AJAX

32. Direct Web Remoting The dwr.xml file we will use We will now need to change a few things… <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE dwr PUBLIC "-//GetAhead Limited//DTD Direct Web Remoting 1.0//EN" "http://www.getahead.ltd.uk/dwr/dwr10.dtd"> <dwr> <allow> <create creator="new" javascript="JSVoteSystem"> <param name="class" value="myajax.VoteSystem" /> </create> </allow> </dwr> AJAX

33. Direct Web Remoting The new JavaScript File (voteDWR.js) Notice how much simpler the functions are! And we don’t even need the JSP file! All that is left is to add 3 lines to the HTML file. function castVote(rank) { JSVoteSystem.vote(rank,handleResponse); } function handleResponse(data) { … $("votes").rows[1].cells[0].innerHTML='Linux:<b> '+data[0]+'</b>'; $("votes").rows[2].cells[0].innerHTML='Windows:<b> '+data[1]+'</b>'; … AJAX

34. Direct Web Remoting We add 3 lines to the HTML file The util.js that DWR provides contains a lot of useful methods to use the DOM such as setValue(), getValue() and more… The built-in Debug mode in DWR allows us to test our classes in here: http://localhost:8080/dwr/ For every function we exported, we will be able to test and see how it works remotely – really cool feature! <script type='text/javascript' src='/dwr/interface/JSVoteSystem.js'></script> <script type='text/javascript' src='/dwr/engine.js'></script> <script type='text/javascript' src='/dwr/util.js'></script> AJAX

35. Bonus We added 2 more JavaScript files to demo genlibsubset_draggable.js & draggable.js These enable you to drag around stuff in your HTML file – a cool thing to do. All you need to do is to include those 2 scripts in your file and add the attribute class=“draggable” to anything that you want to drag. You need to give a fixed size to those objects in order for it to work. • <script type="text/javascript" src="genlibsubset_draggable.js"></script> • <script type="text/javascript" src="draggable.js"></script> • … • <div class="draggable" style="position:absolute; left:10px; top:300px;" > • … • </div> AJAX

36. Thank You The END! AJAX

37. Web Services Using SOAP, WSDL, and UDDI

38. What are “Web Services”? • IBM • “A Web service is an interface that describes a collection of operations that are network accessible through standardized XML messaging” • Microsoft: XML Web Services • “.. expose useful functionality to Web users through a standard Web protocol” • “.. provide a way to describe their interfaces in enough detail to allow a user to build a client application to talk to them” • “.. are registered so that potential users can find them easily”

39. Why Web Services? • From business standpoint • Integration • Within an organization • Between companies • Allows time/cost efficiencies • Purchase orders • Answering inquiries • Processing shipment requests • Do this without locking in to a single partner

40. Web Service Architecture Service Registry Service Requestor Service Provider Publish Find Bind Service-Oriented Architecture

41. Registry (UDDI) Service Requestor Service Provider Architecture II Publish Find (WSDL) (SOAP) Bind (SOAP) • All the technologies are XML based …

42. XML Leveraging Features • XML Namespaces • Collision • Common XML element names • Application specific or embedded in message? • Allows composition of multiple XML documents • Identifies elements belonging to the same document type

43. XML Leveraging Features II • XML Schemas • Alternative to DTDs for describing document structure • Written in XML • Simple types • Complex types • Reusable • Intended to be used with namespaces

44. SOAP • Simple Object Access Protocol • Web service messaging and invocation • 2nd Generation XML Protocol • Takes advantage of • XML Namespaces • XML Schema

45. First Generation XML Protocol <methodResponse> <params> <param> <value> <string>twenty-eight</string> </value> </param> </params> </methodResponse> <methodCall> <methodName>NumberToText</methodName> <params> <param> <value><i4>28</i4></value> </param> </params> </methodCall> Call Response • Based on XML 1.0 • Example: XML-RPC • Introduced by Userland in 1998 • Uses HTTP as underlying transport

46. First Gen. XML Protocol Issues • Extensibility • All protocol architects had to agree for changes • Avoid with namespaces • Datatyping • Single DTDs • Limited in use of XML elements • Descriptive nature of XML sacrificed • XML schema is a better solution

47. SOAP History • Term SOAP coined at Microsoft 1998 • Microsoft works with BizTalk to release SOAP 0.9 • Submitted to IETF • SOAP 1.0 released in December 1999 • SOAP 1.1 submitted to W3C with IBM • IBM releases a Java SOAP implementation • Sun starts work on Web services in J2EE 2000 • SOAP 1.2 released by XML Protocol working group at W3C 2001 Currently, about 80+ SOAP implementations available including Apple…

48. SOAP Messaging Layers App API App API SOAP, XML Processing SOAP, XML Processing HTTP HTTP SOAP Message SOAP Message Provider View Client Developer SOAP Service Provider HTTP

49. SOAP Message <?xml version="1.0" encoding="UTF-8"?> <Envelope> <Header> </Header> <Body> </Body> </Envelope>

50. SOAP Envelope <SOAP-ENV:Envelope SOAP-ENV:encodingStyle=http://schemas.xmlsoap.org/soap/encoding/ xmlns="http://schemas.xmlsoap.org/soap/envelope/" xmlns:SOAP-ENV="http://schemas.xmlsoap.org/soap/envelope/" xmlns:xsi="http://www.w3.org/1999/XMLSchema-instance" xmlns:xsd="http://www.w3.org/1999/XMLSchema"> • Root element • Mandatory • Does not expose any protocol versions • Protocol version is the URI of SOAP envelope namespace • encodingStyle attribute for complex types