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
-
The GNU Project Celebrates Its 40th Birthday
September 27 marks the 40th anniversary of the GNU Project, and it was celebrated with a hacker meeting in Biel/Bienne, Switzerland.
-
Linux Kernel Reducing Long-Term Support
LTS support for the Linux kernel is about to undergo some serious changes that will have a considerable impact on the future.
-
Fedora 39 Beta Now Available for Testing
For fans and users of Fedora Linux, the first beta of release 39 is now available, which is a minor upgrade but does include GNOME 45.
-
Fedora Linux 40 to Drop X11 for KDE Plasma
When Fedora 40 arrives in 2024, there will be a few big changes coming, especially for the KDE Plasma option.
-
Real-Time Ubuntu Available in AWS Marketplace
Anyone looking for a Linux distribution for real-time processing could do a whole lot worse than Real-Time Ubuntu.
-
KSMBD Finally Reaches a Stable State
For those who've been looking forward to the first release of KSMBD, after two years it's no longer considered experimental.
-
Nitrux 3.0.0 Has Been Released
The latest version of Nitrux brings plenty of innovation and fresh apps to the table.
-
Linux From Scratch 12.0 Now Available
If you're looking to roll your own Linux distribution, the latest version of Linux From Scratch is now available with plenty of updates.
-
Linux Kernel 6.5 Has Been Released
The newest Linux kernel, version 6.5, now includes initial support for two very exciting features.
-
UbuntuDDE 23.04 Now Available
A new version of the UbuntuDDE remix has finally arrived with all the updates from the Deepin desktop and everything that comes with the Ubuntu 23.04 base.