問題の声明
非同期リクエストは、ページが表示された後に「ユーザーに」落ちた過剰な情報からサイトユーザーをアンロードする便利な方法です。 オンラインストア内の製品のリストである古典的な例を考えてみましょう。 ユーザーは検索クエリを実行し、その結果、見つかった製品のコンパクトなリストが表示されます。 たとえば、 名前は1つのみです 。 それぞれの名前の下に「詳細」リンクがあり、クリックすると、その名前の下に追加のブロックが開き、すでに製品に関する詳細情報が表示されます。 ユーザーの利便性は明らかです。リスト全体をすばやく確認し、興味のある製品のみを「クリック」して、すぐに次のページに進みます。 これはサーバー側からも有益です-負荷が少なく、発信トラフィックが少なくなります。
ただし、そのようなシステムでは必然的に次の瞬間が発生します。ユーザーは、連続していくつかの「詳細」リンクをすばやくクリックできますが、サーバーは長時間、着信要求を処理します。 1つのXMLHttpRequestオブジェクトのみがAJAXで使用される場合（通常は）、すべての要求は「ヒープ内」に含まれ、要求の結果は必要な場所ではなく表示されます。 したがって、 タスクはサーバーへの同じタイプの非同期リクエストのキューを編成し、前のリクエストが終了した後にのみ次のリクエストが実行されるようにします 。
解決方法
最初の最も明白な方法は、ブラウザーの非同期を禁止することです。最後のパラメーターをfalseに設定します。
request.open（ "GET"、url、 false ）;
残念ながら、それは事実ですが、ブラウザの一部でしか機能せず、たとえば、最新のFirefox 3.5ではそのようなリクエストが満たされません。
2番目のオプションは、XMLHttpRequestオブジェクトの配列を作成し、独自のオブジェクトを介してサーバーへの各リクエストを実行することです。 最適ではなく、不便です。
したがって、javascriptを標準キュー （配列）にします。 一般的なアルゴリズムは次のようになります。
-空の配列を初期化する
-非同期リクエストでは、他のリクエストがすでに実行されているかどうかを確認します。 そうである場合、要求パラメーターをキューに入れて何もしません（サーバーへの要求を実行しないでください）
-ページが更新されると、キューのサイズを確認します。 空でない場合、リクエストを再度初期化します（ユーザーに代わって）
-キューが空になるまでサイクルを繰り返します
したがって、配列から要素を追加および削除し、サーバーから要求の結果が到着するのを待つだけでなく、非同期要求のキューを静かに実装できます。
たとえば、スクリプトの実際の例を見ることができます：
http://moiknigi.com/user_598/books/
スクリプトはどのバージョンでも正常に機能します。
-1つの製品説明を開く
-さらに期待して、いくつかの製品をすばやく「クリック」する
-混合バージョン：一部の製品を「クリック」し、他の製品を開く
-すべての商品をワンクリックで完全に開きます（この場合、20個の要素のキューがすぐに形成され、その後徐々に消去されます）
結論
同じ種類のさまざまなリスト（商品、ニュースなど）を表示する多くのサイトで、同様の単純なアプローチを使用できると思います。 スクリプト自体は理解しやすく、非常に小さいボリュームを占有します。
AJAXリクエストをキューに入れる簡単な方法
All Articles