JavaScript/jQuery : How to make sure cross-domain click tracking event succeeds before the user leaves the page?

Question

我正在对公司 Intranet 中的各个页面实现点击跟踪，以便添加一些急需的众包热门链接功能(“过去 24 小时内您部门中最受欢迎的链接”等)

我使用 jQuery 的 .live() 绑定(bind)到页面上所有链接元素的 mousedown 事件，过滤事件，然后在返回之前向后端服务器发出带有各种数据的伪 ajax 请求true 以便触发链接操作:

$("#contentarea a").live("mousedown", function(ev) {
    //
    // detect event, find closest link, process it  here
    //
    $.ajax({
        url: 'my-url',
        cache: false,
        dataType: 'jsonp',
        jsonp: 'cb',
        data: myDataString,
        success: function() {
            // silence is golden -- server does send success JSONP but 
            // regardless of success or failure, we allow the user to continue
        }
    });

    return true; // allow event to continue, user leaves the page.
}

正如您可能从上面猜到的那样，我有几个限制:

• 后端跟踪服务器位于与调用页面不同的子域中。我无法回避这个问题。这就是为什么我使用 JSONP(和 GET)而不是使用 POST 的正确 AJAX。我无法实现 AJAX 代理，因为 Web 服务器没有脚本的出站网络访问权限。
• 这可能不相关，但为了充分披露，内容和脚本位于“主要内容”iframe 内(并且这一点不会改变。我最终可能会将事件监听器移至父框架监视它的链接和所有子内容，但步骤 1 是让它在“1 个子窗口”的简化情况下正常工作)。父级和子级位于同一域。
• 后端是 IIS/ASP(同样，这是一个约束 - 不要问!)，因此我无法立即 fork 后端进程或以其他方式终止响应，而是像在更好的平台

尽管如此，在大多数情况下，系统都能正常工作——我点击页面上的链接，它们就会无缝地出现在数据库中。

但是它并不可靠 - 对于大量链接，特别是目标设置为“_top”的站外链接，它们不会出现。如果链接在新选项卡或窗口中打开，则注册正常。

我已经排除了脚本错误——看来是:

(a) 请求从未及时到达后端；或

(b) 请求正在发出，但 ASP 检测到客户端不久后断开连接，并且由于它是 GET 请求，因此不处理它。

我怀疑 (b)，因为服务器的延迟非常快并且许多链接注册正常。如果我在事件触发后放置一个警报弹出窗口，或者将返回值设置为 false，则该点击将注册成功。

关于如何解决这个问题有什么建议(在我无法改变约束的情况下)？我无法使 GET 请求同步，因为它不是真正的 AJAX。

问:如果我向 ASP 发出 POST 请求，效果会更好吗？如果 (b) 是罪魁祸首，那么 POST 与 GET 的行为是否会有所不同？如果是这样，我可以使用隐藏的 iframe/form 来发布数据。然而，我怀疑这会更慢、更笨重，而且可能仍然无法及时完成。我无法监听请求是否完成，因为它是跨域的。

问:我可以在 GET 请求发出后向脚本添加延迟吗？我如何以单线程方式执行此操作？我需要从我的函数返回 true，以确保默认事件最终触发，所以我不能使用 setTimeout()。等待“成功”触发并设置一些变量的紧密循环会起作用吗？我担心这会使事情卡住太多并且响应速度会变慢。我认为 jQuery Delay() 插件也只是一个循环？

或者是其他我没有想到的东西可能是罪魁祸首？

我不需要万无一失的可靠性。如果所有链接在 95% 的时间内都同样可捕获，那就没问题了。然而现在，有些链接 100% 的时间都可以捕获，而其他链接则无法捕获——这不会影响我想要实现的目标。

提前致谢。

Answer 1

我会尝试不同的方法。您可以绑定(bind)到不同的事件，例如:

$(window).unload(function(event) {
  // tracking code here
});