Practical Ecommerce

What Are AJAX and Dynamic JavaScript?

Both AJAX and dynamic JavaScript refer to ways of using JavaScript. Both are methods of creating an action on a web page without loading that entire page in the browser. AJAX and dynamic JavaScript can make a website faster and more responsive to the user.

In many ways, AJAX is a subset of dynamic JavaScript. AJAX is short for “Asynchronous JavaScript and XML,” and it performs a dynamic action that makes a request to a web server. This is separate from the server request sent when the visitor first came to the page. Dynamic JavaScript usually refers to an action that changes the view of the page or adds information to the page without making a server request.

You’ll find dynamic JavaScript in action operating 360-degree views of products, creating tabbed views to see different product photos or item details, or operating menus. AJAX is frequently used for logging in to accounts, registering with a site, searching through product listings, or adding a product to your shopping cart.

When done right, AJAX and dynamic JavaScript help your website by streamlining activities. They can reduce the number of actions somebody has to take (by informing them that their username isn’t available before they attempt to register, for example) or they can reduce the amount of clutter on the page by hiding some pieces of information unless they are requested, avoiding overloading your customers with too much information at once.

JavaScript Included in Netscape Navigator

It’s not really accurate to describe either of these as a programming “language.” JavaScript is the primary language in use with both, but AJAX is actually a combination of multiple languages: JavaScript, XML, and a server-side scripting language such as ASP or PHP, primarily. JavaScript has been used dynamically pretty much since its origin in 1995, when it shipped in beta releases of Netscape Navigator 2.0.

Jesse James Garrett coined the term “AJAX” in 2005, but the combination of technologies and their use in this format predates the term significantly. It’s impossible to identify exactly what really defines the beginning of AJAX, but it certainly existed in some form at least as early as 1999.

Examples of AJAX and Dynamic JavaScript

Here are a couple examples of AJAX and dynamic JavaScript in use.

Dynamic image view example, from Amazon.

Dynamic image view example, from Amazon.

This image, above, shows Amazon’s product image viewer, an example of dynamic JavaScript. No extra server requests are being made in this viewer; all the images have already been loaded, but are moved into the view port using JavaScript.

These two images show an AJAX request in progress, and after its completion. A piece of JavaScript is operated as soon as the user finishes typing his desired username, which fires a background script. That script checks whether that username already exists. If it does, it informs the user immediately. This saves the user from needing to submit the form before they can find out that their desired username isn’t available.

Neither AJAX nor dynamic JavaScript are particularly well suited to screen shots, since one of the essential elements of both is dynamic change. When you see elements changing on a screen without the entire page refreshing, one of these features is probably being used.

What Does the Code Look Like?

This is an example of the AJAX query that is used to run the second example, above, of the validation of a username. The scripting is built using functions provided by the jQuery JavaScript library, so it is necessary to include that library on the page before this script.

JavaScript:

[code]
// prepare the script when page loads
$(document).ready(function() {
// hide the graphic which shows process
        $('#loading').hide(); 
// when the user leaves the input box, fire this function
        $('#username').blur(function(){ 
// show the graphic showing process
          $('#loading').show(); 
// fire the PHP script “check.php” via the POST method 
      $.post("/ajax/check.php", { 
        username: $('#username').val()
      }, function(response){ // retrieve the response and display
        $('#usernameResult').fadeOut();
        setTimeout("respondAjax('usernameResult', '"+escape(response)+"')", 400);
      });
        return false;
        });
});

// swaps the loading graphic with the actual server response
function respondAjax(id, response) {
  $('#loading').hide();
  $('#'+id).html(unescape(response));
  $('#'+id).fadeIn();
}
[/code]
PHP:
[code]

$username = trim(htmlentities(mysql_real_escape_string($_POST['username']))); // get the username

function check_username($username){
// check whether that username exists by querying database
    $result = mysql_query("SELECT name FROM users WHERE name='$username'");
    if (mysql_num_rows($result) > 0) {
// if there were greater than zero results, the name is in use
    return '<span class="error">Username already in use</span>';
    } else if (!ctype_alnum($username)) {
// if the name was not in use, but uses disallowed characters, return that error
    return '<span class="error">Not a valid username. Usernames may only use letters and numbers, and may not contain special characters including punctuation or spaces.</span>';
    } else {
// if everything was fine, say it was OK.
    return '<span class="response">Username Available</span>';
    }
}
// run function and return results for use in AJAX data.
echo check_username($username);

[/code]

Limitations of AJAX, Dynamic JavaScript

AJAX and dynamic JavaScript are, essentially, supplemental items for a website. Like Flash, a careful application of the technologies can be extremely effective in supporting your site’s goals. But overuse may simply mean you’ll have an overwhelmingly dynamic site, which primarily serves to confuse your visitors.

One major limitation is that all JavaScript is executed on the visitor’s computer, rather than on your server. This means that the performance of your website is largely in the hands of whatever machine your visitors are using. If they have an underwhelming computer, the dynamic elements of your website may be processed very, very slowly. Slow or limited network connections can also wreak havoc with AJAX applications. A slow server response can mean that the user is left waiting with no response information after submitting their form, because the script is waiting on a response from your server before committing it’s next action.

AJAX and dynamic JavaScript can create problems for users with disabilities. When not implemented with accessibility in mind, it’s very easy to end up with a result that breaks in screen readers or can’t be used with a keyboard. Although most problems can be easily rectified, there are a lot of potential traps where accessibility is involved.

“Dynamic” JavaScript Versus JavaScript

Fundamentally, all JavaScript can be considered dynamic. All dynamic means in this context is that the script is performed on the client’s computer rather than on the server. However, “dynamic” most commonly refers to scripts that control, access, or manipulate HTML elements on the page. Dynamic JavaScript is also commonly called DHTML – Dynamic HTML. However, this term is rather misrepresentative of what’s really going on.

Sources to Learn More

There’s a DHTML tutorial at W3 Schools that can be useful for learning the fundamentals of dynamic JavaScript. Similarly, there are numerous tutorials that describe how to work with AJAX using JavaScript. However, there isn’t really a lot available in the way of a layman’s tutorial. Most tutorials require the visitor to know CSS, HTML, and some JavaScript as an entry point. AJAX tutorials usually also expect you to know at least one server-side programming language.

If you’re looking to learn, simply, what dynamic JavaScript is, what it can do, and how you can use it, you may already be in the right place.

Summary

What else is important for merchants (non-programmers) to know about AJAX and dynamic JavaScript? The most important thing to understand is when to use them. Thinking carefully about whether the chosen path will make things easier for the user is crucial. Just because something can be done with AJAX doesn’t mean that it’s actually helpful. Although these dynamic interactions can have exciting visuals, it’s best to focus primarily on whether you’re going with something because it looks cool – or because it’s useful.

Joseph C. Dolson

Joseph C. Dolson

Bio   •   RSS Feed


email-news-env

Sign up for our email newsletter

Comment ( 1 )

  1. Matt Smith November 12, 2010 Reply

    A great example of 360 product merchandising with Javascript is Jquery Reel @ http://jquery.vostrel.cz/reel

    With this little jem, we are able to create 360 product views that work on i devices as well as "Standard" browsers.

    http://www.photospherix.com/jtest/sampler2.html