source: project/wiki/ajax-tips @ 32241

Last change on this file since 32241 was 32241, checked in by felix winkelmann, 6 years ago

removed some call/cc.org links

File size: 3.7 KB
Line 
1== Ajax tips
2
3Some tips related to the use of the [[/eggref/4/ajax|ajax]] egg.
4
5The tips below require consider you have the following eggs (and its dependencies) installed:
6
7* spiffy
8* spiffy-utils
9* web-scheme
10* ajax (obviously)
11
12=== Infrastructure
13
14Let'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}}).
15
16   prompt> mkdir web
17
18Our web-server script ({{web-server.scm}}) is very simple:
19
20
21    (use spiffy spiffy-utils web-scheme web-scheme-handler ajax)
22   
23    (spiffy-file-ext-handlers `(("ws" . ,web-scheme-handler)))
24    (spiffy-debug-mode #t)
25    (start-server)
26
27
28You should place this script at the same directory where the {{web}} directory can be found:
29
30    $ ls -l
31    total 4
32    drwxr-xr-x 2 mario mario  48 Aug 21 15:08 web
33    -rw-r--r-- 1 mario mario 159 Aug 21 15:08 web-server.scm
34
35Make sure the {{prototype.js}} file is under the {{web}} directory, otherwise the examples '''won't work'''!
36
37=== Testing the infrastructure
38
39Save an {{index.ws}} file under the {{web}} directory with the following contents:
40
41    (ws:page
42     (string-append
43      (span 'id "result")
44      (remote-link "click me"
45                   (lambda ()
46                     (print "hello "))
47                   insert-after: "result"))
48     additional-headers: (ajax))
49
50If this example works, you should see a {{hello}} being printed when
51you click {{click me}}.
52
53This test also serves as a first basic example. {{:-)}}
54
55=== Basics
56
57In the example you can see code from the [[web-scheme]] egg and from the [[/eggref/4/ajax|ajax]] egg.
58
59The {{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.
60
61If 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
62
63=== Examples
64
65==== remote-link
66
67todo
68
69==== remote-url
70
71todo
72
73==== remote action
74
75todo
76
77=== How the ajax egg works
78
79The 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.
80
81What 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.
82
83The code
84
85  (remote-link "click me"
86               (lambda ()
87                 (print "hello "))
88               insert-after: "result"))
89
90showed in the first example, generates the following HTML/javascript code
91
92    <a href='#' onclick="new Ajax.Updater('result', '/698b8ce1989caea1958dda2c0b10944f', { insertion: Insertion.After });">click me</a>
93
94As 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}}.
95
96The resource is an {{md5:digest}} of some values which, when put together, are supposed to generate an unique identifier.
97
Note: See TracBrowser for help on using the repository browser.