jquery ajax投稿がキャンセルされました

Question

一連のUIコンポーネントのマウスクリックイベントを一連のページで追跡したいと思います。これを行うには、次のjquery/ajax呼び出しを使用しています（uをトリミングしたもの）：

1.Ajaxコールはクリックロギングを追加します。 AJAXロガーを呼び出す

myClickLogger = { 
    endpoint: '/path/to/my/logging/endpoint.html', 
    logClickEvent: function(clickCode) { 
    $.ajax({ 
     'type': 'POST', 
     'url':  this.endpoint, 
     'async': true, 
     'cache': false, 
     'global': false, 
     'data': { 
      'clickCode':clickCode 
     }, 
     'error': function(xhr,status,err){ 
      alert("DEBUG: status"+status+" \nError:"+err); 
     }, 
     'success': function(data){ 
      if(data.status!=200){ 
       alert("Error occured!"); 
      } 
     } 
    }); 
    } 
}; 

2.JQueryクリックイベントは、（clickCodeボタン/画像がクリックされた識別子である）：（1）

$(document).ready(function() { 
    $(".myClickEvent[clickName]").click(function() { 
     var clickCode = $(this).attr("clickName"); 
     myClickLogger.logClickEvent(clickCode); 
    }); 
}); 

上記AJAX呼び出しです "ボタンクリックが追跡されるたびにブラウザーによって新しいページに移動されます。

'aysnc'を 'false'に変更すると、ajax呼び出しが成功します。

また、新しいページに成功しないクリックイベントも成功します。新しいページに移動したクリックイベントのみがキャンセルされます。

コールを同期させたくありません。

何か問題がありますか？クリックイベントが新しいページに移動したときに、前に非同期呼び出しが完了したことをどうすれば保証できますか？

Answer 1

これは非同期なので、コードはロギングが発生する前に完了します。あなたがしたいことは、非同期呼び出しにコールバックを渡すことです。これにより、非同期プロパティは保持されますが、残しておくことができます。このような何か：

logClickEvent: function(clickCode, callback) { 
    $.ajax({ 
     'type': 'POST', 
     'url':  this.endpoint, 
     'async': true, 
     'cache': false, 
     'global': false, 
     'data': { 
      'clickCode':clickCode 
     }, 
     'error': function(xhr,status,err){ 
      alert("DEBUG: status"+status+" \nError:"+err); 
     }, 
     'success': function(data){ 
      if(data.status!=200){ 
       alert("Error occured!"); 
      } else { 
       callback(); 
      } 
     } 
    }); 
    } 

$(document).ready(function() { 
    $(".myClickEvent[clickName]").click(function(e) { 
     e.preventDefault(); // This will prevent the link from actually leaving right away 
     var clickCode = $(this).attr("clickName"); 
     var href = $(this).attr('href'); 
     myClickLogger.logClickEvent(clickCode, function(href){ 
      if (href) 
       window.location = href; 
     }); 
    }); 
}); 

あなたはおそらく、それは必要はありません場合は、ページを残していないすべてのリンクのためのコールバックを変更したいと思います。

Answer 2

Firebugを使用してリクエストを追跡していますか？もしそうなら、それは完全に正しいわけではありません。 Fiddlerを使用して要求を調べると、それらが成功していることがわかります。キャンセルされたステータスは、ほとんどの場合、「ブラウザが応答を待っているのをキャンセルしました」という意味です。

Answer 3

エンドポイントサーバーと呼ばれるAJAXでCORSヘッダーを使用して固定しました。

も参照してください：http://blogs.mulesoft.org/cross-domain-rest-calls-using-cors/
また：http://www.biodalliance.org/cors.html