Ajax - Beginning JavaScript - page 461

This is another area in which Ajax solutions, and XMLHttpRequest specifically, miss the
mark. However, this problem is simple to overcome: Simply add UI elements to tell the user
something is going on and remove them when the action is completed. Consider the following
code:
function requestComplete(responseText) {
//do something with the data here
document.getElementById("divLoading").style.display = "none";
}
var myRequest = new HttpRequest(" http://localhost/myfile.txt",
requestComplete);
//show that we're loading
document.getElementById("divLoading").style.display = "block";
myRequest.send();
This code uses the HttpRequest module to request a text file. Before sending the request, it retrieves
an HTML element in the document with an id of divLoading . This <div/> element tells the user
that data is loading. The code then hides the element when the request completes, thus letting the
user know that the process completed.
Offering this information to your users lets them know the application is doing something.
Without such visual cues, users are left to wonder if the application is working on whatever they
requested.
Degrade Gracefully When Ajax Fails
In a perfect world, the code you write would work every time it runs. Unfortunately, you have
to face the fact that many times Ajax‐enabled web pages will not use the Ajax‐enabled goodness
because a user turned off JavaScript in his browser.
The only real answer to this problem is to build an old‐fashioned web page with old‐fashioned
forms, links, and other HTML elements. Then, using JavaScript, you can disable the default
behavior of those HTML elements and add Ajax functionality. Consider this hyperlink as an
example:
<a href=" http://www.wrox.com" title="Wrox Publishing">Wrox Publishing</a>
This is a normal, run‐of‐the‐mill hyperlink. When the user clicks it, the browser will take
him to http://www.wrox.com . By using JavaScript, you of course can prevent this behavior
by using the Event object's preventDefault() method. Simply register a click event handler
for the <a/> element and call preventDefault() . Both Examples 1 and 2 demonstrated this
technique.
As a rule of thumb, build your web page first and add Ajax later.