AJAX - The Complete Reference

192 Part II: Applied Ajax^

communications, introduce a flag, showProgress, and an onProgress callback. These can

be set in the options object to invoke a function every so often to show a timer or message.

var options = { method: "GET",

showProgress: true,

onProgress: displayTimer,

onSuccess : showResponse

};

In the progress callback function, it is interesting to look at the timespent property.

function showTimer(request)

{

var responseOutput = document.getElementById("responseOutput");

responseOutput.innerHTML = "Request loading : " + request.timespent + " seconds";

}

By default, the progress will be checked every second, and timespent will be rounded

so as not to confuse users. It is easy to change the interval of time that progress is checked

by setting progressInterval in the options to sendRequest() and setting it to a value

in milliseconds.

To address interface process indicators, the statusIndicator property is introduced.

This property can be used to define visual changes to the interface during the progress of

the transmission. The general syntax of status is as follows:

statusIndicator : { progress : { progress-parameter 1, ... progress-parameter N }

The values for the progress object include:

• type Either image or text
  
  
  • imgSrc The URL of the image to display in case the type is set to image
  
  
  
  


• text The text, including any markup to display in case the type is set to text
  
  
  • target The ID or DOM object reference to where the message will be placed
  
  
  
  

For example:

statusIndicator : {progress : {type:"image",

imgSrc : "spinner.gif",

target : "responseOutput"}},

would specify to insert the spinning circle image in the responseOutput <div> , while

statusIndicator : {progress : {type:"text",

text : "Loading...",

target : "statusDiv" }}

would put the text “Loading...” in some tag named statusDiv that could be put in the

upper-right corner of the window.