jquery ajax post cancelado

Question

Deseo hacer un seguimiento de los eventos de clic del mouse en un conjunto de componentes de la interfaz de usuario en un conjunto de páginas. Para hacer esto, estoy usando la siguiente llamada jquery/ajax (recortada u):

1. Llamada Ajax que agregará el registro de clics.

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 de clic que se llame el registrador ajax (el clickCode es un identificador para qué botón/imagen se ha hecho clic): (. 1)

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

Lo anterior llamada AJAX es " "cancelado" por el navegador cada vez que se hace clic en el botón de seguimiento lleva a una nueva página.

Si cambio 'aysnc' a 'falso', la llamada ajax se realiza correctamente.

Además, haga clic en eventos que no llevan a una nueva página. Solo se cancelan los eventos de clic que llevan a la nueva página.

No deseo hacer la llamada sincrónica.

¿Alguna idea, cuál podría ser el problema? ¿Cómo puedo garantizar que la llamada asincrónica anterior haya finalizado cuando el evento click lleva a una página nueva?

Answer 1

Como es asíncrono, el código se completará antes de que el registro se produzca. Lo que querrás hacer es pasar una devolución de llamada a la llamada asíncrona. Esto preservará las propiedades asíncronas, pero aún le permitirá irse. Algo como esto:

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

Es probable que desee modificar la llamada de retorno para los enlaces que no están saliendo a la página, cuando no es necesario.

Answer 2

¿Estás utilizando Firebug para hacer un seguimiento de las solicitudes? Si es así, eso no es del todo correcto. Si usa Fiddler para examinar solicitudes, puede ver que son exitosas. El estado cancelado significa principalmente "navegador cancelado esperando respuesta", que de todos modos no le importa.

Answer 3

He fijado utilizando los encabezados CORS en el servidor de punto final llamado AJAX.

Consulte también: http://blogs.mulesoft.org/cross-domain-rest-calls-using-cors/
también: http://www.biodalliance.org/cors.html