Building efficient websites with AJAX

JavaScript

In contrast, JavaScript is not restricted to isolated areas of the web page. The interpreter that is integrated with the browser executes the program and converts the whole page into a dynamically modifiable interface. To do so, scripts create or modify the HTML code on the page, modify the cascading style sheet (CSS) styles, or even draw graphics.

The scripts themselves comprise uncompiled text. In contrast to Flash development, programming in JavaScript does not require any special tools. A simple text editor is fine for a start.

Good Tools

As always, good tools make programming easier. An editor with HTML, CSS, and JavaScript support is useful. It should also be able to handle source code that mixes all three [1][2]. Chris Pederick's Firefox plugin Web Developer [3] is the obvious choice for tracing and debugging programs. It reveals bugs in HTML, CSS, and JavaScript; investigates cookies; and displays the dynamically modified HTML code, not just the original version delivered by the server.

Tables

An increasing number of applications, such as order processing and enterprise resource planning (ERP) systems use web front ends: Parts lists or other list-type overviews are the main fare.

One important feature is the user's ability to sort these lists. If the web front end is based on static HTML, the server has to regenerate the page and serve up the modified version. Of course, client-side JavaScript-based data sorting makes for a smoother process.

Figure 2 gives an example of a directory listing implemented as an HTML table. Clicking the table header sorts the table by the current column. Figure 3 shows how to do this with JavaScript. An HTML table comprises nested <tr> and <td> elements, which can be addressed via DOM [4].

Figure 2: New order: Clicking the table header tells the client-side JavaScript to sort the table on the requested column; there is no need to delay this process by talking to the server.
Figure 3: JavaScript sorts tables by dynamically removing the rows from the table, caching the results in an array, and reinserting the data in the new order.

The script starts by dynamically removing all the <tr> elements (i.e., the rows in the table) from the page. The rows only exist as an array in JavaScript. The JavaScript function then sorts the array on the requested column and writes the new sorting order between the empty <table> and </table> tags. Finally, the script draws an arrow, a Unicode arrow [5] character, before the label of the column on which the table is sorted.

Buy this article as PDF

Express-Checkout as PDF
Price $2.95
(incl. VAT)

Buy Linux Magazine

SINGLE ISSUES
 
SUBSCRIPTIONS
 
TABLET & SMARTPHONE APPS
Get it on Google Play

US / Canada

Get it on Google Play

UK / Australia

Related content

  • AJAX

    AJAX offers a fast and efficient approach for building interactive websites. We’ll show you how to call upon the powers of AJAX for your own web creations.

  • Google Web Toolkit

    The Ingenious Google Web Toolkit builds optimized JavaScript applications in a hurry.

  • Helma

    The powerful Helma application server brings new powers to the JavaScript language. We'll show you how to use Helma to build a simple RSS reader.

  • Google Web Toolkit

    The Ingenious Google Web Toolkit builds optimized JavaScript applications in a hurry.

  • Perl: AJAX

    AJAX technology adds dynamic elements to enhance sluggish websites. All it takes is a server-side Perl program and some client-side JavaScript code.

comments powered by Disqus
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

News