Building efficient websites with AJAX
Modular System
This method can be implemented with a few hundred lines of code; however, it is easier to re-sort to existing solutions. A dozen or so popular JavaScript libraries are on the Internet that include functions for frequently needed tasks, such as sorting tables, creating round corners in HTML, and drawing tree graphs.
The advantages of libraries compared with do-it-yourself solutions are in their enormous function scope and guaranteed compatibility with popular browsers. Although JavaScript conforms to the ECMA standard [6], the implementations in browsers on Linux, Mac OS X, and Windows differ in some major aspects. Most existing libraries abstract these differences to make life a little easier for developers.
Listing 1 shows the HTML code for a sortable table based on the free Mochikit [7] library. Besides the two includes in line 6 that bind Mochikit, the HTML source code is little different from a static table. The table tag needs a unique ID (sortable_table) as in the menu example here. The Mochikit-specific attributes mochi:format="int" and mochi:format= "gdate" in the <th> tags help Mochikit sort numeric and date columns correctly.
Listing 1
Sortable Table
Dynamic Data
The previous example stores the table content in the HTML source code; the following example takes things one step further. The application picks up the table content without reloading the page from the server. Links, buttons, and menu items let the user fill the table with different values. Also, it is possible to display search results without page reloads.
Figure 4 illustrates the technology displayed here. The server delivers the data in JavaScript Object Notation (JSON), a text format that uses brackets and commas as separators.
JSON
XML is a popular alternative to JSON. JSON's advantage is the lower overhead compared with the unnecessarily verbose XML. The JavaScript eval() function converts the JSON code to normal JavaScript objects.
Listing 2 shows the HTML code. Instead of the table content, the code just has a tbody element as a placeholder. The JavaScript file referenced in the head of the table, AjaxTabelle.js, replaces the placeholder with new content with values from the JSON file (Listing 3).
If the lists are longer, it is faster to load just the first 25 entries. The user can then click a link or button to load the next 25. This approach reduces the wait time for the user as well as the server load.
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.