RIA and Ajax
•
9 likes•3,874 views
This presentation lays out the concept of the traditional web, the improvements web 2.0 have brought about, etc. I have attempted to explain RIA as well. The main part of this presentation is centered around ajax, its uses, advantages / disadvantages, framework considerations when using ajax, java-script hijacking, etc. Hopefully it should be a good read as an intro doc to RIA and Ajax.
![Introduction to RIA and AJAX Created by - Schubert [email_address]](https://image.slidesharecdn.com/Cschubert_knowledgeBase___myTutorialsRIA_and_Ajax-090223083857-phpapp01/85/RIA-and-Ajax-1-320.jpg)
![Agenda ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]](data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7)
More Related Content
What's hot
What's hot (20)
Viewers also liked
Viewers also liked (20)
Similar to RIA and Ajax
Similar to RIA and Ajax (20)
Recently uploaded
Recently uploaded (20)
RIA and Ajax
- 1. Introduction to RIA and AJAX Created by - Schubert [email_address]
- 4. RIA – Rich Internet Applications
- 6. Introduction – ii Thick Client – Thin Client Server Client Data Data Data Data Business Logic Presentation Logic Presentation Logic Business Logic Business Logic Presentation Logic UI Engine Business Logic Presentation Logic HTML
- 7. Introduction - iii The need for smart clients
- 8. Introduction - iv RIA Richness Communication Application Bringing the Desktop to the Web ! Connected / Alive Interactive Responsive Traditional web Pervasiveness Online / Offline mode Event’s, notification Security Accessibility A RIA
- 10. Web 2.0 - ii By products
- 12. Web Orientation
- 13. HTML – DOM HTML - Are HTML document structures validated ? - <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> - What is XHTML ? - HTML 5 and XHTML 5 DOM
- 14. CSS CSS Color – Visibility – Positioning - Backgrounds
- 15. HTTP - i OSI (Open Systems Interconnection) – Reference model Application Presentation Session Transport Network Datalink Physical HTTP Headers Methods Status codes
- 17. HTTP - iii HTTP methods Get - Conditional GET (if headers such as if-modified-since , etc are present.) - Partial GET (if headers include ranges , avoids data transmission already held by the client) POST - Provide a block of data for processing HEAD - Identical to GET except that the server MUST NOT return a message-body in the response. (used for testing hypertext links for validity, accessibility, and recent modification.) PUT / DELETE / TRACE / CONNECT / OPTIONS
- 18. HTTP - iv HTTP status codes Informational Success Re - Direction Client Error Server Error 1xx 2xx 3xx 4xx 5xx 100 Continue 200 OK 202 Accepted 301 Moved Permanently 304 Not Modified 400 Bad Request 403 Forbidden 404 Not Found 500 Internal Server Error 502 Bad Gateway 503 Service Unavailable
- 20. XML / JSON - ii {"menu": { "id": "file", "value": "File", "popup": { "menuitem": [ {"value": "New", "onclick": "CreateNewDoc()"}, {"value": "Open", "onclick": "OpenDoc()"}, {"value": "Close", "onclick": "CloseDoc()"} ] } }} <menu id="file" value="File"> <popup> <menuitem value="New" onclick="CreateNewDoc()" /> <menuitem value="Open" onclick="OpenDoc()" /> <menuitem value="Close" onclick="CloseDoc()" /> </popup> </menu> JSON v/s XML
- 21. AJAX
- 22. Introduction AJAX (Asynchronous JavaScript and XML) Ajax can be defined as a group of interrelated web development techniques used to create interactive web applications or rich Internet applications. AJAX CSS / XHTML DOM XML / XSLT XHR Presentation semantics Dynamic display and data interaction Interchange and manipulation Object for communication
- 23. Introduction - i AJAX interactions – classical web model
- 24. Introduction - i AJAX interactions – the ajax model
- 25. The XMLHTTPRequest object - i The XMLHttpRequest Object specification defines an API that provides scripted client functionality for transferring data between a client and a server. The XMLHttpRequest object implements an interface exposed by a scripting engine that allows scripts to perform HTTP client functionality, such as submitting form data or loading data from a server. Supports any text based format, including XML It can be used to make requests over both HTTP and HTTPS Supports all activity involved with HTTP requests or responses for the defined HTTP methods .
- 27. The XMLHTTPRequest object - iii XHR Object state, events and exceptions XHR Object State UNSENT (Constant value – 0) OPEN (Constant value – 1) SENT (Constant value – 2) LOADING (Constant value – 3) DONE (Constant value – 4) XHR Object Exceptions XMLHttpRequestException NETWORK_ERR ABORT_ERR XHR Event readystatechange
- 28. The XMLHTTPRequest object - iv XHR Object state - elaborated Unsent When constructed, the XMLHttpRequest object must be in the UNSENT state. This state is represented by the UNSENT constant, whose value is 0. Open The OPEN state is the state of the object when the open() method has been successfully invoked. During this state request headers can be set using setRequestHeader() and the request can be made using send(). Sent The SENT state is the state of the object when the user agent successfully acknowledged the request. Loading The LOADING state is the state of the object when all HTTP headers have been received. The object typically remains in this state until the complete message body (if any) has been received. Done The DONE state is the state of the object when either the data transfer has been completed or something went wrong during the transfer.
- 29. The XMLHTTPRequest object - v XHR methods open(<method>, <url>) This prepares the XHR object for a call to the server. If you are passing parameters with via GET, you can append them to the URL here. send(<body>) This method actually sends the request to the server. The body parameter can be used to pass any POST parameters that you would like. You can format your POST parameters just like a GET query-string setRequestHeader(<header>, <value>) This method allows you to set the specified header with the given value. (e.g. content-type) getAllResponseHeaders() Returns all the response headers as a key / value pair. getResponseHeader(<header>) Returns the specific header requested. abort() Aborts the operation
- 30. The XMLHTTPRequest object - vi XHR properties onreadystatechange This property sets the method to be called on every state change. This is usually your event handler for the asynchronous callback readyState This property defines the state of the XHR. Possible values include: 0 Uninitated (open() has not been called) 1 Loading (send() has not been called) 2 Loaded (send() has been called, and headers and status are available.) 3 Interactive (Downloading; responseText holds partial data) 4 Complete (Operation is complete) When sending the XHR, you will check to see if the readyState is 0 or 4, and in your asynchronous callback handler, you will check to see if the readyState is 4. responseText This returns the response from the server as a string. (Typically text, JSON)
- 31. The XMLHTTPRequest object - vii XHR properties responseXML This returns the response from the server as an XML document. This is the way to go if you need to return multiple values from your AJAX request. status This returns the HTTP status code from the server such as 200 for OK or 404 for not found. status This returns a string representation of the HTTP status code such as OK for 200 and Not Found for 404
- 33. AJAX code – decoded - i var xmlHttp = GetXmlHttpObject(); if (xmlHttp==null) { alert ("Your browser does not support AJAX!"); return; } var url = “validate.jsp"; url = url + "?id=“ + str; xmlHttp.onreadystatechange = stateChanged; xmlHttp.open("GET",url); xmlHttp.send(null); Function to get the XHR object event handler for the asynchronous callback prepare the XHR object for a call to the server Send the request to the server
- 34. AJAX code – decoded - ii function stateChanged() { if (xmlHttp.readyState == 4) { if (req.status == 200) { document.getElementById(“validHint").innerHTML = xmlHttp.responseText; } } } Event handler code
- 35. AJAX code – decoded - iii function GetXmlHttpObject() { var xmlHttp=null; try { // Firefox, Opera, Safari xmlHttp=new XMLHttpRequest(); } catch (e) { // Internet Explorer try { xmlHttp=new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { xmlHttp=new ActiveXObject("Microsoft.XMLHTTP"); } } return xmlHttp; } Getting the XHR object Pre 5.5 versions of IE
- 36. AJAX code – decoded - iv Code overview
- 37. AJAX code – decoded - v UML overview
- 38. DOM manipulation concepts var tr = document.createElement('TR'); var td = document.createElement('TD'); tr.appendChild(td); tr.style.backgroundColor = <some color> tr.childNodes tr.firstChild tr.lastChild var parent = td.parentNode; tr.removeChild(td); var img = document.createElement('IMG'); img.setAttribute('src', 'delete.gif'); img.onclick = function() { // function code } Creating elements Adding child elements Setting element properties Referencing child nodes Accessing the parent node Removing parent nodes Assigning behavior to dynamically created elements
- 39. Basic high-level ajax architecture
- 40. Design Patterns
- 43. Frameworks and Toolkits - i Google Web Toolkit
- 44. Frameworks and Toolkits - ii YUI – Yahoo User Interface
- 45. Frameworks and Toolkits - iii jMaki
- 46. Frameworks and Toolkits - iv DEMO Google Web Toolkit (GWT) Yahoo User Interface (YUI) extJS
- 47. Ajax – Security and Performance related aspects
- 51. Security issues - iv Preventing direct execution of the Response In order to make it impossible for a malicious site to execute a response that includes JavaScript, the legitimate client application can take advantage of the fact that it is allowed to modify the data it receives before executing it, while a malicious application can only execute it using a <script> tag. When the server serializes an object, it should include a prefix (and potentially a suffix) that makes it impossible to execute the JavaScript using a <script> tag. The legitimate client application can remove this extraneous data before running the JavaScript. Example 1: Prefixing text like while(1) req.open("GET", "/object.json"); req.onreadystatechange = function () { if (req.readyState == 4) { var txt = req.responseText; if (txt.substr(0,9) == "while(1);") { txt = txt.substring(10); } object = eval("(" + txt + ")"); req = null; } }; Unless the client removes this prefix, evaluating the message will send the JavaScript interpreter into an infinite loop.
- 52. Security issues - v Preventing direct execution of the Response Example 2: T he server can include comment characters around the JavaScript that have to be removed before the JavaScript is sent to eval() /* [{"fname":“Larry", "lname":“Ellison", "phone":"6502135600", "purchases":60000.00, "email":“larry@oracle.com" } ] */ Unless the client removes these comment characters, the JS code will not be able to be evaluated.
- 55. Ajax – Advantages & Disadvantages
- 58. Code Samples
- 60. Code sample for a Login request <jsp> login.jsp Accept user credentials Login-ajax.js <jsp> validatelogin.jsp JDBC Database 1 2 3 4 5 6 Success / Failure 7 Behind the Scenes – using fire bug