jqueryで複数のAJAX呼び出しを処理する

Question

私は自分のウェブサイトにタブ構造を持っています。

各タブをクリックすると、一意のURLでAJAXが呼び出されます。
しかし、連続したタブがクリックされ、ajaxがトリガーされているときは、呼び出しは成功ではなくエラーになります。

ロード時にロードされたタブのみが適切な出力をフェッチしています。
タブを切り替えると（最初のタブのURLが巨大なデータを取得している場合）、エラーになります。

私も.abort()を使用しましたが、私はそれが目的を果たしているとは思いません。
私は何かが不足している可能性があります。いずれかの解決策を提案することができます。

e = Object {readyState: 0, status: 0, statusText: "abort"} 

Answer 1

はあなたの関数にe.preventDefault()を追加します。

$(document).ready(function() { 
    xhr = $.ajax({ 
     url: "www.something.com", 
     type: "GET", 
     cache: true, 
     success: function (response) { 
     alert("successful"); 
     }, 
     error: function (e) { 
      alert("Oops Something went wrong"); 
     } 
    }); 

}); 

$("#stickertab").click(function (e) { 
    appUrl = "www.nothing.com"; 

    $("#show_Sticker").empty(); 
    if (xhr != null) xhr.abort(); 
    xhr = $.ajax({ 
     url: appUrl, 
     type: "GET", 
     cache: true, 
     success: function (response) { 
     alert("successful"); 
     }, 
     error: function (e) { 
      alert(" Oops Something went wrong"); 
     } 
    }); 

}); 

これは私が取得していますエラーは次のとおりです。ここに私のサンプルコードです。

$("#stickertab").click(function (e) { 

    e.preventDefault(); // <-- here 

    appUrl = "www.nothing.com"; 

    $("#show_Sticker").empty(); 
    if (xhr != null) xhr.abort(); 
    xhr = $.ajax({ 
     url: appUrl, 
     type: "GET", 
     cache: true, 
     success: function (response) { 
     alert("successful"); 
     }, 
     error: function (e) { 
      alert(" Oops Something went wrong"); 
     } 
    }); 

});