Reverse Ajax Libraries, techniques and support in 2014

1. Reverse Ajax
Techniques, libraries and support in 2014

2. Ajax (Asynchronous JavaScript and XML)
• Group of interrelated Web development techniques used on the client-side to
create asynchronous Web applications.
• With Ajax, Web applications can send data to, and retrieve data from a server
asynchronously (in the background) without the need for a page reload.
• It is a browser feature accessible to a web page through the JavaScript.
• Though the name includes XML, nearly anything can be transfered with an Ajax
request.
• The most commonly used data is JSON, which is close to JavaScript syntax and
consumes less bandwidth.
• Ajax requests are stateless by default, and can only be opened from the client to
the server.

3. Reverse Ajax
• Reverse Ajax is essentially a concept for sending data from the server to the
client.
• It can be simulated with a repeated Ajax request from client – simple polling,
piggyback polling.
• Comet – umbrella term for various techniques for Reverse Ajax
• Coined by Alex Russel in 2006.
• It can be simulated with a long-held Ajax request from client .
• Server can send events to the client without the client specifically requesting it.
• Also known as Ajax Push, Two-way-web, HTTP Streaming, and HTTP server push,
• First implementations appeared in 2000 with Pushlets and LightStreamer media
server

4. Reverse Ajax
Basic polling techniques

5. Reverse Ajax – simple polling

6. Reverse Ajax – simple polling
• Basic Ajax with regular interval requests (every few seconds).
• To get the server events as soon as possible, the polling interval (time between
requests) must be as low as possible.
• If interval is reduced, the client will issue many more requests, many of which
won't return any useful data, and will consume bandwidth and processing
resources for nothing.
• Advantages: It's really easy to implement and does not require any special
features on the server side. It also works in all browsers.
• Disadvantages: This method is rarely employed because it does not scale at all.
Example: 100 clients each issuing polling requests for 2 seconds, where 30% of
the requests returns no data.

7. Reverse Ajax – piggyback polling

8. Reverse Ajax – piggyback polling
• Piggyback polling removes all redundant requests (which return no data)
• There is no interval
• Requests are sent when the client needs to send a request to the server
• The difference lies in the response, which is split into two parts:
 the response for the requested data
 server events, if any
• Advantages: Less resource consumption. Works in all browsers, does not
require special features on the server side.
• Disadvantages: You have no clue when the events accumulated on the server
side will be delivered to the client.

9. Reverse Ajax – Comet

10. Reverse Ajax – Comet
• Request is sent to the server and kept alive for a long time, until a time-out or
a server event occurs.
• When the request is completed, another long-lived Ajax request is sent to wait
for other server events.
• With Comet, web servers can send the data to the client without having to
explicitly request it.
• The server can push events on the clients by immediately committing
(completing) the responses, or it can accumulate them and send bursts.
• Special features are required on the server side to handle all of these long-lived
requests (Servlet 3.0 or Websockets)
• Implementations of Comet can be separated into two types: those using
streaming mode, and those using long polling.

11. Reverse Ajax
Comet - Streaming Mode

12. Comet – Streaming mode
• In streaming mode, one persistent connection is opened
• It requires a way to separate the different responses coming through the same
connection on the client side.
• Technically speaking, two common techniques for streaming include:
 Forever Iframes (hidden Iframes) or
 Multi-part feature of the XMLHttpRequest object used to create Ajax
requests in JavaScript.

13. Comet – Forever Iframes
• Forever Iframes technique involves a hidden Iframe tag put in the page with its
src attribute pointing to the servlet path returning server events.
• Each time an event is received, the servlet writes and flushes a new script tag
with the JavaScript code inside.
• The iframe content will be appended with this script tag that will get executed.
• Advantages: Simple to implement, and it works in all browsers supporting
iframes.
• Disadvantages: There is no way to implement reliable error handling or to
track the state of the connection, because all connection and data are handled
by the browser through HTML tags. You don't know when the connection is
broken on either side.

14. Comet – Multi-part XMLHttpRequest
• This technique uses the multi-part flag supported by some browsers (Chrome,
Firefox) on the XMLHttpRequest object.
• An Ajax request is sent and kept open on the server side. Each time an event
comes, a multi-part response is written through the same connection
• On the server side it is required to set up the multi-part request, suspend the
connection and return responses asynchronously (Servlet 3.0)
• Advantages: Only one persistent connection is opened. This is the Comet
technique that saves the most bandwidth usage.
• Disadvantages: The multi-part flag is not supported by all browsers. Some
widely used libraries, such as CometD in Java, reported issues in buffering. For
example, chunks of data (multi-parts) may be buffered and sent only when the
connection is completed or the buffer is full, which can create higher latency
than expected.

15. Reverse Ajax
Comet - HTTP long polling

16. Comet - HTTP long polling
• The long polling mode involves techniques that use repeated long-held client
requests.
• When client initiates a connection, it is kept open by the server, and as soon as
an event occurs, the response is committed and the connection is closed.
• New long-polling connection is reopened immediately by the client waiting for
the new events to arrive.
• You can implement HTTP long polling by using
 Script tags
 XMLHttpRequest object.

17. Comet – Script tags
• Similar to the iframe technique, the goal is to append a script tag in your page
to get the script executed.
• The server will: suspend the connection until an event occurs, send the script
content back to the browser, and then reopen another script tag to get the next
events.
• Advantages: Because it's based on HTML tags, this technique is easy to
implement and works across domains (by default, XMLHttpRequest does not
allow requests on other domains or sub-domains).
• Disadvantages: Similar to the iframe technique, error handling is missing, and
you can't have a state or the ability to interrupt a connection.

18. Comet - XMLHttpRequest long polling
• Recommended method to implement Comet
• Client opens an Ajax request to the server and waits for the response.
• The server requires specific features on the server side to allow the request to
be suspended (Servlet 3.0).
• As soon as an event occurs, the server sends back the response in the
suspended request and closes it.
• The client then consumes the response and opens a new long-lived Ajax
request to the server.
• On the back end, the code also uses the Servlet 3 API to suspend the request, as
in HTTP streaming, but without multi-part handling.

19. Comet - XMLHttpRequest long polling
• Advantages: It's easy to implement on the client side with a good error-
handling system and timeout management. This reliable technique also
allows reusing connections on the server side, since connections are not
persistent (a good thing, when you have a lot of clients on your application). It
also works on all browsers; you only make use of the XMLHttpRequest object
by issuing a simple Ajax request.
• Disadvantages: There is no main disadvantage compared to other techniques.
But, like all techniques we've discussed, this one still relies on a stateless HTTP
connection, which requires special features on the server side to be able to
temporarily suspend it.
• Several well-known libraries implement Comet in Java and Javascript:
 DWR
 CometD
 Atmosphere

20. Reverse Ajax
Libraries

21. DWR
• DWR – direct web remoting
• Well known library for integration between client-side JS and server-side Java code
• Reverse Ajax Modes
 Early Closing Mode (default, low performance for large number of clients)
 Full Streaming Mode (Not available to IE users)
 Long Polling (best option)
 Piggyback mode
• Advantages: Highly configurable and stable library.
• Disadvantages: Development is slow, Websocket support is uncertain.

22. Atmosphere
• Atmosphere is a Java technology framework that provides a common API for
using the Comet and WebSocket features of many of the web servers, including
Tomcat, Jetty, GlassFish, Weblogic, Grizzly, JBossWeb, JBoss, and Resin.
• Atmosphere has been around for more than two years, and it is still in active
development. It is used in large web applications such as JIRA
• Advantages: Atmosphere's strength remains on the server side: it provides a
standardized API that covers all of the different solutions and ways to
communicate with WebSockets or Comet.
• Disadvantages: Atmosphere does not use a protocol between the client and
server, like DWR and CometD.

23. CometD – our choice
• CometD framework is an event-driven communication solution based on HTTP.
It provides a Java server part and a Java client part, plus JavaScript client
libraries based upon jQuery and Dojo.
• It has been around for several years. It supports WebSockets. Reverse Ajax
Mode is implemented with XMLHttpRequest long-polling.
• All of the components communicate through a bus to send notifications and
receive events. All communication is asynchronous.
• Advantages: CometD offers a complete solution, from client and server side, and
also from a standalone Java client to a server. The framework is well-
documented and is easy to use. It supports many features - reconnection,
reliable timeout detection, error handling, low-latency communication ...
• Disadvantages: CometD currently does not support any Servlet 2.5 containers
other than Jetty for Comet (Tomcat), and it does not support Glassfish/Grizzly
WebSocket

24. Websockets
Overview

25. Websockets
• WebSockets, which comes from HTML5, is a new technique for bidirectional,
full-duplex communication.
• The connection is opened through a HTTP Upgrade request (HTTP request with
special headers), called a WebSockets handshake.
• The connection is then kept alive, and data is exchanged between both sides
directly.
• Best option for bidirectional communication, future standard
• Supported in Chrome 14+, Firefox 6+, Safari 6+, IE 10+
• Supported on Tomcat 8, JBoss 8, Glassfish 3, Jetty 7
• Supported in CometD along with long polling.

26. References
IBM Developerworks: Reverse Ajax series
http://www.ibm.com/developerworks/library/wa-reverseajax1/
Javabeat: An introduction to Comet and Reverse Ajax
http://www.javabeat.net/introduction-to-comet-and-reverse-ajax/
DWR: Reverse Ajax
http://directwebremoting.org/dwr/documentation/reverse-ajax/
CometD:
http://docs.cometd.org/reference/
Atmosphere Framework:
http://async-io.org/

27. References
Oracle: Asynchronous Notifications with Servlet 3.0
http://www.oracle.com/webfolder/technetwork/tutorials/obe/java/async-
servlet/async-servlets.html
Javabeat: Asynchronous Servlet
http://www.javabeat.net/asynchronous-servlet-servlet-3-0/
Google groups: CometD users
https://groups.google.com/forum/#!topic/cometd-users
Wikipedia: Comet
http://en.wikipedia.org/wiki/Comet_(programming)#Implementations