How to do something while a dojo xhr request is waiting or loading

问题

I'm relatively new to dojo, and although I've managed to do all I need, there are certain things I just can't figure out how to do with it.

Simply put, I have a form and when I click the submit button the request goes in fine and for the most part all is good. However, now I want to have in a div or some content that changes every 10 seconds or so while the user been waits for the request to go through... this is what I can't figure out how to do.

The content I want to put in the div is static, so there's no need to have a request inside another request or any madness like that, all I want is that every so often the content changes (eg say I want a div that says "You've been waiting X seconds and counting").

Hopefully anybody can give me a hand with this? Thanks in advance

回答1:

The simple solution would be

1. Fire a request
2. Start a setInterval to do your stuff or show a loader gif or whatever
3. When the request returns, undo what you did in part 2.

---

// 1
var req = dojo.xhr( /*...*/ );

// 2 
var inter = setInterval(function(){
    console.log("waiting..."); //do stuff
}, 10000); //time in miliseconds

//3
function undo(){
    clearInterval(inter);
} 
req.then(undo, undo); //undo either on sucess or on error

回答2:

Exactly where Dojo shines thanks to its AOP approach, i.e. dojo.connect(). Here is the code (and also at jsFiddle):

dojo.require("dojox.timing");
dojo.require("dijit.form.Button");

dojo.declare("phusick.Form", null, {

    send: function() {
        var def = dojo.xhrPost({
            url: "/echo/json/",
            content: {
                json: dojo.toJson({data: "some data"})
            },
            handleAs: "json"
        });

        def.addCallback(this, "onSendSuccess");
        this.onSend();
    },

    onSend: function() {},

    onSendSuccess: function(result) {} 
});

dojo.declare("phusick.Observer", null, {

    observe: function(form) {
        this.form = form;
        this.interval = 5;
        this.timer = new dojox.timing.Timer(this.interval);
        dojo.connect(this.timer, "onStart", this, function() {this.timeElapsed = 0});
        dojo.connect(this.timer, "onTick", this, "onTick");
        dojo.connect(form, "onSend", this.timer, "start");
        dojo.connect(form, "onSendSuccess", this.timer, "stop");
    },

    onTick: function() {
        this.timeElapsed += this.interval;
        dojo.byId("output").innerHTML = this.timeElapsed + " ms";
    }

});


dojo.ready(function() {
    var form = new phusick.Form();
    var observer = new phusick.Observer();
    observer.observe(form);

    dojo.connect(dijit.byId("sendBtn"), "onClick", function() {
        form.send();
    });

});

1. Class phusick.Form that calls onSend() method when XHR starts and onSendSuccess() method when XHR finishes (thanks to callback).
2. Class phusick.Observer with observe() method that requires a single parameter: instance of phusick.Form. It starts and stops timer when onSend()/onSendSuccess() of passed form is called.

来源：https://stackoverflow.com/questions/8512483/how-to-do-something-while-a-dojo-xhr-request-is-waiting-or-loading