370 likes | 566 Views
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;
E N D
Making Progress With Ajax Peter van Dam
Agenda • Agenda Item 1 • Introduction • The XMLHttpRequest object • Calling Progress: • WebSpeed • Web services • Ajax Frameworks Making Progress With Ajax
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
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
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
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
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
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
CSS (2) Making Progress With Ajax
XML Making Progress With Ajax
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
The XMLHttpRequest object Methods Making Progress With Ajax
The XMLHttpRequest object Properties Making Progress With Ajax
Demo reading file: ajax1.html Making Progress With Ajax
Web Server Ajax Engine User Interface (HTML) Documents Calling Progress Using WebSpeed Ajax Architecture BrowserClient Making Progress With Ajax
Calling Progress There are two major ways to call Progress from JavaScript • WebSpeed • Web Services Making Progress With Ajax
Demo calling Progress: ajax3.html Making Progress With Ajax
Web Server Ajax Engine User Interface (HTML) Documents Database Calling Progress Using WebSpeed WebSpeed Ajax Architecture BrowserClient WebSpeed Agent Making Progress With Ajax
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
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
Calling Progress using POST: ajax4.html Making Progress With Ajax
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
Calling Progress using XML: ajax5.html Making Progress With Ajax
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
Web Services and SOAP A SOAP message is XML payload in an Envelope Making Progress With Ajax
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
Example Using Web services: ajaxsoap.html Making Progress With Ajax
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
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
Examples of Ajax Frameworks Commonly used Ajax JavaScript Frameworks • Dojo • YUI • BackBase • SmartClient Making Progress With Ajax
Dojo • http://dojotoolkit.org • Open Source product • Very popular • Great widgets • Not very well documented • Prefers JSON over XML Making Progress With Ajax
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
Backbase • www.backbase.com • Commercial product • You can start with the Open Source version • Pretty well documented • Very powerful • Complex Making Progress With Ajax
SmartClient • www.smartclient.com • Commercial product • Well documented • Easy to get started Making Progress With Ajax
? Questions Making Progress With Ajax
www.futureproofsoftware.com peter@futureproofsoftware.com Making Progress With Ajax
Thank You Making Progress With Ajax