6

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

1.クリックログを追加する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. ajaxロガーを呼び出すJQueryクリックイベント（clickCodeはボタン/画像がクリックされた識別子です）：

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

上記のajax呼び出し（1.）は、追跡されているボタンのクリックが新しいページに移動するたびに、ブラウザーによって「キャンセル」されます。

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

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

呼び出しを同期させたくありません。

何かアイデアはありますか、何が問題になる可能性がありますか？クリックイベントが新しいページに移動したときに、以前の非同期呼び出しが終了することを保証するにはどうすればよいですか？

4

3 に答える 3

3

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

  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;
      });
  });
});

ページから離れないリンクのコールバックは、不要な場合は変更することをお勧めします。

于 2012-06-12T04:49:53.277 に答える
0

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

参照: http://blogs.mulesoft.org/cross-domain-rest-calls-using-cors/
また: http://www.biodalliance.org/cors.html

于 2013-08-14T03:02:22.357 に答える
0

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

于 2012-06-12T04:52:52.900 に答える