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.
![](/var/linux_magazin/storage/images/linux-magazine.com/issues/2008/91/breezy-browsing/figure-4/430994-1-eng-US/Figure-4_large.png)
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.
![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.