Ajaxification

The Ajaxification script replaces full page request with AJAX requests and replace the entire document body. The script registers a click handler on the body of the DOM tree. It checks if the clicked element is an anchor or within one. Then the anchor node is asked for its URL element.href and an Ajax request is instantiated. The last step of the event handler stops the event processing, so that the default action of the web browser is vetoed. Finally the handler extracts the body and head from the response and injects it into the current DOM tree.

That’s all that is needed to turn any Seaside application into a full blown Ajax application. People might argue that we are cheating here: we are still doing a full request, we just do it asynchronously in the background using XMLHttpRequest. This gives only a marginal speed improvement (the same amount of data is transfered), but looks much smoother than doing a full request. For example, the page does not scroll to the top and is replaced without the usual flickering a full request does. Best of it, the script works well, even if you have other manually crafted Ajax actions in your code. Furthermore it supports the use of #call: and #answer:, something that was not easily possible before.

The script preserves the ability to use the back button of the web browser by using window.history.pushState.

FAQ

Do I have to change my application when using the script?

No. When using the script you don’t have to think about AJAX at all. You write a traditional web application and it gets AJAX enabled simply by adding the script. There is no need to change existing code.

If an application has a large amount of almost-full-page AJAX re-draws, will the use of the script make this simpler?

Yes, the script centralizes and automatizes these re-draws.

Do I have to remove manually crafted Ajax actions?

No, the script assigns a click handler to the body of the document only. This means it is only triggered when the user clicks on a traditional link. Other click handlers in the document continue to work as is.

Is there any way to force some actions to actually do a traditional full-page refresh?

Yes, by assigning an URL to window.location, or by changing the script to ignore certain anchors.

Will this cause callbacks to continuously accumulate on the server side until an actual full-page refresh?

No. To Seaside the AJAX requests look like normal full-page requests. Therefore Seaside behaves and caches the callbacks as it does with a traditional application.

For the original documentation see:

• http://www.lukas-renggli.ch/blog/ajaxification
• http://www.lukas-renggli.ch/blog/ajaxification-faq