JavaScriptでページのロード進捗状況を表示

Question

Webサービスからファイルのリストを取得し、リンクとして表示しています。リンクをクリックすると、ファイルのダウンロードが開始されます。問題は、ファイルへの直接アクセスが存在しないことです。リンク上

1. ユーザーがクリックする
2. Serverは
3. ブラウザがあればバックWebサービスからファイルを持って来るために取るようのためにロードされたファイルを取得するために、Webサービスを呼び出します。ここでは、ファイルをダウンロードするためのプロセスがあります
4. ブラウザは最終的に、私が表示したいと思いますダウンロードが開始される前に、Webサービスを待たの不利なユーザーエクスペリエンスに対抗するため

ダウンロードためにユーザにファイルを提供しています「ロードを...」FEをリンクがクリックされたときにedbackダイアログが表示され、ファイルの準備ができたらダイアログが消えます。

jQueryを使用していて、iframeをページに追加して再生していますが、問題は、ファイルが準備完了であることを確認する方法がわかりません。

私は、クライアント側だけでなく、サーバー側（ASP.Netを使用して）で、おそらくまた私はプロセスを合理化するために何かを行うことができます、多くのフィードバックを与えるためのヒントを探しています。ありがとうございました。

更新：明確にするために、これはユーザーのマシンにファイルをダウンロードするためのものです。私が特に探しているのは、ファイルのダウンロード準備ができているかどうかを判断する方法です。上記の手順4を実行すると、「読み込み中...」というメッセージが表示されなくなりました。

Answer 1

ウェブサービスの検索が完了したかどうかを返すだけの仕事は、新しいリクエストURLをサーバーに公開する必要があるようです。

数秒ごとにAJAXがそのサービスをポーリングして、ファイルが準備完了であると応答したときに「読み込み中...」というメッセージを削除してください。

クライアントは、セッションID（多分ファイルID）を送信して、どのファイルが尋ねられているかを知る必要があります。サーバー側では、稼働中のWebサービス検索プロセス/スレッドにどの程度アクセスしているかを問い合わせる必要があります。

Answer 2

あなたは、リンクをクリックすると、リンクがクリックされたショーを待つためにあなたがjQueryのを持つことができ、要求が

Answer 3

を完了したときに呼び出さなければならないjqueryので$アヤックス機能のための完全なオプションを使用することができますディスプレイロードメッセージ。

あなたが従うことができる方法を示す例'Loading - Please wait' Message Display Script。編集 -

は、基本的には、私はそれだけではJavaScriptで行われますが、フラッシュやAjaxで見たことがないプログレスバーのモニターを、したいです。

ここにはFile Upload Demoが役立ちます。

Answer 4

ファイルを取得してストリームに書き戻すASHXにリンクしている場合は、リンクのクリックイベントを変更してメッセージを表示できます。

$(function() { 
    $("a.someClass").click(function() { 
    $("div.message").fadeIn(); // show a loading message 
    return true; // make sure the link still gets followed 
    }); 
}); 

ローディングメッセージは、ASHXがレスポンスを書き戻すのを待っている間に、スピナーなどでもかまいません。

編集：あなたが直接ASHXにリンクしていないので：

$(function() { 
    var ashxCallback = function (data, textStatus) { 
    // data could be: xmlDoc, jsonObj, html, text, etc... 
    this; // the options for this ajax request 
    // textStatus can be one of: "timeout", "error", "notmodified", "success", "parsererror" 
    alert(textStatus); 
    }; 

    $("a.someClass").click(function() { 
    $("div.message").fadeIn(); // show a loading message 
    $.get("some.ashx?id=1234", "", ashxCallback); 
    return false; 
    }); 
}); 

jQuery.get()とjQuery.post()を使用しました。

編集＃2：私はちょうど別の考えを持っていました。 Loading ...メッセージがファイルにリダイレクトされたiframe内にあった場合はどうなりますか？したがって、jQueryでiframeを表示すると、デフォルトのLoading ...というメッセージが表示され、少しスピナーのアニメーションが表示され、永遠にロードされるASHXにiframeのsrc/locationを設定します。 iframeの親ページからそれを隠す/削除するonloadハンドラを与えることができます。サンプルコードが必要な場合はお知らせください。

Answer 5

ファイルの準備がAJAXリクエストのデフォルトタイムアウトを下回る場合、AJAXリクエストを開始し、「Loading ...」というメッセージをユーザに表示することができます。 AJAXコールは、ファイルの可用性をチェックし、利用可能になったときには、メッセージとともに返され（成功かどうか）、ファイルへのリンクを返します。 AJAXリクエストはファイルのダウンロードを行うこともできますが、それはあなたの選択です。