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.
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
2. AJAX Request. What happens when the user triggers an AJAX updater?
- 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
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:
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
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.