Connecting Lines
Drawing the connecting lines is slightly more difficult. Because JavaScript does not support graphical elements such as lines or circles, the trick here is to draw the graphical elements pixel by pixel as tiny div elements. Walter Zorn's jsGraphics abstracts this complex process, giving developers basic shapes such as lines, circles, and polygons.
The connect() function relies on these to draw two boxes with lines. It ascertains the box positions at run time to allow the graphic to scale to the font size.
The displayHierarchy() function then redraws the connecting lines.
Lawrence Carvalhos' TextResizeDetector [15] calls this function whenever the user changes the font size. The result is a loss-free, zoomable AJAX widget for tree structures that cannot be implemented using bitmaps.
Because it is entirely based on HTML elements, there is no need for extensions such as Canvas or VML that are not available for some browsers. At least the box text is legible in a browser without JavaScript and CSS support.
Pros and Cons
Many sites benefit from JavaScript and AJAX with respect to usability. Short response times and the ability to do without page reloads are greeted enthusiastically by users. However, the use of AJAX can cause issues that do not occur with static pages. For example, users cannot simply click forward and back buttons to navigate.
Pages modified dynamically by JavaScript thwart user expectations. The problem even affects the simple dynamic menus referred to earlier. If users click to pop up a submenu, the back button will not take them to the previous page status; rather, it opens the page visited previously.
This might not be a big issue with a menu, but if the client-side script changes the page substantially, making it appear to be a new page from the user's viewpoint, confusion is likely.
The browser cannot detect the state changes that occur on an AJAX page because the URL remains the same. The client-side JavaScript logic makes the changes without reloading, which is why bookmarks are unable to capture the page status. If the website uses AJAX-based navigation, bookmarks will simply take the user to the front page.
The first thing to consider is whether quick response, or a working history, and the ability to bookmark subpages, are more useful to the surfer. Although the use of a client-side JavaScript that pulls down menus without reloading the page or that re-sorts tables is always going to be an elegant solution, the usability of a shop or catalog page with hundreds of subpages would be seriously affected when users lose the ability to navigate with forward and back buttons.
Remedies
Workarounds have been found for the history and bookmark problems. For example, Google Maps provides an alternative URL containing the GET parameters for the section of the map.
Users can't bookmark the page loaded in the browser. Instead, right-clicking the link shown on the page adds a bookmark.
Other workarounds use the HTML anchor that is normally used to store specific positions on a page in a URL. The anchor is the part of the URL that follows the hash sign (#).
Just like the URL itself, the anchor can be modified by means of JavaScript without reloading the page. If the browser fails to find an anchor tag for the string that follows the hash, the display remains unchanged. The anchor is thus perfect for caching status information: The anchor part is the only part of the URL that can be modified without reloading the page.
The capabilities of JavaScript graphics are fairly spartan compared with Flash: HMTL and CSS can only draw squares and text. Libraries such as jsGraphics add further shapes, such as circles and polygons. SVG graphics or Canvas, an element of the future HTML 5 web standard, embedded in the web page add more abilities. Both are unsuitable for publicly accessible Internet sites because they are not available across the board for browsers.
Dynamically Generated Table
01 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
02 <html>
03 <head>
04 <link href="tabelle.css" rel="stylesheet" type="text/css" />
05 <script type="text/javascript" src="lib/MochiKit/MochiKit.js"></script>
06 <script type="text/javascript" src="AjaxTabelle.js"></script>
07 </head>
08 <body>
09 <a href="index.html">Examples</a>
10 <hr>
11 <h4>Ajax Table</h4>
12 <p>
13 <a href="top.json" mochi:dataformat="json">Reload Table 1</a><br>
14 <a href="top2.json" mochi:dataformat="json">Reload Table 2</a>
15 </p>
16 <table id="sortable_table" class="datagrid">
17 <thead>
18 <tr>
19 <th mochi:sortcolumn="PID int">PID</th>
20 <th mochi:sortcolumn="USER str">USER</th>
21 [...]
22 <th mochi:sortcolumn="COMMAND str">COMMAND</th>
23 </tr>
24 </thead>
25 <!-- replaced by the JSON file content -->
26 <tbody class="mochi-template">
27 <tr mochi:repeat="item domains">
28 <td mochi:content="item.PID"></td>
29 <td mochi:content="item.USER"></td>
30 [...]
31 <td mochi:content="item.COMMAND"></td>
32 </tr>
33 </tbody>
34 </table>
35 </body>
36 </html>
01 {
02 "columns": [ "PID", "USER","PR","NI", "VIRT", "RES", "SHR", "S", "CPU","MEM", "TIME", "COMMAND"],
03 "rows": [
04 [ "6620","cz","15","0","166912","57344","40960", "S","11.6","5.6", "0:02.40", "soffice.bin"],
05 [ "3701","root","15","0","241664","225280","17408", "S","4","21.8", "4:23.50", "X"],
06 [ "4496","cz","15","0","63828","20480","15360", "R","2","2", "0:16.02", "gnome-panel"],
07 [ "4506","cz","15","0","70480","18432","10240", "R","2","1.8", "0:04.14", "gnome-terminal"],
08 ]
09 }
Comments