Datasheet
In the <head> section of the page, a JavaScript function is defined, showAnswer(). This function uses
the DOM method
getElementById() to find the HTML element with an id of answer — that’s the
placeholder
<div> at the bottom of the page. Once the element is found, the method replaces the HTML
contained within the element with new HTML containing the answer to the sum.
Finally, the form defines an
onsubmit event handler that calls the showAnswer() function. This event
handler is invoked immediately before the form is submitted to the server (when the button is pressed).
Because the JavaScript function does all that is needed here,
return false is added to the event han-
dler to prevent the submission to the server from actually happening.
AJAX
AJAX, or Asynchronous Javascript and XML, is simply a new name for a set of tools that have actually
been around for a long time. AJAX has become almost synonymous with Web 2.0, but the techniques
that form the basis for AJAX have actually been around since the late 1990s.
Traditional web applications are
page-based. Every time a new piece of information is requested, or data
are updated, a request is sent to the server and a new page is retrieved. This results in many web appli-
cations being somewhat laborious to use.
AJAX is intended to overcome this inherent clunkiness of web applications by enabling developers to
display or manipulate data within a web page, but without performing a page refresh. This is achieved
by means of a JavaScript object called
XmlHttpRequest. This object allows an HTTP request to be sent
to a web server, and the response processed. All this happens behind the scenes of the current page. The
requests are carried out
asynchronously— in other words, the user can continue interacting with the cur-
rent page while the asynchronous request is being carried out in the background. The result is that web
applications can be made to appear much more responsive to a user’s actions.
AJAX applications are often much more network-friendly. As usually only part of a page is refreshed in
response to a user action, the amount of data transferred across the network is often significantly less
than is found in traditional page-based applications.
One of the problems with building AJAX applications has always been supporting the wide variety of
web browsers in everyday use. Each web browser has its own individual set of quirks to cope with, and
creating an application that works reliably and consistently for the majority of users can be quite a chal-
lenge. To this end, a number of toolkits have appeared that take some of the pain out of building AJAX
applications. One of the most popular toolkits is Sam Stephensons’s Prototype JavaScript framework,
available from
http://prototype.conio.net/, which you will be putting to good use in Chapter 6.
JSON
JSON, or JavaScript Object Notation, is a lightweight data-exchange format based on JavaScript syntax. It
is designed to be easy for humans to read and write, and also for machines to parse.
It is based around two types of data:
❑ Objects: a JavaScript object is a set of name/value pairs. The order of the items in the object is
not significant.
❑ Lists: a JavaScript list or array is an ordered set of values.
12
Part I: Building a New Internet
05_097748 ch01.qxp 12/14/06 5:53 PM Page 12