Reverse Ajax, Part 1th: Introduction to Comet

English Original: Reverse Ajax, part 1:introduction to Comet

Web Development has changed a lot in the last few years. Today, we want to be able to access applications quickly and dynamically through the web. In this new article series, we learn how to use reverse Ajax (Reverse Ajax) technology to develop event-driven Web applications for a better user experience. The client's example uses the jquery JavaScript library, in this first article, we explore different reverse Ajax techniques, using downloadable examples to learn about comet using the stream (streaming) method and the long polling method.

　　Objective

Web development has made a lot of progress in the last few years, and we are far more likely to link static pages together, which can cause the browser to refresh and wait for the page to load. What is needed now is a fully dynamic application that can be accessed via the web, which often needs to be as fast as possible, providing near-real-time components. In this new five-part article series, we learn how to use reverse Ajax (Reverse Ajax) technology to develop event-driven Web applications.

In this first article, we want to learn about reverse Ajax, polling (polling), streaming (streaming), comet, and long polling (long polling), learn how to implement different reverse Ajax communication technologies, and explore the pros and cons of each approach. You can download the corresponding source code for the example in this article.

　　Ajax, reverse Ajax, and WebSocket

Asynchronous JavaScript and XML (asynchronous JavaScript and Xml,ajax), a browser feature that can be accessed via JavaScript, It allows the script to send an HTTP request to the behind-the-scenes web site without reloading the page. Ajax has been around for more than a decade, and although its name contains XML, you can almost send anything in an AJAX request, the most commonly used data is JSON, which is close to JavaScript syntax and consumes less bandwidth. Listing 1 shows an example of an AJAX request to retrieve the name of a place by its zip code. Listing 1. Ajax Request Examples

[JavaScript]View Plaincopy

1. var url =' http://www.geonames.org/postalCodeLookupJSON?postalcode= '
2. + $ (' #postalCode '). Val () +' &country= '
3. + $ (' #country '). Val () +' &callback=? ';
4. $.getjson (URL, function (data) {
5. $ (' #placeName '). Val (Data.postalcodes[0].placename);
6. });

In the source code that is available for download in this article, you can see the role of this example in listing1.html.

Reverse Ajax (Reverse Ajax) is essentially the concept of being able to send data from the server side to the client. In a standard HTTP AJAX request, the data is sent to the server side, and reverse Ajax can be used in some specific way to simulate an AJAX request, which is discussed in this article, so that the server can send events (low latency traffic) to the client as quickly as possible.

WebSocket technology comes from HTML5, a recently emerging technology that many browsers already support (Firefox, Google Chrome, Safari, and so on). WebSocket enables bidirectional, full-duplex communication channels, which open the connection through some kind of HTTP request called the WebSocket handshake, and use some special headers. The connection remains active, and you can use JavaScript to write and receive data, just as if you were using an original TCP socket interface. WebSocket will talk about it in the second part of this article series.

　　Reverse Ajax Technology

The purpose of reverse Ajax is to allow server-side push of information to clients. The AJAX request is stateless by default and can only be requested from the client to the server side. You can bypass this limitation by using technology to simulate reactive communication between the server side and the client.

　　HTTP Polling and Jsonp polling

Polling (polling) involves making a request from the client to the server to get some data, which is obviously a purely Ajax HTTP request. In order to get server-side events as quickly as possible, the polling interval (the time between two requests) must be as small as possible. But there is one drawback: if the interval is reduced, the client browser makes more requests, and many of these requests do not return any useful data, which in vain wastes bandwidth and processing resources.

The timeline in Figure 1 illustrates that some polling requests are made by the client, but no information is returned, and the client must wait until the next poll to get the two server-side events received.

Figure 1. Reverse Ajax using HTTP polling

Jsonp polling is basically the same as HTTP polling, but the difference is that JSONP can issue cross-domain requests (not requests within your domain). Listing 1 uses JSONP to get a place name by postal code, and JSONP requests are usually identified by its callback parameters and return content, which are executable JavaScript code.

To implement polling in JavaScript, you can use SetInterval to make periodic AJAX requests, as shown in Listing 2:

Listing 2. JavaScript polling

[JavaScript]View Plaincopy

1. SetInterval (function () {
2. $.getjson (' events ', function (events) {
3. Console.log (events);
4. });
5. }, 2000);

The polling demo in the source code gives the bandwidth that the polling method consumes, with a small interval, but you can see that some requests do not return events, and listing 3 shows the output of this poll example.

Listing 3. The output of the polling demo example

[HTML]View Plaincopy

1. [Client] checking for events ...
2. [Client] No event
3. [Client] checking for events ...
4. [Client]2 Events
5. [Event] At Sun June 0515:17:14 EDT 2011
6. [Event] At Sun June 0515:17:14 EDT 2011
7. [Client] checking for events ...
8. [Client]1 Events
9. [Event] At Sun June 0515:17:16 EDT 2011

Advantages and disadvantages of polling implemented with JavaScript:

1. Advantages: It is easy to implement, does not require any server-side specific features, and can work on all browsers.

2. Cons: This method is rarely used because it is completely non-scalable. Imagine the loss of bandwidth and the amount of resources in cases where 100 clients each issued a 2-second polling request, in which case 30% of the requests did not return data.

　　Piggyback

A piggyback poll (piggyback polling) is a smarter approach than polling because it removes all non-essential requests (those that do not return data). There is no time interval, and the client sends requests to the server when needed. The difference is that in the part of the response, the response is divided into two parts: the response to the request data and the response to the server event, if any part of it occurs. Figure 2 shows an example.

Figure 2. Reverse Ajax using piggyback polling

When implementing piggyback technology, it is common for all AJAX requests on the server side to return a mixed response, as shown in Listing 4 below for an example of an implementation in the download of the article.

Listing 4. Piggyback code example

[JavaScript]View Plaincopy

1. $ (' #submit '). Click (function () {
2. $.post (' ajax ', function (data) {
3. 　　　　var valid = Data.formvalid;
4. 　　　　Working with validation results
5. 　　　　The other part of the response (event) is then processed
6. Processevents (data.events);
7. });
8. });

Listing 5 shows some of the piggyback output.

Listing 5. Piggyback output Example

[HTML]View Plaincopy

1. [Client] checking for events ...
2. [Server] form valid? True
3. [Client]4 Events
4. [Event] At Sun June 0516:08:32 EDT 2011
5. [Event] At Sun June 0516:08:34 EDT 2011
6. [Event] At Sun June 0516:08:34 EDT 2011
7. [Event] At Sun June 0516:08:37 EDT 2011

You can see the results of the form validation and the events attached to the response, as well as the pros and cons of this approach:

1. Pros: There is no request to return data because the client controls when the request is sent and consumes less resources. This method is also available on all browsers and does not require special features on the server side.

2. Cons: When events that accumulate on the server side need to be routed to the client, you do not know at all, because this requires a client behavior to request them.

　　Comet

Reverse Ajax using polling or piggyback is very limited: it is not scalable and does not provide low-latency communication (as soon as the event arrives at the server side, they reach the browser at the fastest speed possible). Comet is a Web application model in which requests are sent to the server side and maintain a long lifetime until a timeout or server-side event occurs. After the request is complete, another long-lived Ajax request is sent to wait for another server-side event. With comet, the Web server can send data to the client without explicit requests.

One of the great advantages of comet is that each client always has a communication link open to the server side. The server side can push events to the client by committing (completing) the response as soon as the event arrives, or it can even accumulate and then continue sending. Because requests remain open for long periods of time, the server side needs special features to handle all these long-lived requests. Figure 3 shows an example. (the 2nd chapter of this article series explains server-side constraints in more detail).

Figure 3. Using Comet's reverse Ajax

The implementation of comet can be divided into two categories: those that use the stream (streaming) and those that use long polling (longer polling).

　　Comet using the HTTP stream

In the flow (streaming) mode, a persistent connection is opened. There will only be one long lifetime request (# 3 in Figure #), because each event that arrives on the server side is sent through the same connection. Therefore, the client needs to have a way to separate the different responses sent over the same connection. Technically, two common streaming techniques include the Forever IFrame (hidden iframe), or the multipart (multi-part) feature of the XMLHttpRequest object that is used to create Ajax requests in JavaScript.

　　Forever Iframe

The Forever iframe (persistent iframe) technique involves a hidden iframe tag placed on a page that has the SRC attribute pointing to the servlet path that returns the server-side event. Each time the event arrives, the servlet writes and refreshes a new script tag with JavaScript code inside it, and the contents of the IFRAME are appended to the script tag, and the contents of the tag are executed.

1. Pros: Simple to implement, available on all browsers that support IFRAME.

2. Cons: There is no way to implement reliable error handling or to track the status of a connection, because all the connections and data are handled by the browser through HTML tags, so you have no way of knowing when the connection is broken at which end.

MUlti-part XMLHttpRequest

The second technique, more reliable, is the multi-part flag that is supported on XMLHttpRequest objects using certain browsers (such as Firefox). The AJAX request is sent to the server side and remains open, and each time an event arrives, a multipart response is written through the same connection, listing 6 shows an example.

Listing 6. Sample JavaScript code to set multi-part XMLHttpRequest

[JavaScript]View Plaincopy

1. var xhr = $.ajaxsettings.xhr ();
2. Xhr.multipart =true;
3. Xhr.open (' GET ', ' Ajax ', true);
4. Xhr.onreadystatechange = function () {
5. 　　if (xhr.readystate = = 4) {
6. Processevents ($.parsejson (Xhr.responsetext));
7. }
8. };
9. Xhr.send (null);

On the server side, things are slightly more complicated. First you have to set up a multipart request and then suspend the connection. Listing 7 shows how to suspend an HTTP stream request. (This series of 3rd chapters talk about these APIs in more detail.) ）

Listing 7. Use the Servlet 3 API to suspend an HTTP stream request in a servlet

[Java]View Plaincopy

2. protected void Doget (HttpServletRequest req, HttpServletResponse resp)
4. Throws Servletexception, IOException {
6. 　　Start pending on request
8. Asynccontext Asynccontext = Req.startasync ();
10. Asynccontext.settimeout (0);
14. 　　To send back a multipart delimiter to the client
16. Resp.setcontenttype ("multipart/x-mixed-replace;boundary=\" "
18. + boundary +"\" ");
20. Resp.setheader ("Connection", "keep-alive");
22. Resp.getoutputstream (). Print ("--" + boundary);
24. Resp.flushbuffer ();
28. 　　Put the async context in the list to be used in the future
30. Asynccontexts.offer (Asynccontext);
32. }

Now, each time an event occurs, you can traverse all the pending connections and write data to them, as shown in Listing 8:

Listing 8. Using the Servlet 3 API to send events to a multipart request that is pending

[Java]View Plaincopy

1. for  (asynccontext asynccontext  : asynccontexts)  {  
2. httpservletresponse peer =  (　　HttpServletResponse)   
3. Asynccontext.getresponse ();   
4. Peer.getoutputstream (). println (
5. Peer.getoutputstream (). println ();   
6. Peer.getoutputstream (). println ( span class= "keyword" >new jsonarray ()   
7. put (new date ()). ToString ());   
8. Peer.getoutputstream (). println (
9. Peer.flushbuffer ();   
10. }  

The sections in the Comet-straming folder of the downloadable files in this article describe the HTTP stream, and when you run the example and open the home page, you will see that as soon as the event arrives on the server side, it will appear on the page almost immediately, although it is not synchronized. And, if you open the Firebug console, you can see that only one Ajax request is open. If you look further down, you will see that the JSON response is attached to the Response tab, which is shown in 4:

Figure 4. Firebug view of HTTP stream requests

As a usual practice, there are some advantages and disadvantages:

1. Pros: Only one persistent connection is turned on, which is the comet technology that saves most of the bandwidth utilization.

2. Cons: Not all browsers support the multi-part flag. Some widely used libraries, such as Java-implemented cometd, are reported to have problems with Buffering. For example, some data blocks (multiple parts) may be buffered and then sent only if the connection is complete or the buffer is full, which can cause a higher latency than expected.

　　Using HTTP long polling for comet

The long polling mode involves the technique of opening a connection. The connection is kept open by the server side, and whenever an event occurs, the response is committed and the connection is closed. Next. A new long polling connection is reopened by the client waiting for the new event to arrive.

You can use the script tag or a simple XMLHttpRequest object to implement HTTP long polling.

　　Script tag

As with the IFRAME, the goal is to attach the script tag to the page for scripting to execute. The server side will: suspend the connection until an event occurs, then send the script content back to the browser and reopen another script tag to get the next event.

1. Pros: Because it is based on HTML tags, all this technology is very easy to implement and can work across domains (by default, XMLHttpRequest does not allow requests to other domains or subdomains).

2. Cons: Similar to IFRAME technology, error handling is missing, you can not get the status of the connection or the ability to interfere with the connection.

　　XMLHttpRequest Long Polling

The second and recommended way to implement comet is to open an AJAX request to the server and wait for the response. The server side needs some specific functionality to allow the request to be suspended, and as soon as an event occurs, the server sends back the response in the pending request and closes the request, exactly as if you had closed the output stream of the servlet response. The client then uses this response and opens a new AJAX request to the server-side for a long lifetime, as shown in Listing 9:

Listing 9. Sample JavaScript code to set up long polling requests

[JavaScript]View Plaincopy

1. function long_polling () {
2. $.getjson (' ajax ', function (events) {
3. Processevents (events);
4. Long_polling ();
5. });
6. }
7. Long_polling ();

In the backend, the code also uses the Servlet 3 API to suspend the request, just as the HTTP stream does, but you don't need all the multipart processing code, listing 10 gives an example.

Listing 10. Suspends a long polling Ajax request

[JavaScript]View Plaincopy

1. protected void Doget (HttpServletRequest req, HttpServletResponse resp)
2. Throws Servletexception, IOException {
3. Asynccontext Asynccontext = Req.startasync ();
4. Asynccontext.settimeout (0);
5. Asynccontexts.offer (Asynccontext);
6. }

When an event is received, simply remove all pending requests and complete them, as shown in Listing 11:

Listing 11. Complete long polling of Ajax requests when an event occurs

[Java]View Plaincopy

1. while (!asynccontexts.isempty ()) {
2. Asynccontext Asynccontext = Asynccontexts.poll ();
3. HttpServletResponse peer = (httpservletresponse)
4. Asynccontext.getresponse ();
5. Peer.getwriter (). Write (
6. 　　　　New Jsonarray (). Put ("at" + New Date ()). ToString ());
7. Peer.setstatus (HTTPSERVLETRESPONSE.SC_OK);
8. Peer.setcontenttype ("Application/json");
9. Asynccontext.complete ();
10. }

In the accompanying download source file, the Comet-long-polling folder contains a long polling sample web app that you can run with the MVN jetty:run command.

1. Advantages: The client can easily implement a good error handling system and timeout management. This reliable technology also allows a roundtrip between connections to the server side, even if the connection is non-persistent (a good thing when your app has a lot of clients). It can be used on all browsers; you just need to make sure that the simple Ajax request that the XMLHttpRequest object is using is sent to you.

2. Cons: Compared to other technologies, there is no significant disadvantage, like all of the technologies we have discussed, the method still relies on stateless HTTP connection, which requires the server side has special features to temporarily suspend the connection.

　　Suggestions

Because all modern browsers support cross-domain resource sharing (cross-origin Resource share,cors) specifications that allow XHR to perform cross-domain requests, script-based and IFRAME-based technologies have become obsolete.

The best way to implement and use comet as a reverse Ajax is through the XMLHttpRequest object, which provides a true connection handle and error handling. Considering that not all browsers support the multi-part flag, and that multiple shunts may experience buffering problems, it is recommended that you choose a comet pattern that uses the XMLHttpRequest object (a simple Ajax request that hangs on the server side) via the HTTP long polling All AJAX-enabled browsers also support this approach.

　　Conclusion

This article provides an entry-level introduction to reverse Ajax technology, the article explores the different ways to implement reverse Ajax communication, and explains the advantages and disadvantages of each implementation. Your specific situation and application needs will affect your choice of the most appropriate method. In general, however, if you want to have the best compromise between low-latency communication, timeouts and error detection, simplicity, and good support for all browsers and platforms, then choose to use the Ajax long polling request comet.

Keep reading the 2nd part of this series: This section will explore the third inverse Ajax technique: WebSocket. Although not all browsers support this technology, WebSocket is certainly a very good reverse Ajax communication Medium, WebSocket eliminates all the limitations associated with the stateless nature of HTTP connections. The 2nd part also addresses server-side constraints brought on by Comet and WebSocket Technologies.

　　Code download

　　Reverse_ajaxpt1_source.zip

　　Resources

　　Learning materials

1. Learn about the content on Wikipedia:

1.1 Ajax
1.2 Reverse Ajax
1.3 Comet
1.4 WebSockets

2. "Exploring Reverse Ajax" (Google Maps. Net Control Blog, August 2006): Get some introductory notes on reverse AJAX technology.

3. "Cross-domain Communications with JSONP, part 1:combine JSONP and JQuery to quickly build powerful mashups" (developerw Orks, February 2009): Learn how to combine the humble cross-domain call technology (JSONP) with a flexible JavaScript library (JQuery) to build some powerful aggregation applications at an astonishing speed.

4. "Cross-origin Resource Sharing (CORS)" Specification (Global, July 2010): Learn more about this mechanism, which allows XHR to perform cross-domain requests.

5. "Build Ajax applications with Ext JS" (DeveloperWorks, July 2008): There is a general understanding of this framework that greatly enhances JavaScript development.

6. "Mastering Ajax, part 2:make asynchronous requests with JavaScript and Ajax" (DeveloperWorks, January 2006): Learn how to use Ajax and XMLHttpRequest object to create a request/response model that will never let the user wait for the server to respond.

7. "Create Ajax applications for the mobile Web" (DeveloperWorks, March 2010): Learn how to build a cross-browser smartphone web App using Ajax.

8. "Improve the performance of WEB 2.0 Applications" (DeveloperWorks, December 2009): Explore different browser-side caching mechanisms.

9. "Introducing JSON" (json.org): Get an introductory introduction to JSON syntax.

DeveloperWorks Web Development Zone: Get a variety of articles that talk about Web-based solutions.

DeveloperWorks Podcasts: Listen to a variety of interesting interviews and discussions with software developers.

DeveloperWorks Technical Events and Webcasts: Stay tuned for DeveloperWorks's technical events and webcast progress.

　　Access to products and technologies

1. Get ExtJS, a cross-browser JavaScript library for building rich Internet applications.

2. XAMPP provides an easy installation for Apache, PHP, MySQL, and other products.

3. Free trial of IBM software, download the use version, log in to the online trial, use the product in a sandbox environment, or access via work with with over 100 IBM Product trial options.

　　Discuss

1. Create your Developerworks profile now and set up a watch list of reverse Ajax. Connect with the Developerworks community and stay connected.

2. Find other Developerworks members who are interested in web development.

3. Share your knowledge: Join a developerworks group that focuses on web topics.

4. Roland Barcia in his blog about Web 2.0 and middleware.

5. Follow the Developerwork member's shared bookmarks on web topics.

6. Get answers quickly: Visit the Web 2.0 Apps forum.

7. Get answers quickly: Visit the AJAX Forum.

　　About the author

Mathieu Carbou is a Java Web architect and consultant for Ovea that provides services and development solutions. He is the submitter and leader of several open source projects and a speaker and leader of Montreal's Java User Group. Mathieu has a strong code design and best-practice background, and is an expert in event-driven Web development from the client to the backend. His work focuses on providing event-driven and messaging solutions in highly scalable Web applications. You can take a look at his blog.

Reverse Ajax, Part 1th: Introduction to Comet