The "Ajax model"
Ajax stands for
It is the technique we have used for some of the web pages on this site
to get information (entered by the user) from a form on a web page to a script,
and to get output (e.g. a plot) from the script back on the web page for the user to see.
In the "Ajax model" in our implementation, there are 3 principal components/files involved
(the example file names are from
The advantage of this way of doing things is that the script in some sense can update
the original web page by replacing the div tags with new content, e.g.
a plot generated by the script. This seems to be achieved using something called
in which the script writes directly into the DOM tree (which means that
a "View source" in the web browser won't show the new content
but rather just the seemingly empty div tags, but if the DOM tree
is browsed, the new content is seen).
- HTML code
(example file: /local/www/home/urania-vo/modules/pickles_1998/index.html)
- It has a form (using the form tag), allowing the user to provide input
- The form has a number of variables (here called spektype, subtype, lumklasse, V and Av)
- It has one or more named div tags (here named outblock1 and outblock2) which act as placeholders
(other tags could have been used as placeholders, e.g. a table cell element, td)
(example file: /local/www/home/urania-vo/modules/pickles_1998/index.js)
- It contains the function (here called getSearchResult()) being called from the HTML code
- This function has access to the variables from the HTML form, and it creates an HTTP GET call to the
backend script; the call in this example looks like this (if the 5 before-mentioned variables had values g, 8, v, 2.6 and 0.4):
(try following the link, your browser may show you the XML document tree)
- It contains another function (here called setSearchResult()) which parses the XML from the backend script
(based on knowledge of the exact format (structure, tag names, ...) of the XML produced by the backend script),
and sends the result to the div tags (in the DOM tree of the rendered HTML code)
instead of being in a separate file
- Backend script
(example file: /local/www/cgi-bin/urania-vo/pickles_1998.pl)
- In this example the XML has the format
and the two pieces of output (foo and bar) can contain HTML code, escaped using the CDATA method
- Note that what is in XML tags out1 and out2 will end up in
div tags outblock1 and outblock2, respectively
- In this particular example the backend script is a Perl script, which in turn calls an IDL script
One alternative to the Ajax model (and how the old Urania AVO site does things) is just to have
an HTML file and a script file. In this model, the script file has to generate
and entire new HTML page, which is mostly identical to the old page except
the new content now has been coded in. This setup means that changes to
the page has to be made in two places: in the HTML page the user meets
to begin with, and in the code of the script which generates the HTML page
the user gets after having submitted info via the form.
Note that we are not taking advantage of the possibility of asynchronisity in Ajax,
i.e. the feature of communicating back and forth with the backend script
as the user types e.g. each letter of an input sentence
(using something like
<input type="text" name="txtfoo" ID="txtfoo" onkeyup="findPartialfoo(this.value)">,
cf. this document).
Back to the main page of the site
Bo Milvang-Jensen 2008-2009.
Page last updated: 28-May-2009