为什么没有收到(之前)卸载事件发送的POST数据?

时间:2012-06-07 18:49:49

标签: javascript jquery django javascript-events

我正在进入网络开发的第二天,所以请保持温和!

我正在尝试编写一个小型网络应用程序,该应用程序允许用户访问网站并单击/点击屏幕以在另一个屏幕上指向一个点。为此我设置了一个Django服务器来处理数据,我使用javascript来获取点击/点击位置,通过POST数据发送到服务器,然后使用Processing.js绘制它(我的老板很大在Processing上,这实际上是通过手机等在大屏幕上与Processing进行交互的测试。

我不是网络开发人员所以即使这个简单的任务也是一个挑战。到目前为止,我感觉很舒服。当用户加载交互网页时,会为应用程序分配一个任意用户ID,以便他们控制其特定的点。我希望在用户离开页面时删除该点。我计划稍后实施备份超时,但我希望首先进行即时删除,以获得最接近预期的最佳体验。 (我认为我们的最终目标是有一个漂亮的大屏幕运行一个简单的游戏,人们可以走过,使用屏幕上的二维码启动互动网站,并加入游戏。当他们感到无聊时,他们只是关闭网站,并从游戏屏幕删除它们,简单)。

在我的交互页面中,我有这段代码(对可怜的变量名称道歉):

<body onload="load()" onbeforeunload="unload()"> 
<canvas id="canv" width="1000" height="1000"/>

<script type="text/jscript">
    var userid;

    function load() {       
        userid = Math.floor(Math.random()*1000) //this will of course be changed
        var canv = document.getElementById('canv');
        canv.addEventListener('click', onCanvasClick);
        //$(window).unload(unload());
    }

    function onCanvasClick(event) {
        var cx, cy;
        var canvv = document.getElementById('canv');

        canoffset = $(canvv).offset();
        cx = event.clientX + document.body.scrollLeft + document.documentElement.scrollLeft - Math.floor(canoffset.left);
        cy = event.clientY + document.body.scrollTop + document.documentElement.scrollTop - Math.floor(canoffset.top) + 1;

        cx = (((cx - 500) / 500) * 3);
        cy = (((cy - 500) / 500) * 3);

        var data = {
            x: cx,
            y: cy,
            id : userid,
            deleteMe : 0
        };
        $.post("", data);
    }

    function unload() {
    //send remove code for this user
        var data = {
            x: 0,
            y: 0,
            id: userid,
            deleteMe : 1
        };
        $.post("", data);
        //alert("test");
    }
</script>

这个POST数据应该发送到Django服务器。从onCanvasClick函数发送的POST已成功接收,我看到点按计划移动。但是,无论是否使用beforeunload或unload事件(或者,如您所见,注释掉JQuery卸载),都不会收到从unload()函数发送的POST。但是,注释掉的警报仍然会触发。

我在这里缺少什么?是否有一种经过验证的方法告诉服务器用户已离开页面?

2 个答案:

答案 0 :(得分:1)

当有人离开您的网页时,没有100%可靠的方式来判断。您可以做的最好的事情是使用一些AJAX轮询并假设用户在轮询停止后离开,或者使用Web套接字(不是普遍可用)来保持连接打开。

例如 - 我正在使用平板电脑浏览您的网站,但我失去了互联网连接。在这种情况下,beforeunload无法帮助您。

答案 1 :(得分:0)

基本上你有一个竞争条件,浏览器通常会赢。

现代浏览器尝试尽快加快页面速度。人们讨厌等待下一页加载,所以他们所做的就是杀死在unload / beforeunload下打开的任何请求。较旧的浏览器会等待for循环,但是他们杀了它。