- Initializing an AJAX Application
- Sending a GET Request
- Sending a POST Request
- Sending a Synchronous Request
- Receiving Multiple Data from the Server
- Aborting an HTTP Request
- Retrieving HTTP Headers
- Receiving XML from the Server
- Using JSON for Data (De)Serialization
- Creating a Waiting Screen
- Solving the Bookmark Problem
- Solving the Back Button Problem
- Using XSLT
- Using an XML Library
- Using the Yahoo! Web Service
This chapter is from the book
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 The waiting screen.