javascript - google - xmlhttprequest cors

window.onbeforeunload ajax request in Chrome

Question

Tengo una página web que maneja el control remoto de una máquina a través de Ajax. Cuando el usuario navega fuera de la página, me gustaría desconectarme automáticamente de la máquina. Así que aquí está el código:

window.onbeforeunload = function () {
  bas_disconnect_only();
}

La función de desconexión simplemente envía una solicitud HTTP GET a un script del lado del servidor PHP, que hace el trabajo de desconectarse:

function bas_disconnect_only () {
   var xhr = bas_send_request("req=10", function () {
   });
}

Esto funciona bien en Firefox. Pero con Chrome, la solicitud de Ajax no se envía en absoluto. Hay una solución inaceptable: agregar alerta a la función de devolución de llamada:

function bas_disconnect_only () {
   var xhr = bas_send_request("req=10", function () {
     alert("You''re been automatically disconnected.");
   });
}

Después de agregar la llamada de alerta, la solicitud se enviaría correctamente. Pero como puede ver, en realidad no es una solución alternativa.

¿Alguien podría decirme si esto se puede lograr con Chrome? Lo que estoy haciendo me parece completamente legítimo.

Gracias,

Answer 1

Estaba teniendo el mismo problema, cuando Chrome no enviaba la solicitud AJAX al servidor en el evento window.unload.

Solo pude hacer que funcionara si la solicitud era sincrónica. Pude hacer esto con Jquery y estableciendo la propiedad async en falso :

$(window).unload(function () {
   $.ajax({
     type: ''GET'',
     async: false,
     url: ''SomeUrl.com?id=123''
   });
});

El código anterior funciona para mí en IE9, Chrome 19.0.1084.52 my Firefox 12.

Answer 2

Intente crear una variable (preferiblemente booleana) y hacerla cambiar una vez que obtenga una respuesta de la llamada Ajax. Y ponga la función bas_disconnect_only() dentro de un ciclo while. También tuve un problema como este una vez. Creo que esto sucede porque Chrome no espera la llamada de Ajax. No sé cómo lo arreglé y no he probado este código, así que no sé si funciona. Aquí hay un ejemplo de esto:

var has_disconnected = false;
window.onbeforeunload = function () {
    while (!has_disconnected) {
        bas_disconnect_only();
        // This doesn''t have to be here but it doesn''t hurt to add it:
        return true;
    }
}

Y dentro de la función bas_send_request() ( xmlhttp es la solicitud HTTP):

xmlhttp.onreadystatechange = function() {
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200)
        has_disconnected = true;
}

Buena suerte y espero que esto ayude.

Answer 3

Sé que esta pregunta fue hecha hace un tiempo, y lo que voy a decir es relevante para las versiones más nuevas de Chrome, pero creo que esto podría ser útil para muchos desarrolladores.

Como said @Garry English, enviar una solicitud asíncrona durante la página onunload no funcionará, ya que el navegador matará el hilo antes de enviar la solicitud. sin embargo, enviar una solicitud de sincronización debería funcionar.

Esto fue correcto hasta la versión 29 de Chrome, pero en Chrome V 30 de repente dejó de funcionar como se indica aquí .

Parece que la única forma de hacerlo hoy es mediante el uso del evento onbeforeunload como se sugiere aquí .

PERO NOTA: otros navegadores no le permitirán enviar solicitudes Ajax en el evento onbeforeunload en absoluto. entonces lo que tendrá que hacer es realizar la acción tanto en la descarga como antes de la descarga, y verificar si ya se realizó.

Algo como esto:

var _wasPageCleanedUp = false;
function pageCleanup()
{
    if (!_wasPageCleanedUp)
    {
        $.ajax({
            type: ''GET'',
            async: false,
            url: ''SomeUrl.com/PageCleanup?id=123'',
            success: function ()
            {
                _wasPageCleanedUp = true;
            }
        });
    }
}


$(window).on(''beforeunload'', function ()
{
    //this will work only for Chrome
    pageCleanup();
});

$(window).on("unload", function ()
{
    //this will work for other browsers
    pageCleanup();
});

Espera que esto ayude a cualquiera.

Answer 4

Verifique el método Navigator.sendBeacon() que se ha creado para este fin.

La página de MDN dice:

El método navigator.sendBeacon () se puede usar para transferir de forma asíncrona datos HTTP pequeños del agente de usuario a un servidor web.

Este método aborda las necesidades del código de análisis y diagnóstico que, por lo general, intenta enviar datos a un servidor web antes de la descarga del documento. Enviar los datos antes puede dar como resultado una oportunidad perdida de recopilar datos. Sin embargo, garantizar que los datos se hayan enviado durante la descarga de un documento es algo que tradicionalmente ha sido difícil para los desarrolladores.

Esta es una API relativamente nueva y no parece ser compatible con IE todavía.