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

01 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
02 <html>
03     <head>
04         <title>Sortable Table</title>
05         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
06         <link href="tabelle.css" rel="stylesheet" type="text/css" />
07         <script type="text/javascript" src="lib/MochiKit/MochiKit.js"></script>
08         <script type="text/javascript" src="sortierbareTabelle.js"></script>
09     </head>
10     <body>
11         <TABLE  id="sortierbareTabelle"  class="datagrid">
12             <THEAD>
13                 <TH>Rights</TH> .... <TH mochi:format="int">Size</TH><TH mochi:format="gdate">Change</TH>
14             </THEAD>
15             <TBODY>
16                 <TR>
17                     <TD>-rw-r--r--</TD><TD>1</TD><TD>root</TD><TD>root</TD><TD>551</TD><TD>27.01.07</TD><TD>group</TD>
18                 </TR>
19                 <TR>
20                     ...
21                 </TR>
22             </TBODY>
23         </TABLE>
24     </body>
25 </html>

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.

Figure 4: Even more dynamic: If the JavaScript picks up JSON-formatted data from the server, the data can be sorted and the table updated without reloading the page.

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.

Read full article as PDF:

070-074_ajax.pdf  (512.67 kB)

Related content

  • 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.

  • 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.

  • 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.

  • Google Web Toolkit

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

comments powered by Disqus

Direct Download

Read full article as PDF:

070-074_ajax.pdf  (512.67 kB)

News

njobs Europe
What:
Where:
Country:
Njobs Netherlands Njobs Deutschland Njobs United Kingdom Njobs Italia Njobs France Njobs Espana Njobs Poland
Njobs Austria Njobs Denmark Njobs Belgium Njobs Czech Republic Njobs Mexico Njobs India Njobs Colombia