Ajax is surprisingly easy to use with the Arc language. This article shows how to implement Ajax-based autocompletion and dynamic page updates using
the
script.aculo.us and
Prototype JavaScript frameworks. These frameworks allow Ajax applications to be implemented with just a few lines of additional code.
The hard work is done by the script.aculo.us and Prototype libraries. All the Arc code needs to do is provide the list of autocompletion candidates, and the dynamic page content.
The example
This example implements a simple Ajax input autocompleter and dynamic page update. For the autocompleter, as soon as you enter a few letters into the input, it provides a list of matching terms. As soon as you select a term, the page is dynamically updated with associated data, as in the following screenshot:
For the purposes of the demonstration, the content is information on the
countries of the world, obtained from the
CIA World
Factbook.
To summarize how it all works:
When you enter characters in the input field, the script.aculo.us
autocompleter JavaScript sends the charaters to the Arc server, which returns the
autocomplete suggestions. The autocompleter JavaScript displays the
suggestions on the page.
When you select a country, the updater JavaScript does three separate requests
to the Arc server, to request the population, area, and capital. When the
responses arrive, they are inserted into the page.
In more detail, the autocompletion is performed by Ajax.Autocompleter, and the dynamic updating is performed by Ajax.Updater. The control flow is:
-
The
Ajax.Autocompleter associated with the autocomplete input and autocomplete_choices div sends inputs to /auto_complete?prefix=chars.
- The Arc handler sends back a formatted list of autocomplete candidates, e.g.
<ul><li>Iran</li><li>Iraq</li><li>Ireland</li></ul>.
- The
Ajax.Autocompleter displays the candidates in the autocomplete div.
- When an autocompletion is selected, the
update JavaScript function starts three Ajax.Updater instances, which send an Ajax request to URL /getcontents?field=population&name=value, and similarly for area and capital in parallel.
- The Arc handler for
getcontents returns the desired contents.
Ajax.Updater puts the contents into the contents div.
Running the example
First set up the necessary files.
- Download ajax.zip and uncompress it into the
same directory that Arc runs in. This zip file provides
ajax.html, ajax.arc, data.arc, and autocomplete.css.
- Download the script.aculo.us library files from script.aculo.us. Copy the
.js files from lib and src into the same directory that Arc runs in.
Next, start up the Arc interpreter,
load the
ajax.arc file, and start the web server.
arc> (load "ajax.arc")
arc> (thread (serve 8080))
arc> ready to serve port 8080
Then go to
http://localhost:8080/ajax.html. (Unfortunately I don't have a live demo on a public machine. If anyone sets one up, let me know and I'll add a link here.)
Start typing in the box, and you should see a dropdown with autocompleted choices. Click one, and the code will be displayed below asynchronously.
The Arc code
The Arc server code is in
ajax.arc. Two Arc handlers are implemented to provide the client-side Ajax support. The first,
auto_complete receives the current input contents and returns a list of up to 10 autocompletion candidates formatted in HTML.
The second handler,
getcontents returns the dynamic content for the page, from the
database table. Note that the handlers do nothing particularly special to make them "Ajax"; they are standard Arc web handlers based on
defop and can be accessed directly through the browser. See
Arc Web Server for more information on web serving with Arc.
(defop auto_complete req
(let prefix (downcase (arg req "prefix"))
(prn (to-html-list (cut (startselts prefix keylist) 0 10)))))
(defop getcontents req
(with (field (arg req "field") name (arg req "name"))
(if (is field "population") (prn ((database name) 1))
(is field "area") (prn ((database name) 2))
(is field "capital") (prn ((database name) 3)))))
The handlers use a couple helpers;
startselts returns the elements that match the autocomplete prefix and
to-html-list wraps the elements in HTML list tags.
; Returns a list of elements that start with prefix
(def startselts (prefix seq) (rem [no (begins (downcase _) prefix)] seq))
; Wraps elts in HTML list tags
(def to-html-list (elts) (tostring
(prall elts "<ul><li>" "</li><li>")
(pr "</li></ul>")))
The actual content is obtained from
data.arc, which contains the information on each country as a list of lists.
("United States" "301,139,947" "9,826,630" "Washington, DC")
Some simple code converts the list into a table called
database indexed by country for easy lookup, and generates a sorted list of countries for use in autocompletion:
(= database (table))
(w/infile inf "data.arc"
(let datalist (sread inf nil)
(each elt datalist
(= (database (elt 0)) elt))))
(= keylist (mergesort < (keys database)))
For some reason, the default Arc web server srv.arc doesn't support .js files. The ajax.arc file modifies the server slightly to support these files:
(= (srv-header* 'text/javascript)
"HTTP/1.0 200 OK
Content-Type: text/javascript; charset=UTF-8
Connection: close")
(def static-filetype (sym)
(let fname (string sym)
(and (~find #\/ fname)
(case (last (check (tokens fname #\.) ~single))
"gif" 'gif
"jpg" 'jpg
"css" 'text/css
"txt" 'text/html
"html" 'text/html
"js" 'text/javascript
))))
Debugging
Several things can go wrong when trying to run the example. If the initial page doesn't load at all, something is probably wrong with the Arc server. If no autocompletion happens, the JavaScript may not be loading, or the Arc server may have problems. If the autocompletion shows up as a bulleted list, the CSS file is probably not loading.
The Arc code can be debugged in several ways. The first is to access the handlers directly. The autocomplete handler http://localhost:8080/auto_complete?prefix=a should return a bullet list of autocomplete suggestions. The contents handler: http://localhost:8080/getcontents?field=area&name=Algeria should return the dynamic contents value.
The Arc code can also be debugged by strategically inserting print statements such as:
(write req (stderr))
This will display the request on the Arc console.
To debug Ajax, you can use Firefox plugins
Live HTTP Headers and
Firebug. Live HTTP Headers lets you see the headers between the browser and the server, and is very helpful to determine if something is failing. Firebug allows much more in-depth JavaScript debugging.
The browser's JavaScript console is also useful to see JavaScript errors.
This article has just scratched the surface of script.aculo.us and Ajax. More information is available at the script.aculo.us website or in books.
exercises in Java; maybe I'll post details later.
.)
. The review from July 2004 says, "Paul Graham, well known for developing the popular Arc computer language and other Internet technologies...". I guess they didn't realize Arc hadn't been released at the time. Hopefully we won't see them publishing job listings looking for 4 years of Arc experience.
