Survey
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
Making Progress With Ajax Peter van Dam Agenda Agenda Item 1 Introduction The XMLHttpRequest object Calling Progress: • WebSpeed • Web services Ajax Frameworks 2 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. 3 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 4 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) 5 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 (!) 6 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 7 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 8 Making Progress With Ajax CSS (2) 9 Making Progress With Ajax XML 10 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) { var myRequest = new XMLHttpRequest(); var myTarget = document.getElementById(target); myRequest.open("GET", dataFile, false); myRequest.send(null); myTarget.innerHTML = myRequest.responseText; } * IE 6- requires additional code 11 Making Progress With Ajax The XMLHttpRequest object Methods 12 Method Description open(method, URL, async) Specifies the method, URL and optional “async” parameter. setRequestHeader(label, value) Adds a label/value pair to the HTTP header to be sent. send(content) Sends the request. Making Progress With Ajax The XMLHttpRequest object Properties Property Description responseText Returns the response as a string. responseXML Returns the response as XML. You can parse this DOM tree with JavaScript. readyState Returns the state of the object as follows: Onreadystatechange status statusText 13 Making Progress With Ajax 0 = uninitialized 1 = open 2 = sent 3 = receiving 4 = loaded This is a reference to an event handler for an event that fires at every change of readyState. Returns the HTTP status code as a number (e.g. 404 for "Not Found" and 200 for "OK"). Returns the status as a string (e.g. "Not Found" or "OK"). Demo reading file: ajax1.html 14 Making Progress With Ajax Calling Progress Using WebSpeed Ajax Architecture Browser Client Web User Ajax Interface Engine Server (HTML) Documents 15 Making Progress With Ajax Calling Progress There are two major ways to call Progress from JavaScript WebSpeed Web Services 16 Making Progress With Ajax Demo calling Progress: ajax3.html 17 Making Progress With Ajax Calling Progress Using WebSpeed WebSpeed Ajax Architecture Browser Client Web User Ajax Interface Engine Server WebSpeed Agent (HTML) Documents 18 Making Progress With Ajax Database GET or POST? function callServer(url, targetContainer) { var myRequest = createRequest(); var myTarget = document.getElementById(targetContainer); myRequest.open("GET", url, false); myRequest.send(null); myTarget.innerHTML = myRequest.responseText; } 19 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 function callServer(url, data, targetContainer) { var myRequest = createRequest(); var myTarget = document.getElementById(targetContainer); myRequest.open("POST", url, false); myRequest.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); myRequest.send(data); myTarget.innerHTML = myRequest.responseText; } Change the method to POST Set the requestHeader to url-encoded Send the parameters as data 20 Making Progress With Ajax Calling Progress using POST: ajax4.html 21 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; 22 Making Progress With Ajax Calling Progress using XML: ajax5.html 23 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 24 Making Progress With Ajax Web Services and SOAP A SOAP message is XML payload in an Envelope Envelope Header Header Entry Header Entry … Body Body Entry Body Entry … 25 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 26 Making Progress With Ajax Example Using Web services: ajaxsoap.html 27 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 28 Making Progress With Ajax Ajax Frameworks Why use an Ajax framework? 29 Save a lot of time and effort Do not reinvent 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 30 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 31 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 32 Making Progress With Ajax Backbase www.backbase.com Commercial product You can start with the Open Source version Pretty well documented Very powerful Complex 33 Making Progress With Ajax SmartClient www.smartclient.com Commercial product Well documented Easy to get started 34 Making Progress With Ajax ? Questions 35 Making Progress With Ajax www.futureproofsoftware.com [email protected] 36 Making Progress With Ajax Thank You 37 Making Progress With Ajax