Building efficient websites with AJAX
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.
Listing 2
Dynamically Generated Table
Listing 3
JSON Data
Infos
- jEdit: http://jedit.org
- NetBeans: http://netbeans.org
- Web Developer Firefox plugin: http://chrispederick.com/work/web-developer
- Document Object Model: http://w3.org/DOM
- Unicode arrows: http://www.alanwood.net/univode/arrows.html
- ECMA standard: http://www.ecma-international.org/publications/standards/Ecma-262.htm
- MochiKit: http://www.mochikit.com
- SVG: http://www.w3.org/Graphics/SVG
- HTML Canvas element: http://www.w3.org/html/wg/html5/#the-canvas
- VML: http://w3.org/TR/1998/NOTE-VML-19980513
- Inkscape: http://inkscape.org
- Karbon: HTTP://koffice.org/karbon
- SVG2VML: http://code.google.com/p/svg2vml
- ExplorerCanvas: http://excanvas.sourceforge.net
- TextResizeDetector: http://www.alistapart.com/articles/fotresizing
« Previous 1 2 3 4 5
Buy this article as PDF
(incl. VAT)
Buy Linux Magazine
Subscribe to our Linux Newsletters
Find Linux and Open Source Jobs
Subscribe to our ADMIN Newsletters
Support Our Work
Linux Magazine content is made possible with support from readers like you. Please consider contributing when you’ve found an article to be beneficial.
News
-
Linux Sees Massive Performance Increase from a Single Line of Code
With one line of code, Intel was able to increase the performance of the Linux kernel by 4,000 percent.
-
Fedora KDE Approved as an Official Spin
If you prefer the Plasma desktop environment and the Fedora distribution, you're in luck because there's now an official spin that is listed on the same level as the Fedora Workstation edition.
-
New Steam Client Ups the Ante for Linux
The latest release from Steam has some pretty cool tricks up its sleeve.
-
Gnome OS Transitioning Toward a General-Purpose Distro
If you're looking for the perfectly vanilla take on the Gnome desktop, Gnome OS might be for you.
-
Fedora 41 Released with New Features
If you're a Fedora fan or just looking for a Linux distribution to help you migrate from Windows, Fedora 41 might be just the ticket.
-
AlmaLinux OS Kitten 10 Gives Power Users a Sneak Preview
If you're looking to kick the tires of AlmaLinux's upstream version, the developers have a purrfect solution.
-
Gnome 47.1 Released with a Few Fixes
The latest release of the Gnome desktop is all about fixing a few nagging issues and not about bringing new features into the mix.
-
System76 Unveils an Ampere-Powered Thelio Desktop
If you're looking for a new desktop system for developing autonomous driving and software-defined vehicle solutions. System76 has you covered.
-
VirtualBox 7.1.4 Includes Initial Support for Linux kernel 6.12
The latest version of VirtualBox has arrived and it not only adds initial support for kernel 6.12 but another feature that will make using the virtual machine tool much easier.
-
New Slimbook EVO with Raw AMD Ryzen Power
If you're looking for serious power in a 14" ultrabook that is powered by Linux, Slimbook has just the thing for you.