jquery ajax post cancellato

Question

Voglio monitorare gli eventi del clic del mouse su un set di componenti dell'interfaccia utente su un set di pagine. Per fare questo, sto usando la seguente chiamata jquery/ajax (eliminata):

1. Chiamata analogica che aggiungerà la registrazione dei clic.

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 evento click che chiamerà il registratore ajax (la clickCode è un identificatore per il quale il tasto/immagine è stato fatto clic): (. 1)

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

la chiamata AJAX sopra è " annullato "dal browser ogni volta che il clic del pulsante viene tracciato porta a una nuova pagina.

Se cambio 'aysnc' su 'falso', la chiamata ajax ha esito positivo.

Inoltre, fare clic sugli eventi che non portano a una nuova pagina. Solo gli eventi click che stanno per essere pubblicati su una nuova pagina vengono cancellati.

Non voglio rendere la chiamata sincrona.

Qualche idea, quale potrebbe essere il problema? Come posso garantire che la chiamata asincrona prima sia finita quando l'evento click prende una nuova pagina?

Answer 1

Poiché è asincrono, il codice verrà completato prima che la registrazione avvenga. Quello che vorrai fare è passare una richiamata alla chiamata asincrona. Ciò manterrà le proprietà asincrone, ma ti permetterà comunque di andartene. Qualcosa di simile a questo:

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

Probabilmente si vorrà modificare il callback per tutti i collegamenti che non sono lasciare la pagina, quando non è necessario.

Answer 2

Stai utilizzando Firebug per tenere traccia delle richieste? Se è così, non è del tutto corretto. Se usi Fiddler per esaminare le richieste, puoi vedere che hanno successo. Lo stato annullato significa principalmente "browser cancellato in attesa di risposta", che comunque non ti interessa.

Answer 3

Ho corretto utilizzando le intestazioni CORS su AJAX denominato server endpoint.

Consulta anche: http://blogs.mulesoft.org/cross-domain-rest-calls-using-cors/
anche: http://www.biodalliance.org/cors.html