ajaxリクエスト中にユーザーに視覚的な進歩を見せたいと思います。たとえば、AJAXリクエストをサーバー側のスクリプトに送る「処理」ボタンをクリックすると、「ロード中...」というメッセージとグラフィックが表示されますが、処理量の進捗状況も表示したい完了しました。例えば、5/10 processed, 6/10 processed...など。Javascriptでページコンテンツを強制的に変更する
どうすればよいですか？
うんでthis pageを参照し、そこにありますしかし、それは一種の複雑です。私が見つけた唯一の方法は、クライアント上でiframeを使用し、サーバー上でresponse.writeingを実行して、javascriptのブロックをクライアントに送信し、そのjavascriptが親ウィンドウでステータスメッセージを処理することです。
ここにいくつかのサンプルコードがあります。それに問題があるかもしれない、私ははるかに大きなアプリから抜け出している。
HTML：
<button id="doStuff">
<div id="status"></div>
<div id="iframeHolder"></div>
のjavascript：
//This one will be called from the HTML the javascript is streaming back
function updateStatus(message) {
$('#status').html(message);
}
$('#doStuff').click(function(event) {
event.preventDefault();
var url="your.page.html";
$('#iframeHolder').html('<iframe src="' + url + '"></iframe>');
}
サーバ側は（これは、VBのasp.netですが、選択した言語でそれを行うことができるはずです）：
dim message as string = "hello world"
dim script = String.Format("<script type='text/javascript'>parent.updateStatus('{0}');</script>",message)
Response.Write(script)
Response.Flush()
いくつかの観察
$('#iframeHolder iframe').attr('src','about:blank')）希望に処理パーセントを表示するためにはかなりしゃれに見えます。私は数ヶ月前これで私の頭を払ってくれました:-)
私はあなたのサーバー側のプロセスが実際にどのようなものかはわかりませんが、Ajaxの一連の呼び出しに分解して、それぞれプロセスの一部を行っていますか？次に、各ステップで表示を増やすことができます。
進捗バー実装のjQuery + PHPの例では、残りのパーセントに対するサーバー側スクリプトをポーリングします。 click hereのSafari 4とFirefox 3.5で
次のように、あなたがXMLHttpRequestの進捗状況を確認できます。詳細については
var url = "[URL to file]";
var request = new XMLHttpRequest();
request.onprogress = function(e) {
if (e.lengthComputable) {
var percentComplete = (e.loaded/e.total) * 100;
console.log("Progress: " + percentComplete + "%");
}
else {
// Code to execute when we can't get the progress
}
};
request.open("GET", url, true);
request.send("");
、Mozillaの開発者向けネットワーク
ありがとうございましたが、私は、サーバー側で起こっている操作について、ajaxリクエストのダウンロードの進行よりも話していました。 –
あなたはレスポンス。最後にフラッシュ（）して、待たずにブラウザに直接送られるようにしてください。 – LucasS
@LucasS良いコール –