1 / 37

Making Progress With Ajax

Making Progress With Ajax. Peter van Dam. Agenda. Agenda Item 1 Introduction The XMLHttpRequest object Calling Progress: WebSpeed Web services Ajax Frameworks. What is Ajax?. Asynchronous JavaScript and XML. Standards-based presentation using XHTML and CSS;

yitta
Download Presentation

Making Progress With Ajax

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Making Progress With Ajax Peter van Dam

  2. Agenda • Agenda Item 1 • Introduction • The XMLHttpRequest object • Calling Progress: • WebSpeed • Web services • Ajax Frameworks Making Progress With Ajax

  3. What is Ajax? Asynchronous JavaScript and XML • Standards-based presentation using XHTML and CSS; • Dynamic display and interaction using the Document Object Model; • Data interchange and manipulation using XML; • (A)synchronous data retrieval using XMLHttpRequest; • and JavaScript binding everything together. Making Progress With Ajax

  4. What is Ajax? (2) The bottom line • A way to create web applications that behave like desktop applications (Rich Internet Application – RIA) • Zero footprint • Single Page Interface • Almost as rich as the desktop • But not a replacement for the desktop Making Progress With Ajax

  5. HTML, XHTML, DHTML • HTML development ceased in 1999 (4.01) • Followed by XHTML (W3C standard) • No more browser-specific dialects • XHTML is like HTML 4.0 but enforces tag rules stricter (e.g. close tags required: <P></P> and <BR />) • DHTML allows the dynamic manipulation of web pages at runtime (see DOM) Making Progress With Ajax

  6. DOM • The Document Object Model is a standard API for accessing all objects in a web page (document) • An example language that implements the DOM is JavaScript • The DOM allows to query, create, modify and delete elements in a web page at run time • Examples: rendering, refreshing content (!) Making Progress With Ajax

  7. JavaScript • JavaScript is a client-side programming language that runs in the browser • Standardized by ECMA • Minor differences (additions) still exist, but it is not a nightmare anymore • As long as you stick to ECMAScript for manipulating the DOM you are OK • JavaScript is not difficult to learn Making Progress With Ajax

  8. CSS • Cascading Style Sheets allow the separation of presentation and data by defining Styles • Look-and-feel is provided by CSS • CSS offers more details than HTML • Styles can be set by JavaScript as well, e.g. field width in pixels Making Progress With Ajax

  9. CSS (2) Making Progress With Ajax

  10. XML Making Progress With Ajax

  11. The XMLHttpRequest object The magic of Ajax is in the XMLHttpRequest object The following code works in all modern browsers*: function callServer(dataFile, target) { varmyRequest = new XMLHttpRequest(); varmyTarget = document.getElementById(target); myRequest.open("GET", dataFile, false); myRequest.send(null); myTarget.innerHTML = myRequest.responseText; } * IE 6- requires additional code Making Progress With Ajax

  12. The XMLHttpRequest object Methods Making Progress With Ajax

  13. The XMLHttpRequest object Properties Making Progress With Ajax

  14. Demo reading file: ajax1.html Making Progress With Ajax

  15. Web Server Ajax Engine User Interface (HTML) Documents Calling Progress Using WebSpeed Ajax Architecture BrowserClient Making Progress With Ajax

  16. Calling Progress There are two major ways to call Progress from JavaScript • WebSpeed • Web Services Making Progress With Ajax

  17. Demo calling Progress: ajax3.html Making Progress With Ajax

  18. Web Server Ajax Engine User Interface (HTML) Documents Database Calling Progress Using WebSpeed WebSpeed Ajax Architecture BrowserClient WebSpeed Agent Making Progress With Ajax

  19. GET or POST? • This example sends the request using GET • The parameters are appended to the URL • There is a limit of 512 bytes • In addition GET is prone to caching Making Progress With Ajax

  20. Switching from GET to POST • Change the method to POST • Set the requestHeader to url-encoded • Send the parameters as data Making Progress With Ajax

  21. Calling Progress using POST: ajax4.html Making Progress With Ajax

  22. Switching to XML • Sending XML from JavaScript client:setRequestHeader("Content-Type","text/xml"); • Receiving XML on WebSpeed server:hDoc = WEB-CONTEXT:X-DOCUMENT. • Sending XML from WebSpeed:RUN outputContentType IN web-utilities-hdl ("text/xml":U). • Receiving XML on JavaScript Client:responseXML.firstChild.firstChild.nodeValue; Making Progress With Ajax

  23. Calling Progress using XML: ajax5.html Making Progress With Ajax

  24. Ajax Using Web Services Advantages of Web services over WebSpeed • Web services can be used instead of WebSpeed • The biggest advantage is automatic XML conversion • You can create Web service proxies using ProxyGen for any .r file • The Web Services Adapter (WSA) takes care of the rest • Now you have XML communication between client and server Making Progress With Ajax

  25. Web Services and SOAP A SOAP message is XML payload in an Envelope Making Progress With Ajax

  26. Demo stuff • You have probably seen ProxyGen demos several times • Instead let us have a look at the generated WSDL file • You can install an Eclipse plug-in called Eclipse Web Tools to help you out with Ajax development including XML and WSDL manipulation Making Progress With Ajax

  27. Example Using Web services: ajaxsoap.html Making Progress With Ajax

  28. Drawbacks of the Web Services Approach • Uploading Files • Is possible, but difficult • Streaming data • Not possible, you still need WebSpeed for this Making Progress With Ajax

  29. Ajax Frameworks Why use an Ajax framework? • Save a lot of time and effort • Do notreinvent the wheel • Mature user interface • Better quality by using a proven product • Cross-browser support • Access to widget and code libraries • Get Help and Support Making Progress With Ajax

  30. Examples of Ajax Frameworks Commonly used Ajax JavaScript Frameworks • Dojo • YUI • BackBase • SmartClient Making Progress With Ajax

  31. Dojo • http://dojotoolkit.org • Open Source product • Very popular • Great widgets • Not very well documented • Prefers JSON over XML Making Progress With Ajax

  32. Yahoo! UI library • http://developer.yahoo.com/yui • Open Source product • Well documented • Very large installed base • Easy to get started Making Progress With Ajax

  33. Backbase • www.backbase.com • Commercial product • You can start with the Open Source version • Pretty well documented • Very powerful • Complex Making Progress With Ajax

  34. SmartClient • www.smartclient.com • Commercial product • Well documented • Easy to get started Making Progress With Ajax

  35. ? Questions Making Progress With Ajax

  36. www.futureproofsoftware.com peter@futureproofsoftware.com Making Progress With Ajax

  37. Thank You Making Progress With Ajax

More Related