ajaxベストプラクティス

Question

私は次のHTMLページを持っているとしましょう。

<A panel to display list of items> 
    Item A 
    Item B 
    Item C 
    ... 

<A panel to display details about item> 
    Details on item X: 

ユーザーがアイテムの1つをクリックするたびに、選択したアイテムの詳細が下部パネルに表示されるようにページを書きたいと思います。

はしかし、私は解決したいいくつかの問題があります：

• がどのように重複した要求を防ぐ必要があります。 （アイテムAの詳細がサーバーから返される前に、ユーザーがアイテムAおよびBへのリンクを押すなど）。
• "詳細がロードされています..."と表示したい場合、コードはどこに置くべきですか？

Answer 1

クリックハンドラを登録すると、データをロードするためのajaxリクエストが発生します。

複数の要求を発射ないことについて、あなたの懸念に対処するために複数の方法があります。

1. は、ちょうどあなたがそれらのいずれかをクリックすると、他のアイテムのハンドラの登録を解除し、ときあなたの要求に戻り、それらを元に戻します。
2. 'requestInProgress'のように、プロパティを設定するリクエストハンドラのスコープ内にtrueとfalseを適切に設定するオブジェクトを含めることができます。つまり、クロージャを使用します。

「詳細がロードされています」と表示するのは簡単です。要求を開始する前にPanel domの値、または必要に応じてinnerhtmlを設定して実際の戻り値を設定できます要求が返されたとき。

jQueryのような多くのjsライブラリは、物事を簡素化するajaxリクエストを作成するAPIを提供しています。たとえば、jQuery.ajaxメソッドは、beforeSend、completion、successの各関数を含むことができるオブジェクトリテラルを取ります。これにより、成功の前、後、そして成功のケースが実行されます（他の関数の中では、http://api.jquery.com/jQuery.ajax/ ）

あなたは確かにベアメタルjで望むことができますが、ライブラリはあなたの人生を楽にします。

Answer 2

重複したリクエストについては、最後のXMLHttpRequestオブジェクトをlastRequest変数内に保持します。私が新しいリクエストを送るときはいつでも、この変数をチェックします。存在する場合はlastRequest.abort()に電話してください。また、あなたの成功コールバックで、リクエストオブジェクトがあなたのlastRequestと同じであることを確認します。それ以外の場合は無視します。 jQueryでは、これは次のようになります：

var lastRequest; 

// Your click handler 
$(".items").click(function() { 
    if (lastRequest) lastRequest.abort(); 
    lastRequest = $.ajax({..., success: function (data, status, request) { 
     if (request != lastRequest) return; // Ignore, it was aborted 

     // Code to show the detail about the selected item 
    }}); 

    // Code to show the in-progress message 
});