jqueryajaxを使用して呼び出される長時間実行タスクがあります。ブロックUIプラグインを使用して「読み込み中」を表示しています。とにかく、進行状況メッセージをクライアントに送り返して進行状況を表示し、ブロックUIプラグインメッセージで更新することができますか?
したがって、これが表示されます(サーバーが機能するため)。。
"最初のソースを読み込んでいます..."
"2番目のソースを読み込んでいます...
""3番目のソースを読み込んでいます..."
"解析結果..."
jqueryajaxを使用して呼び出される長時間実行タスクがあります。ブロックUIプラグインを使用して「読み込み中」を表示しています。とにかく、進行状況メッセージをクライアントに送り返して進行状況を表示し、ブロックUIプラグインメッセージで更新することができますか?
したがって、これが表示されます(サーバーが機能するため)。。
"最初のソースを読み込んでいます..."
"2番目のソースを読み込んでいます...
""3番目のソースを読み込んでいます..."
"解析結果..."
ものをアップロードする場合について私が見たものから-サーバー側でのみ利用可能であるため、人々は別のゲートウェイを作成し、進行状況情報を照会します。しかし、あなたの場合、それは最善ではないと思います。
進行状況情報を含むものをロードしたり、出力の生成中にサーバーが進行状況に関する情報をポップできるようにしたい場合は、 httpストリーミングが必要です。ここでうまくカバーされています。基本的に、これは単一のhttpリクエストであり、サーバーは1分ほどチャンクで応答し(したがって、必要なときに送信します)、新しい接続が開かれます。
これは私にとってかなりの発見でした;)
[編集]
現在、利用可能なより優れたテクニックがたくさんあり、それらはすべてSocket.IOにラップされています-httpストリーミングを含む他のテクニックへのフォールバックを備えたWebSocket
Socket.IOはnodeJSのモジュールですが、他にも同様の実装があります。https://github.com/Atmosphere/atmosphereのJAVASocket.IO実装とすでにいくつかのパケットを交換しました
1つの方法は、jQueryでHTTPハンドラーとAJAXを使用することです。
1.サーバー側のリクエストを開始します
$("#btnCreateInvoice").click(function() {
$.ajax({ type: "POST", url: "YourHttpHandler.ashx",
contentType: "text/html; charset=utf-8",
dataType: "html",
success: function(data) { start the block UI }
});
});
2.ポーリング
次に行う必要があるのは、「t」間隔でサーバーをポーリングし、ステータスを取得することです。そのためには、ステータスを取得するためにHTTPHandlerへのAJAX呼び出しを開始する関数を「t」間隔で呼び出す必要があります。
$(function() {
setInterval(updateStatus, 't');
});
function updateStatus() {
$.ajax({ type: "POST", url: "GetStatusHandler.ashx",
contentType: "text/html; charset=utf-8",
dataType: "html",
success: function(data) { process 'data' here and update the block UI message box }
});
}
ここでのあなたの場合、GetStatusHandler.ashxはステータスの完全なinnerHtmlを返すことができます。たとえば、最初の呼び出しで「最初のソースを読み込んでいます...」を返し、次に「最初のソース
をロードしてい
ます...2番目のソースを読み込んでいます...」などを返し
ます。
私はつい最近、ajaxの「プッシュ」を行うプロジェクトに気づきました。あなたはそれをチェックしたいかもしれません:
同様のことを行っている他のプロジェクトがいくつかあることを私が知っている限り、これは「クライアントに進捗メッセージを送り返す」のに最も当てはまります。他のソリューションでは、進捗をポーリングするリクエストが必要です(それでも非常に合法で良い解決)。
各AJAXリクエストに、メッセージ、データ、およびリクエストする次のURLを含むJSONレスポンスを返すようにします。{message: "Loading second resource...", data: ..., next_url: "/next_part"}
最初のAJAXリクエストの前に、BlockUIメッセージを「Loading...」に設定します。応答を受け取ったら、BlockUIメッセージをAJAX呼び出しから返されるメッセージに設定します。次に、「next_url」の値に対して次のAJAX呼び出しを行い、以下同様に、すべてのタスクが完了するまでループします。
1つの大きなデータセットを分割してロードする場合は、プログレッシブロードデザインパターンのようなことを実行するだけでなく、各応答を取得するときに進行状況メッセージを設定することもできます。
あなたがやろうとしていることは、Cometに似たものです。従来の(「非彗星」)Webサーバーは、この種のトランザクションモデル用に設計されていないため、望ましいソリューションではありません。
私の提案は、データソースごとに1つのクライアントリクエストで処理を分割することです。
function loadData() {
// Each call passes callback(id) as a success handler
fireAsynchronousRequest("source1");
fireAsynchronousRequest("source2");
fireAsynchronousRequest("source3");
}
function callback(var source) {
if (source == "source1") {
updateStatus("Source 1 loaded");
}
else if (source == "source2") {
updateStatus("Source 2 loaded");
}
}
これは非同期ソリューションの例です。callback()
同期する必要がある場合は、で状態処理を実装でき ます。
よく似たような状況で、別のアプローチで解決します。それは非常に醜い回避策です、それで私はそれがどれほど悪いかを述べ始めないでください、私がそれを知っているので、それは私がそれを必要とするもので大丈夫でした。
サーバー側のファイルに進行状況を入れています。たとえば、私はprocess.phpを呼び出しましたが、これは多くの作業を行う必要があり、完了するまでに時間がかかるため、ユーザーは緊張し、ブラウザーを閉じます(あまり良くありません)。そのため、process.phpはサーバー上のファイルに出力を保存しています。process.phpを呼び出したページには、小さなdiv、span、または進行状況を表示したい場所がありますが、divをお勧めします。Xミリ秒または秒ごとに、div内のサーバーから別のスクリプトをロードします。たとえば、display_info.phpは、process.phpによって出力されたファイルを読み取っており、コンテンツはdiv内に表示されます。
process.phpからの出力は、機会ごとに一意である必要があることに注意する必要があります。そうしないと、ブラウザーへの情報出力が台無しになります。
エミル