RIA and Ajax

Introduction to RIA and AJAX Created by - Schubert [email_address]

Agenda

RIA (Rich Internet Applications)

Introduction

Web 2.0

RIA frameworks and toolkits

Web Orientation

HTML – DOM – CSS

HTTP

XML / JSON

Ajax

Introduction

The XMLHTTPRequest object

Decoding a simple AJAX application

DOM Manipulation

Basic high-level Ajax architecture

Ajax Design Patterns

Ajax Frameworks and toolkits

Security and performance related aspects

Ajax - Advantages and Disadvantages

Code samples

Requirements

Login validation example

Agenda – cont’d

RIA – Rich Internet Applications

Introduction - i

Page Metaphor

What exactly is Page Metaphor ?

The concern on the time lag during a ‘page – turn’

Negative brand experience

Premature use of browser options such as back or refresh

A user’s clicking again, resulting in further delay

A user’s giving up and abandoning calls to customer service, entailing costs for the company providing the Web application

The limitations of the Page Metaphor

Difficult to manage the display of information in different areas on a page without refreshing the entire page.

Web applications offer limited capabilities for tracking user interactions.

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

Introduction - iii The need for smart clients

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

Web 2.0 - i

Where was Web 1.0 ?

A change in mindset – “Same tools + New ideas”

mp3.com Britannica Online personal websites page views publishing content management systems stickiness WEB 1.0 Napster Wikipedia blogging cost per click participation wikis syndication WEB 2.0

Web 2.0 - ii By products

RIA Frameworks and toolkits

Java FX

ADOBE – AIR

Eclipse – RCP

Microsoft SilverLight

OpenLaszlo

Web Orientation

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 

CSS CSS Color – Visibility – Positioning - Backgrounds

HTTP - i OSI (Open Systems Interconnection) – Reference model Application Presentation Session Transport Network Datalink Physical HTTP Headers Methods Status codes

HTTP - ii HTTP headers Request Headers Response Headers

Accept

Accept-Language

Accept-Encoding

Content-Type

Date

User-Agent

Cache-Control

Content-Length

Content-Disposition

Content-MD5

Content-Type

Expires

Last-Modified

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

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

XML / JSON - i

XML

What is XML?

DTD’s, Schemas, Namespaces

XML

Transformation

Security

The Java flavor – (JAXP, JAXB)

JSON

What is JSON?

Use – (Simple Data structures and arrays)

Advantages

Disadvantages

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

AJAX

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

Introduction - i AJAX interactions – classical web model

Introduction - i AJAX interactions – the ajax model

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 .

The XMLHTTPRequest object - ii Dependencies

DOM – The XHR object spec uses features defined in the DOM specification

HTTP – Support for the GET, POST, HEAD, PUT, DELETE, OPTIONS

XML – Support for XML and XMLNamespaces

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

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.

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

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)

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

The XMLHTTPRequest object - viii XMLHttpRequest Level 2

Progress Events

error, abort, load, loadStart, progress, etc.

Cross site requests

Handling of byte streams

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

AJAX code – decoded - ii function stateChanged() { if (xmlHttp.readyState == 4) { if (req.status == 200) { document.getElementById(“validHint").innerHTML = xmlHttp.responseText; } } } Event handler code

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

AJAX code – decoded - iv Code overview

AJAX code – decoded - v UML overview

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

Basic high-level ajax architecture

Design Patterns

Foundation Technology Patterns

Basic Ajax architecture

How much Richness?

What are the browser requirements?

Latency and throughput required

Display Manipulation – Interacting with the DOM model

Extension Plugins

Programming patterns

Web Services and data formats [REST / RPC / JSON / XML / Strings / HTML]

Browser server dialog [Call tracking / Periodic refresh]

Functionality and usability patterns

Content widgets

Page architecture [Drag-Drop, etc.]

Visual Effects

Frameworks and Toolkits

Frameworks and Toolkits - i Google Web Toolkit

Frameworks and Toolkits - ii YUI – Yahoo User Interface

Frameworks and Toolkits - iii jMaki

Frameworks and Toolkits - iv DEMO Google Web Toolkit (GWT) Yahoo User Interface (YUI) extJS

Ajax – Security and Performance related aspects

Security issues - i JavaScript Hijacking JavaScript Hijacking allows an unauthorized attacker to read confidential data from a vulnerable application using a technique similar to the one commonly used to create mash-ups. Traditional Web applications are not vulnerable to JavaScript Hijacking because they do not use JavaScript as a data transport mechanism.

JavaScript Hijacking allows an attacker to bypass the Same Origin Policy in the case that a Web application uses JavaScript to communicate confidential information.

The loophole in the Same Origin Policy is that it allows JavaScript from any website to be included and executed in the context of any other website.

Even though a malicious site cannot directly examine any data loaded from a vulnerable site on the client, it can still take advantage of this loophole by setting up an environment that allows it to witness the execution of the JavaScript and any relevant side effects it may have.

JSON arrays are directly vulnerable to JS hijacking as it can stand on their own as a valid JS statements. JS hijacks work on the <script> tag.

Security issues - ii Precautions against JavaScript Hijacking

Decline malicious requests

Prevent direct execution of the JavaScript response

The best way to defend against JavaScript Hijacking is to do adopt both defensive tactics.

Security issues - iii Declining Malicious requests

Every request should include a parameter that is hard for an attacker to guess.

One approach is to add the session cookie to the request as a parameter. When the server receives such a request, it can check to be certain the session cookie matches the value in the request parameter. Malicious code does not have access to the session cookie (cookies are also subject to the Same Origin Policy), so there is no easy way for the attacker to craft a request that will pass this test.

Some frameworks run only on the client side. In other words, they are written entirely in JavaScript and have no knowledge about the workings of the server. This implies that they do not know the name of the session cookie. Even without knowing the name of the session cookie, they can participate in a cookie-based defense by adding all of the cookies to each request to the server. The following JavaScript fragment outlines this "blind client" strategy:

var httpRequest = new XMLHttpRequest();

var cookies="cookies="+escape(document.cookie);

httpRequest.open('POST', url, true);

httpRequest.send(cookies);

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.

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.

Performance issues - i

Array related operations are expensive on all browsers.

HTML DOM related operations are more expensive than all other operations.

FireFox specific issues

“ eval” of object or function: These two operations take Safari 9.4us and 22.7us, IE7 172us and 94us. But they take FireFox 546us and 749us.

Object creation is more expensive compared to any other browser.

IE specific issues : Mainly string manipulation features

Performance issues - ii What would we like to monitor ?

The number of HTTP requests an application makes

Track I/O disk issues

Analyze network traffic

Discover excessive calls

Reduce memory consumption

Solve other performance problems

Apache Bench : Simulates a load on a server

Tsung : Tests multi-protocol loads

Bonnie++ : Tracks down I/O disk issues

Wireshark : Analyzes network traffic

Comet server application tools : Used for longer-lived connections, higher volumes of concurrency, lower latency, and lower server load

FireFox plugins (e.g. FireBug)

Ajax – Advantages & Disadvantages

Advantages

Makes use of existing technologies which are proven.

Support for mature tools and processes.

Acceptance by industry leaders.

Killer apps already available, hence technology buy-in appeals to most organizations.

Reduction in bandwidth and load time.

Allows for a richer user experience as Ajax has proved to provide the glue required for Web 2.0 application models.

Existing websites can easily scale up to be ajax driven with little effort.

Platform neutral.

Disadvantages

The need for Java script to execute !

The ‘back button’ mentality – need for additional care.

Dynamic pages driven by an ajax architecture backed mash-up style make it difficult to bookmark a particular state of the application.

Search engine indexing issues with dynamic data. – How can engines find dynamic content ?

Current policies enforce using a single domain which may act as a deterrent to mash-up based applications which have data and content on various domain sites.

No widely adopted best practice standards to test Ajax apps. Testing tools do not fully understand the Ajax model (even/data).

Vulnerable to attack if not fully tested.

Code Samples

Requirements

Servlet Container

Database

JDBC Driver for the dB used.

Editor

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

Disclaimer

No Representation

This presentation has been compiled in good faith and no representation of either materials / references are made or warranty given (either express or implied) as to the completeness or accuracy of the information it contains.