Home > Articles > Open Source > Ajax & JavaScript

  • Print
  • + Share This
This chapter is from the book

This chapter is from the book

Creating a Waiting Screen

document.getElementById("loading").style.visibility = "hidden";

One of the largest obstacles for modern web applications is latency: Something happens, but in the background. You do have to inform the users; otherwise, they will not notice that something is coming up. One way of doing this is by changing the mouse cursor (see Chapter 4, "CSS"); another way is by using a waiting banner. Many applications let a banner labeled with "waiting" or "loading" fade in when an XMLHttpRequest call is executed; one of the first websites to use this was Google Mail.

Actually, this phrase requires more DHTML than AJAX. When the (asynchronous!) call is sent to the server, the loading screen is shown and positioned in the upper-right corner (you can, of course, use any arbitrary position of your liking). After data comes back from the server, the banner is made invisible again. The following code implements this in a browser-agnostic fashion:

Implementing a Waiting Screen (waiting.html)

<script language="JavaScript"
  type="text/javascript" src="xmlhttp.js"></script>
<script language="JavaScript"
  type="text/javascript">
var XMLHttp = getXMLHttp();
window.onload = function() {
  XMLHttp.open("GET", "delay.php?" + Math.random());
  XMLHttp.onreadystatechange = handlerFunction;
  XMLHttp.send(null);
  with (document.getElementById("loading")) {
    style.visibility = "visible";
    if (navigator.appName ==
      "Microsoft Internet Explorer") {
      style.posLeft =
        document.body.clientWidth - 75;
      style.posTop = 0;
    } else {
      style.left = (window.innerWidth - 75) + "px";
      style.top = "0px";
    }
  }
}

function handlerFunction() {
  if (XMLHttp.readyState == 4) {
    document.getElementById("loading").style.visibility = "hidden";
    window.alert("Returned data: " +
                 XMLHttp.responseText);
  }
}
</script>
<span id="loading" style="position: absolute; visibility: hidden; background-color: red; width: 75px;">Loading ...</span>

Figure 11.3 shows the browser while waiting for results: The banner appears (and vanishes again after the data from the HTTP request has arrived).

Figure 11.3

Figure 11.3 The waiting screen.

  • + Share This
  • 🔖 Save To Your Account