Question

Ajax 请求不是一个新话题了，因为我已经在 第十四章 中已介绍过这个主题，来作为实时语言翻译功能。 当使用 jQuery 时， $.ajax() 函数向服务器发送一个异步请求。

我要发送到服务器的请求将具有类似 /user/\/popup 模式的 URL，在本章开始时我已经将该 URL 添加到应用程序中。 这个请求的响应将包含我需要在弹出窗口中插入的 HTML。

关于这个请求的直接问题是我需要知道包含在 URL 中的“username”的值是什么。 鼠标进入的事件处理函数是通用的，它将在页面中找到的所有用户链接，所以该函数需要从其上下文中确定用户名。

elem 变量包含悬停事件中的目标元素，它是包裹 <a> 元素的 <span> 元素。 为了提取用户名，我可以从 <span> 开始浏览 DOM，移至第一个子元素，即 <a> 元素，然后从中提取文本，这就是在网址中要使用的用户名 。 使用 jQuery 的 DOM 遍历函数，可以很简单地做到：

elem.first().text().trim()

应用于 DOM 节点的 first() 函数返回其第一个子节点。 text() 函数返回节点的文本内容。 该函数不会对文本进行任何修剪，例如，如果在一行中有 <a> ，在下一行中有文本，在另一行中有 </a> ， text() 将返回文本周围的所有空白。 为了消除所有空白并只留下文本，我使用了名为 trim() 的 JavaScript 函数。

这就是我需要向服务器发出请求的所有信息：

app/templates/base.html ：XHR 请求。

    $(function() {
        var timer = null;
        var xhr = null;
        $('.user_popup').hover(
            function(event) {
                // mouse in event handler
                var elem = $(event.currentTarget);
                timer = setTimeout(function() {
                    timer = null;
                    xhr = $.ajax(
                        '/user/' + elem.first().text().trim() + '/popup').done(
                            function(data) {
                                xhr = null
                                // create and display popup here
                            }
                        );
                }, 1000);
            },
            function(event) {
                // mouse out event handler
                var elem = $(event.currentTarget);
                if (timer) {
                    clearTimeout(timer);
                    timer = null;
                }
                else if (xhr) {
                    xhr.abort();
                    xhr = null;
                }
                else {
                    // destroy popup here
                }
            }
        )
    });

代码中，我在外部范围中定义了一个新变量 xhr 。 这个变量将保存我通过调用 $.ajax() 来初始化的异步请求对象。 不幸的是，当直接在 JavaScript 端构建 URL 时，我无法使用 Flask 中的 url_for() ，所以在这种情况下，我必须显式连接 URL 的各个部分。

$.ajax() 调用返回一个 promise，这是一个代表异步操作的特殊 JavaScript 对象。 我可以通过添加 .done(function) 来附加一个完成回调函数，所以一旦请求完成，我的回调函数就会被调用。 回调函数将接收到的响应作为参数，你可以在上面的代码中看到，我将其命名为 data 。 这将是我要放入 popover 的 HTML 内容。

但在我们获得弹窗之前，还有一个细节需要处理，以便给予用户一个良好的体验。 回想一下之前添加的逻辑，如果用户在触发鼠标进入事件之后的一秒内将鼠标指针移出 <span> ，将触发取消弹窗的逻辑。 同样的逻辑也需要应用于异步请求，所以我添加了第二个子句来放弃我的 xhr 请求对象（如果存在）。