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 browserTypically 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 dataAccessed as XML or text

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 across current implementations in browsers

Alternatives

Remote scripting via hidden IFRAMEs is a popular alternative

For GET requestsCreate a URL with query params,

Create a hidden IFRAME

Set the URL as the src of an IFRAME

For POST requestsCreate a hidden IFRAME with a FORM

Submit the FORM through JavaScript

Server can return script as well as data

Works well on legacy browsers

Other alternativesFlash, Java applets, Active X etc.

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

Can not use render URLs – render URLs may cause full page refreshResource 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 – may have to embed all the context required within resource URLs

[WSRP 2.0] Portlet uses getResource to serve 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 requestsEncodes WSRP rewrite tokens in the return markup

Generated links can be action, render or resource URLs

Consumer proxy rewrites the markup

Consumer proxy will have to rewrite action/render URLs to cause regular interactions with the Consumer’s aggregated page

Do Consumers support this?

[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 can be used to interact with the consumer’s aggregated pagte

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

Embeds WSRP rewrite tokens in the return markup

Generated links must all be resource URLs

Consumer proxy rewrites the markup

Any state encoded in resource URLs must be copied to new URLs created

[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 URLs

URLs can not include interaction state

Portlet must encode interaction state into hidden form fields or the resource URL 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 requestsPortlet can not process the request as a blocking interaction

Portlet 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

Not possible with resource URLsBut when encoded so, 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 per RFC 2965 rules

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

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 getting return markup to be rewrittenPortlets 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

Requirements 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

Some Common Work-arounds

Use a new window statePortlets add a new window state to URLs and use that to submit AJAX requests

Use a special URL parameterPortlets add a new URL parameter to indicate to Consumers that the response must not be aggregated

LimitationsNew window state applies to the entire portlet’s markup – not just to a part of the portlet’s markup

Consumers can’t push their state to the browserConsumers won’t be able to update state stored in the browser (e.g. in URLs) outside the portlet’s markup

Consumers may be able to process events, but can’t update other portlets’ markup without a further page refresh or polling