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.
![Learn More](https://www.linux-magazine.com/var/linux_magazin/storage/images/media/linux-magazine-eng-us/images/misc/learn-more/834592-1-eng-US/Learn-More_medium.png)
News
-
NVIDIA Released Driver for Upcoming NVIDIA 560 GPU for Linux
Not only has NVIDIA released the driver for its upcoming CPU series, it's the first release that defaults to using open-source GPU kernel modules.
-
OpenMandriva Lx 24.07 Released
If you’re into rolling release Linux distributions, OpenMandriva ROME has a new snapshot with a new kernel.
-
Kernel 6.10 Available for General Usage
Linus Torvalds has released the 6.10 kernel and it includes significant performance increases for Intel Core hybrid systems and more.
-
TUXEDO Computers Releases InfinityBook Pro 14 Gen9 Laptop
Sporting either AMD or Intel CPUs, the TUXEDO InfinityBook Pro 14 is an extremely compact, lightweight, sturdy powerhouse.
-
Google Extends Support for Linux Kernels Used for Android
Because the LTS Linux kernel releases are so important to Android, Google has decided to extend the support period beyond that offered by the kernel development team.
-
Linux Mint 22 Stable Delayed
If you're anxious about getting your hands on the stable release of Linux Mint 22, it looks as if you're going to have to wait a bit longer.
-
Nitrux 3.5.1 Available for Install
The latest version of the immutable, systemd-free distribution includes an updated kernel and NVIDIA driver.
-
Debian 12.6 Released with Plenty of Bug Fixes and Updates
The sixth update to Debian "Bookworm" is all about security mitigations and making adjustments for some "serious problems."
-
Canonical Offers 12-Year LTS for Open Source Docker Images
Canonical is expanding its LTS offering to reach beyond the DEB packages with a new distro-less Docker image.
-
Plasma Desktop 6.1 Released with Several Enhancements
If you're a fan of Plasma Desktop, you should be excited about this new point release.