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.
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:
Ajax.Autocompleter
associated with the autocomplete
input and autocomplete_choices
div sends inputs to /auto_complete?prefix=chars
.
<ul><li>Iran</li><li>Iraq</li><li>Ireland</li></ul>
.
Ajax.Autocompleter
displays the candidates in the autocomplete
div.
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 population
, area
, and capital
divs.
ajax.html
, ajax.arc
, data.arc
, and autocomplete.css
.
.js
files from lib
and src
into the same directory that Arc runs in.
ajax.arc
file, and start the web server.
arc> (load "ajax.arc") arc> (thread (serve 8080)) arc> ready to serve port 8080Then 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.
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
data.arc
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 ))))
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.