dajax / dajaxice中的进度指示器？

Question

I sucessfully integrated dajax in my project. It is fine but it lacks some features which could make it even better - eg. visible indicator that the request is being processed (darken screen, hourglass, whatever). I found some places in dajaxice.js where should I intercept the request but this is not the easy way.. Are you aware of some easy method or should I choose the hard way - to not use any ajax framework and do all the work manually?

Answer 1

Something like this would work (to give a gmail style loading... message in the top right corner):

function useLoadingMessage(message) {
  var loadingMessage;
  if (message) loadingMessage = message;
  else loadingMessage = "Loading";

  Dajaxice.preHook = function() {
    var disabledZone = document.getElementById('disabledZone');
    if (!disabledZone) {
      disabledZone = document.createElement('div');
      disabledZone.setAttribute('id', 'disabledZone');
      disabledZone.style.position = "absolute";
      disabledZone.style.zIndex = "1000";
      disabledZone.style.left = "0px";
      disabledZone.style.top = "0px";
      disabledZone.style.width = "100%";
      disabledZone.style.height = "100%";
      document.body.appendChild(disabledZone);
      var messageZone = document.createElement('div');
      messageZone.setAttribute('id', 'messageZone');
      messageZone.style.position = "absolute";
      messageZone.style.top = "0px";
      messageZone.style.right = "0px";
      messageZone.style.background = "red";
      messageZone.style.color = "white";
      messageZone.style.fontFamily = "Arial,Helvetica,sans-serif";
      messageZone.style.padding = "4px";
      disabledZone.appendChild(messageZone);
      var text = document.createTextNode(loadingMessage);
      messageZone.appendChild(text);
    }
    else {
      document.getElementById('messageZone').innerHTML = loadingMessage;
      disabledZone.style.visibility = 'visible';
    }
  };

  Dajaxice.postHook = function() {
    document.getElementById('disabledZone').style.visibility = 'hidden';
  };
}

Call useLoadingMessage() from your javascript document.ready script, or from the onload in your body tag for the very agnostic.

A couple of hacks in the dajaxice.core.js :

Line 49 onwards:

    oXMLHttpRequest.onreadystatechange = function() {
        if (this.readyState == XMLHttpRequest.DONE) {
            if(Dajaxice.postHook) Dajaxice.postHook();
            if(this.responseText == Dajaxice.EXCEPTION || !(this.status in Dajaxice.valid_http_responses())){
                error_callback();

Line 65 onwards:

    }
    if(Dajaxice.preHook) Dajaxice.preHook();
    if(method == 'POST'){
        oXMLHttpRequest.send(send_data);
    }
    else{

The javascript is all library agnostic and it should only involve adding 2 lines to the Dajaxice source. If you wish to use a different loading element simply give it an id of disableZone in your html and set visible = hidden for its css.

I took this solution from dwr , which is dajaxice for Java. It does have some other cool features though, like some decent debug pages and direct image uploading, which would be handy in dajaxice.... ;).