How can I implement "Generating... please wait" info for a web app (with and without JavaScript)_问答_开发者

How can I implement showing "Generating data... please wait" information to a web browser from a web application (if data is not cached it can take some time to generate response), with and without JavaScript (AJAX)?

I am interested both in solution using AJAX (where I can replace loading message using JavaScript), and in solution using only server process, without JavaScript开发者_开发问答 (if possible).

I'd like to replace loading message with response as soon as it is available.

Here's what I would do in implementing this client side.

This would be quite easy to accomplish using an Ajax call. Set a div on your page to show the "Generating... please wait" message when you first make the Ajax call. (A simple unimaginative animated graphic would suffice to cue the user's expectation of a pending operation. Convention = understanding = good interface.) Then pass a function into the readystatechange handler that updates the div with the message/progress graphic once the Ajax request returns.

function ShowPendingOperation(){

    var resultHolder = document.getElementById( 'statusDiv' );
    resultHolder.innerHTML = "Your data is loading... <img src='yourProgressAnim.gif'>";

    var request = GXmlHttp.create();
    request.open("post", "/yourScript", true);
    request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    request.onreadystatechange = function() {

        if (request.readyState == 4) {

            resultHolder.innerHTML = "operation complete";
            resultHolder.innerHTML += "result1";
            resultHolder.innerHTML += "result2";
            resultHolder.innerHTML += "etc";

        }

    }

    request.send( 'field1=data1&field2=data2' );

}

Note the snippet above is drawn from sample code written for a Google Map site, presumably your line creating the XMLHttpRequest object will vary...

You would need to use JavaScript to accomplish this without reloading the page. Here's a sample of using jQuery to create this type of effect.

http://trevordavis.net/blog/tutorial/ajax-forms-with-jquery/

The only way you could do this from the server side would be to show the message on the page you're POSTing to and write to the screen using a buffered output before you do the actual processing.

Here's what I would do:

When you determine that you have to perform a long operation, start a thread and associate that thread with an ID of some sort. Do not re-use the IDs.
Return the user to a page that says "Generating".
If ajax, use ajax to periodically poll the server or to perform a request that will block until the operation completes. This request has the ID in it and that is how the server knows what message to return.
If no ajax, use a meta-refresh to periodically reload the page with the specified ID. Repeat until the transaction is done. Note: in this case you should put a message on the page indicating when the refresh will happen and include a link to reload the page for people whose browsers don't support (or ignore) meta refresh.

JqueryUI's Tabs plugin has this built in, you could easily tie into their plugin to do what you want without having to write it yourself.

Without script: You could redirect to an intermediate web page with a "please wait" message that redirects to the result page when the process is complete.

With script: Your page could have a hidden div that shows up with a "please wait" message. That div could also be as big as your page and transparent (with the message in a smaller div) so that your users cannot click on the page while the message is displayed.

One of the trick I have found is to use <meta http-equiv="refresh" content="0" /> to redirect to ready view... but not closing html tag and not closing connection till the final response is ready:

print <<'EOF';
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta http-equiv="refresh" content="0"/>
<title>$title</title>
</head>
<body>
EOF

print "Generating...";
while (!is_ready()) {
    print ".";
    wait();
}
print <<EOF;
</body>
</html>
EOF

Is that something that has the chance of working, or does it work only by accident?