Dynamic Web Development with Seaside

20.4.4Behind the curtains

Now it is time to explain a bit the logic behind AJAX. Below you see a sequence diagram of the interaction between the web browser and the server during an AJAX updater action.

A full request (1) and an AJAX request (2) updating part of the page

1. Full Request. Every web application, even a completely AJAX driven one, starts out with a full request. The web browser sends off a request to the desired URL, in our case /todo. The request is processed by the web server and passed to the Seaside dispatcher, which passes it on to the correct session and triggers the components to render. Eventually Seaside calls returnResponse: that returns the fully rendered page back to the web browser. As soon as the web browser receives the response it starts to parse the XHTML. During the parsing the browser may load some additional resources such as images, style-sheets or JavaScript files, and eventually displays the result to the user.

2. AJAX Request. What happens when the user triggers an AJAX updater?

  1. In case of an AJAX update action it is the JavaScript engine of the web browser that sets off the request. It is important to note that this request is made asynchronously (note the different arrow in the diagram), so the web browser remains fully functional while the AJAX request is processed by the server. Also note, that this means the JavaScript statement following the AJAX updater is immediately executed. The JavaScript engine does not block until the server returns a response.
  2. Similar to the full request, Seaside receives the request and determines the correct session to handle it. Instead of calling renderContentOn: of the root page to generate a complete XHTML page, Seaside evaluates the callback block. In our case the callback block sends the message renderItemsOn:, that renders the list of todo items. The partial response is then passed back to the web browser using returnResponse:.
  3. Finally the JavaScript engine gets notified that a response is ready to be processed (remember, the request was sent asynchronously). The XHTML snippet is parsed and inserted at a specific location in the DOM tree.

So far we only had a look at the AJAX requestor and updater. The requestor is used to serialize forms and trigger events on the server. The updater goes one step further. It allows one to update a specified DOM node with newly rendered content. There are two powerful AJAX features that we are going to look at now, the periodical updater and the evaluator.

Periodical Updater. The periodical updater PTPeriodical is an updater that periodically performs a normal AJAX update action. This is commonly used by all sorts of polling mechanisms. Note that in Chapter 22 we will have a look at a different way to continuously update contents on a web page, that doesn’t use polling. We can add the following code snippet to any application to continuously display the current time:

html div
script: (html scriptaculous periodical
frequency: 1 second;
callback: [ :ajaxHtml | ajaxHtml render: Time now ]);
with: Time now

Note that in this example we don’t need to specify an ID, since we assign the script directly to a DOM element. In this case Seaside automatically connects the updater with the owning XHTML element. If we wanted to update a different DOM element, we would have to specify the ID of this element using id:. We set the update frequency to every second. This is more a period than a frequency, but that’s what it is called in the Prototype framework. The callback block is then evaluated every second and renders the current time.

Evaluator. The evaluator PTEvaluator is the most complicated, but also most powerful AJAX mechanism. Instead of updating a specific DOM element, it injects JavaScript code into the browser of the client. This is extremely powerful and allows one to update multiple DOM elements and play effects in one request. Again the evaluator looks very similar to the normal updater, but instead of passing a XHTML canvas into the callback block it gives you a script object where you insert JavaScript snippets. To see some sophisticated examples of its use have a look at SUTabPanel or SUAccordion that come with the Scriptaculous package. Both widgets update multiple parts of the page and change several CSS classes of the widget at the same time.

Copyright © 19 March 2024 Stéphane Ducasse, Lukas Renggli, C. David Shaffer, Rick Zaccone
This book is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 license.

This book is published using Seaside, Magritte and the Pier book publishing engine.