15

サーバーに同期呼び出しを送信するために JQuery ajax 呼び出しを使用しており、その時の読み込みイメージを表示したいと考えています。

ただし、読み込み中の画像は Firefox では表示されますが、IE と chrome では表示されません。デバッグすると、IE で Java スクリプトを呼び出すと、DOM が停止するためブラウザで変更が表示されなくなり、呼び出しが完了すると、すべての変更が表示されることがわかりました。私は ajax 呼び出しで読み込み中の画像を表示し、呼び出しの完了後にそれを削除するため、IE は画像を表示しません。

しかし、アラートボックスを使用すると、応答するまでスレッドを停止するため、IE に読み込み中の画像が表示されます。

IE の実行が停止し、イメージの読み込みが表示されるように、java スクリプトの実行をミリ秒停止する方法はありますか。

JQueryのajaxSend、ajaxComplete、ajaxStart、ajaxStop、Javaスクリプトのtimerイベントは既に試しましたが、解決しません。

事前に感謝します。

4

10 に答える 10

10

XHR のコンテキストでは、同期的とは、リクエストが完了するまでブラウザがフリーズすることを意味します。特定の時間に 1 つのリクエストのみが実行されるようにしたい場合は、独自のフラグを使用して、リクエストが進行中であることを示します。

定義上、リクエストの同期フラグは、他のすべてのアクティビティを停止する必要があることを意味します。Firefox でも動作することに驚いています。前回試したときは動作しませんでしたが、それはずっと前のことです。すべてのブラウザで動作させる方法はありません。を使用してリクエストを遅らせたとしても、setTimeoutせいぜいアニメーション化されていない gif でブラウザがフリーズするだけです。また、ユーザーは、ブラウザがフリーズすることを好みません。特に、リクエストに数分の 1 秒以上かかる場合はなおさらです。

セキュリティや正しい機能に関連する機能をブラウザに依存しないでください。クライアントが 2 つの要求を並行して実行するとアプリケーションが壊れる可能性がある場合は、サーバー側にバグがあります。悪意のあるユーザーが通常の UI 以外のツールを使用して並行して要求を行うことを妨げるものは何もありません。

于 2012-08-17T09:52:27.633 に答える
4

あなたの問題は、おそらく最初の投稿の「同期」部分です。

接続を非同期で開きます。これにより、ブラウザーがロックするのを防ぎ、期待どおりに動作します。(XmlHttpRequest/activex オブジェクトで async = true を設定します)

于 2012-08-16T09:42:38.090 に答える
1

ajax jquery呼び出しの開始時に読み込み中の画像を表示し、成功イベントで非表示にしてみてください

また

セットタイムアウトも使用できます

于 2012-08-14T06:27:13.383 に答える
1

同様の問題があり、ASP.NET の更新パネルを使用して解決しました。PHP またはその他のテクノロジを使用している場合は、ajax 呼び出しを使用する必要があります。同期呼び出しを行う場合、読み込み中の画像は表示されません。

于 2012-08-20T06:38:19.287 に答える
1

You can try to execute the ajax synchronous call in the image load callback.

Something like:

var img = new Image();
img.src = "loading.gif";
img.onload = function() {
    /* ajax synch call */
}

Then append img to DOM.

于 2012-08-21T16:10:42.727 に答える
1

ajax呼び出し中にいくつかのスタイルをUIに適用したように、ajaxを使用しているときに同様の問題にも直面しましたが、これらはUIに適用されず、アラートを設定すると、アラートに対して[OK]がクリックされないまで期待どおりに機能すると言われました

なぜそれが起こっているのか推測できませんが、JQueryを使用してその読み込みを表示または非表示にすることができます.... divうまくいくことを願っています....

于 2012-08-16T11:21:42.583 に答える
0

$.ajax 呼び出しで、async: true を追加する必要があります。次のコードは私のために働きます：

$.ajax({
    url: 'ajax_url',
    data: 'sending_data',
    type: 'POST',
    cache : false,
    async: true,
    beforeSend: function() {
        $('#id_of_element_where_loading_needed').html('html_of_loading_gif');
    },
    success: function(data) {
        $('#id_of_element_where_result_will_be_shown').html(data.body);           
    }
});
于 2014-11-03T09:54:00.693 に答える
0

Sergiu Dumitriu の情報をベースに使用しました。async を true に設定して追加しました

  beforeSend: function() {
    $('#Waiting').jqmShow();
  },
  complete: function() {
    $('#Waiting').jqmHide();
  }

そして、それは私のために働きました。基本的に、私は独自の async:false 属性を作成しました。

于 2013-03-06T16:55:11.133 に答える
0

こんにちは、このように ajax 呼び出しを変更してみてください。

    xmlHttp.open('POST', url, true);
xmlHttp.onreadystatechange = myHandlerFunction;
xmlHttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xmlHttp.setRequestHeader("Accept-Charset", "charset=UTF-8");
xmlHttp.send(query);
于 2012-09-15T12:38:27.613 に答える