AJAX Use Cases for WSRP

Subbu AllamarajuBEA Systems Inc

WSRP F2F Meeting, May 2006

Agenda

Overview of AJAXUse cases

Common use cases

Implementing using WSRP 1.0

Implementing using WSRP 2.0

Summary

Overview of AJAX

Asynchronous JavaScript And XMLInteraction Model

Requests and responses through an XMLHttpRequest object in the browser

Typically asynchronous

Request triggered by browser events or user interactionsOn various browser events, such as page reload, timer, control navigation etc.

Explicitly on user interactions, such as link clicks, form submissions etc.

Requests sent over HTTPGET or POST requests

Response may be markup or data

Response handed over to a JavaScript callbackCallback processes data

Example

var request = ...; // Browser specific request.onreadystatechange = function() { if(request.readyState == 4) { if(request.status == 200) { var response = request.responseXML; // Process response } } }; request.open('GET', url, true); request.send(null);

Requests typically cause partial page changesBrowser does some level of aggregation

Browser aggregates data/markup returned via XMLHttpRequest

State encoded in other parts of the page may become stale

Standardization

Not currently a standardIE uses an ActiveX control (IE7 supports natively)

Other browsers provide native implementations

Not all implementations support the same set of attributes and callback handlers

W3C Web API WG http://www.w3.org/2006/webapi/

Currently focused on providing a standard interfaceMainly concerned about standardizing commonalities among current implementations in browsers

Use Cases

UC1: Fetch Data

Portlet embeds JavaScript in the markupSubmits a GET request to the serverServer returns an XML document containing the list of city codesPortlet updates the UI with the data

User navigates to a drop-down list, and the browser fetches a list of city codes from the server

UC1 with WSRP

Portlet embeds JavaScript in its markupPortlet uses a resource URL to submit data to the server

The use case warrants render URLsCan not use render URLs – render URLs may cause full page refresh

Resource URL must be rewritten by Consumer

To serve AJAX requests[WSRP 1.0] Portlet provides an HTTP end point to serve AJAX requests

Not part of the same portlet

Does not have access to the portlet’s context or state

[WSRP 2.0] Portlet uses getResource to server AJAX requestsHas access to the portlet’s context and state

UC2: Update Portlet Markup

Portlet embeds JavaScript in the markupSubmits a GET request to the serverServer returns HTML markup

Markup may contain rewritable content such as links and prefixes

Links in the markup do not use AJAX, and may cause full page downloads

Portlet updates the UI with the markup

User enters country code in a form, and the browser expands the form to fill in more details. Links in the expanded markup do not use AJAX.

UC2 with WSRP

Portlet uses a resource URL to submit data to the serverTo serve AJAX requests

[WSRP 1.0] Portlet provides an HTTP end point to serve AJAX requests

Encodes WSRP rewrite tokens in the return markup

Generated links can be action, render or resource URLs

Consumer proxy rewrites the markup

Rewritten markup will not include current state of the portlet – WSRP 1.0 does not require this

Activated links may cause loss of state

[WSRP 2.0] Portlet uses getResource to serve AJAX requestsPortlet can generate URLs and prefixes

Use producer writing or consumer rewriting

Generated links can be action, render or resource URLs

Rewritten links may include current state of the portlet

UC3: Update Portlet Markup

Portlet embeds JavaScript in the markupSubmits a GET request to the serverServer returns HTML markup

Markup may contain rewritable content such as links and prefixes

Portlet updates the UI with the markupUser continues to interact with the new markup.

Those interactions use AJAX.

User enters country code in a form, and the browser expands the form to fill country-specific markup with links. Links in this markup use AJAX to further update markup/data in the browser.

UC3 with WSRP

Portlet must use a resource URL to submit data to the serverTo serve AJAX requests

[WSRP 1.0] Portlet provides an HTTP end point to serve AJAX requests

Encodes WSRP rewrite tokens in the return markup

Generated links must all be resource URLs

Consumer proxy rewrites the markup

[WSRP 2.0] Portlet uses getResource to serve AJAX requestsPortlet can generate URLs and prefixes

Use producer writing or consumer rewriting

Generated links must all be resource URLs

UC4: Submit Data Using AJAX

Portlet embeds JavaScript in the markupSubmits a POST request to the serverServer returns HTML markup

Markup contain rewritable content such as links and prefixes

Form submissions cause further AJAX requests

Portlet updates the UI with the markup

Portlet requires a user to enter data in several forms in sequence. Each form submission uses AJAX to submit the request, and fetch the next form.

UC4 with WSRP

Portlet must use resource URLs for form submissionsUse case warrants interaction URLs – but interaction URLs may cause full page refresh.

Can not use action URLsURLs can not include interaction state

Portlet must encode interaction state into hidden form fields or the resource ID

To serve AJAX requests[WSRP 1.0] Portlet provides an HTTP end point to process form submissions

Generated links must all be resource URLs

[WSRP 2.0] Portlet uses getResource to serve AJAX requests

Portlet can not process the request as a blocking interactionPortlet can not ask for mode/state changes

Portlet can not update its own navigational state

Portlet can not update shared state

Portlet can fire/consume events

UC5: Page NavigationPortlet uses AJAX to process several forms. Each form submission uses AJAX to submit the request, and fetch the next form.Portlet provides links to navigate to previous form and next form.

A flavor of UC5Links to previous and next forms include state to render/fetch the previous or next form

UC5 and WSRP

Use case warrants for using navigationalState to manage portlet’s view state

Navigational state encoded outside the updated markup may become stale

Portlet can not use navigationalState to manage its current view

Portlet may lose its current state When the user interacts with another portlet on the same page

When the user refreshes the page

Portlet must manage its own stateUsing cookies

Cookies set via resources may not reach the browser. When reached, cookies may not be valid

Using sessionsResource end point (WSRP 1.0) or the portlet (WSRP 2.0) may store the state in the session

Disrupts consumer managed caching

UC6: Modal PopupUser clicks on a balance transfer link in a banking portal. Browser opens a modal dialog simulated via HTML div tags and JavaScript.User selects accounts, and does a balance transfer.Upon completing the transfer, browser closes the dialog, and updates account summary portlet.

Combines various flavors of previous use casesUses events to cause account summary updates.

Events can not be raised during resource requests

Not supported by WSRP 1.0 and WSRP 2.0.

UC7: Online CollaborationPortlet wants to provide a collaborative quick note system.Portlet uses a combination of polling and server push using long-lived connections.

The producer or the portlet provides for such collaboration.Portlet uses AJAX and/or remote scripting to deliver data to the browserPortlet can use a HTTP resource end point or getResource to return data

Summary

WSRP 1.0 Limitations

AJAX requests can not participate in the two-phase life cycle

Bypasses normal consumer-producer interactions

Must use resource URLs to serve AJAX requestsProducer must deploy an HTTP end point for AJAX requestsPortlets don’t receive portlet’s context or state

Such info may be managed within a session on the ProducerPortlet can explicitly set its state and context in the request, and encode a key to that state in resource URLs.

Portlets must use WSRP rewrite tags for rewriting return markupPortlets cannot make changes that are otherwise possible during performBlockingInteraction.

WSRP 2.0 Limitations

AJAX requests can not participate in the three-phase life cyclePortlets must use resource URLs to serve AJAX requests

Deploy a HTTP end point in the WSRP 1.0 style

Or use getResource operation

Portlets receive portlet’s context or state, but may have to manage additional navigation state in a sessionPortlets cannot make changes that are otherwise possible during performBlockingInteraction and handleEvents

Summary

Portlet need to embed JavaScript in its markupPotential duplication of the script in each markup fragment

Resource URLs address only a few use casesConsumer and Producer must fully participate in serving AJAX requests

Be able to support state changes

Be able to participate in the three-phase life cycle

Be able to update state stored in URLs in the browser

Responses be cacheable