Ajax tips

Some tips related to the use of the ajax egg.

The tips below require consider you have the following eggs (and its dependencies) installed:

Infrastructure

Let's create a basic infrastructure. First, we need a directory to be used by the web server. This directory will hold our web documents. Let's use the default one for spiffy (called web).

  prompt> mkdir web

Our web-server script (web-server.scm) is very simple:

   (use spiffy spiffy-utils web-scheme web-scheme-handler ajax)
   
   (spiffy-file-ext-handlers `(("ws" . ,web-scheme-handler)))
   (spiffy-debug-mode #t)
   (start-server)

You should place this script at the same directory where the web directory can be found:

   $ ls -l
   total 4
   drwxr-xr-x 2 mario mario  48 Aug 21 15:08 web
   -rw-r--r-- 1 mario mario 159 Aug 21 15:08 web-server.scm

Make sure the prototype.js file is under the web directory, otherwise the examples won't work!

Testing the infrastructure

Save an index.ws file under the web directory with the following contents:

   (ws:page
    (string-append
     (span 'id "result")
     (remote-link "click me"
                  (lambda ()
                    (print "hello "))
                  insert-after: "result"))
    additional-headers: (ajax))

If this example works, you should see a hello being printed when you click click me.

This test also serves as a first basic example. :-)

Basics

In the example you can see code from the web-scheme egg and from the ajax egg.

The ws:page procedure just generates some boring HTML code (HTML, BODY, DOCTYPE...). The keyword argument additional-headers expects code to be inserted in the HEAD section of the HTML document. The ajax procedure generates the "link" to the prototype.js file, which actually provides the ajax functionalities.

If invoked without arguments, the ajax procedure generates HTML code considering that the prototype.js is located at the root directory of the web server. If you want to place prototype.js on another location, you

Examples

todo

remote-url

todo

remote action

todo

How the ajax egg works

The ajax egg uses some special features from the http-server (from the http egg, used by spiffy). The http-server has things called resources, which permit binding certain resources (e.g., a pathname from an URL) to a Scheme procedure which is executed on the server side. This is done by the http:add-resource procedure.

What the ajax egg does behind the scenes is to generate javascript code to be executed by the client (web browser), and to register Scheme code to be executed by the server. The generated javascript code references resources created by the ajax egg's procedures (e.g., remote-link, remote-url) and the resources are bound to Scheme procedures.

The code

 (remote-link "click me"
              (lambda ()
                (print "hello "))
              insert-after: "result"))

showed in the first example, generates the following HTML/javascript code

   <a href='#' onclick="new Ajax.Updater('result', '/698b8ce1989caea1958dda2c0b10944f', { insertion: Insertion.After });">click me</a>

As you can see, the second argument to the Ajax.Updater constructor is the http-server resource (/698b8ce1989caea1958dda2c0b10944f, which will be bound to the Scheme procedure passed as the second argument to remote-link.

The resource is an md5:digest of some values which, when put together, are supposed to generate an unique identifier.