django - dajax/dajaxice 中的进度指示器？

Question

我成功地将 dajax 集成到我的项目中。很好，但是它缺少一些可以使它变得更好的功能-例如。正在处理请求的可见指示符（暗屏、沙漏等）。我在 dajaxice.js 中找到了一些我应该拦截请求的地方，但这不是简单的方法。你知道一些简单的方法还是我应该选择困难的方法 - 不使用任何 ajax 框架并手动完成所有工作?

Answer 1

像这样的东西会起作用（在右上角给出一个gmail风格的加载...消息）：

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';
  };
}

从你的 javascript document.ready 脚本调用useLoadingMessage()，或者从你的 body 标记中的 onload 调用非常不可知论者。

dajaxice.core.js中的一些技巧：

第 49 行以后：

    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();

第 65 行以后：

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

javascript 与库无关，它应该只涉及向 Dajaxice 源添加 2 行。如果您希望使用不同的加载元素，只需在您的 html 中给它一个idof并为其 css 设置。disableZonevisible = hidden

我从dwr中获取了这个解决方案，它是 Java 的 dajaxice。不过，它确实有一些其他很酷的功能，比如一些不错的调试页面和直接图像上传，这在 dajaxice 中会很方便.... ;)。