jquery ajax post anulowany

Question

Chcę śledzić zdarzenia kliknięcia myszą na zestawie składników interfejsu użytkownika na zestawie stron. Aby to zrobić, używam następującego wywołania jquery/ajax (przycięte u):

1. Wywołanie Ajax, które doda rejestrację kliknięć.

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 kliknij zdarzenie, które wywoła rejestrator ajax (the clickCode jest identyfikatorem, który przycisk/obraz został kliknięty): (. 1)

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

Powyższe wywołanie ajax jest " anulowane "przez przeglądarkę, gdy śledzone kliknięcie przycisku prowadzi do nowej strony.

Jeśli zmienię "aysnc" na "false", to wywołanie ajax zakończy się sukcesem.

Co więcej, zdarzenia klikania, które nie zostaną przeniesione na nową stronę, powiodą się. Tylko zdarzenia kliknięcia podejmowane na nowej stronie są anulowane.

Nie chcę, aby połączenie było synchroniczne.

Wszelkie pomysły, jaki może być problem? Jak mogę zagwarantować, że wywołanie asynchroniczne przed zakończeniem, gdy zdarzenie kliknięcia przejdzie na nową stronę?

Answer 1

Ponieważ jest to asynchroniczne, kod zostanie ukończony, zanim nastąpi rejestracja. To, co chcesz zrobić, to przekazać wywołanie zwrotne do połączenia asynchronicznego. Zachowa to właściwości asynchroniczne, ale nadal pozwoli Ci odejść. Coś takiego:

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

Prawdopodobnie będziesz chciał zmodyfikować zwrotnego dla jakichkolwiek powiązań, które nie są opuszczania strony, gdy nie jest to konieczne.

Answer 2

Czy używasz Firebug do śledzenia żądań? Jeśli tak, to nie jest całkowicie poprawne. Jeśli użyjesz Fiddlera do zbadania żądań, możesz zobaczyć, że się udało. Status anulowania oznacza przede wszystkim "przeglądarka anulowała oczekiwanie na odpowiedź", co i tak nie ma znaczenia.

Answer 3

Naprawiono przy użyciu nagłówków CORS na serwerze AJAX nazywanym serwerem punktu końcowego.

Zobacz także: http://blogs.mulesoft.org/cross-domain-rest-calls-using-cors/
również: http://www.biodalliance.org/cors.html