点击超链接执行后端的一个函数？

Question

我的超链接代码如下

<a href="localhost/question/full/4" ></a>

在跳转到localhost/question/full/4这个页面之前，我希望能执行后台的一个函数，目前我的想法是点击之后执行一个函数，这个里面用ajax来执行后台的函数。

问题：这样的方法是最好的吗？会不会因为ajax函数执行时间过长影响后面的页面加载？

Answer 1

一个 ajax 请求一般都不会很长，应该没有什么影响。 也许你可以在 ajax 请求完成前，在页面中显示一个 '跳转中...' 的小框，这样用户体验会更好一点

除非改成在 localhost/question/full/4 这个页面的开头执行后台的那个函数，否则再怎么优化，应该也不会比通过 ajax 请求更快了。

Answer 2

看了一下你这个“标记已读”的需求。对于这种不重要的“收尾工作”，有两个原则：

1. 能延后就延后。
2. 能异步就异步。

因为用户如果网络不给力，如果你提前设置了标记已读，而之后的网页加载不出来，那么用户就看不到新消息了，只能以后再去查阅历史已读消息，体验变差。

标记已读，就一定要真的已读，即确实确定读取新消息页面的DOM加载完毕了再去标注。

所以我的建议是：

1. 不要提前标注已读，也不要用JavaScript，而是直接链接，先把阅读新消息的网页直接加载。
2. 在阅读新消息的网页中，再用JavaScript，确认新页面的DOM加载完成之后，异步请求“标记已读”功能的URL。

这个用jQuery实现是相当方便的：

$(function() {
    $.get("http://example.com/behaviors/markallread");
});

或者可以配合前台CSS做的豪华一些。例如异步请求成功后再去掉未读数量（这样用户进入网页时未读数量不变，但稍后就变成0全部已读）：

$(function() {
    $("#unreadbtn").addClass("loading");
    $.ajax({
        url: "http://example.com/behaviors/markallread", 
        timeout: 10000
    })
    .done(function() {
        $("#unreadbtn").removeClass("has_unread");
        $("#unreadbtn .unreadcount").remove();
    })
    .fail(function() {
        $("#unreadbtn").addClass("ajaxerror");
        $("#unreadbtn").addClass("exclamation");
    })
    .always(function() {
        $("#unreadbtn").removeClass("loading");
    });
}

甚至也可以试试加上超时重试。