javascript - 与 AJAX 服务器对话时显示弹出 div

Question

当我的网站与 AJAX 服务器通信时，我试图在屏幕中间显示一个弹出窗口。由于某些操作需要几秒钟才能完成，因此我想向用户提供操作正在进行的视觉提示。例如，您可以在我的网站上创建音乐播放列表。创建播放列表时，我希望弹出一个 div 表示它正在我的服务器上创建播放列表。

我做了一个jsfiddle显示我用来尝试生成此内容的函数，但我得到了一些相反的效果。在 fiddle 中，它在尝试与服务器通信后显示弹出窗口(它将无法与服务器通信，因为我拒绝域外的任何内容)，但由于它无法与服务器通信，因此它永远不会调用 hide_popup()。

在我的服务器上，它甚至从不显示弹出窗口(除非我在 show_popup() 调用之后直接调用 alert())。

我不知道为什么会发生这种情况，但我只是想
1. 显示弹窗
2. 执行我的 AJAX 调用
3.隐藏弹窗

有什么建议吗？

Answer 1

您编写代码的方式存在一些问题。以下是其中几个:

(1.)调用:

var response = get_server_response("action=createPlaylist&name="+ name, false);

您期望立即得到响应，而 AJAX 调用不会发生这种情况。此外，您还为 async 参数传递 false，这使其实际上成为一个 sync 调用。这就是为什么您的代码在执行其他操作之前只是等待。

(2.)实现:

xmlhttp.onreadystatechange = function()
{
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200)
    {
        response = xmlhttp.responseText;
    }
}
xmlhttp.open("POST", ajax_server, async);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send(url);
return response;

您仅在 response 中缓存结果，并且在跟踪 onreadystatechange 时不对其进行处理。您实际上是在调用后立即处理它，该调用将在调用后执行，而不是在收到响应时执行。无需在此处返回响应。

(3.)弹出窗口:

您没有在适当的位置使用显示/隐藏。

解决方案:

我建议您在通过实现函数来跟踪 onreadystatechange 时触发回调。在进行网络调用之前显示弹出窗口。根据 readyState 和 status 将其隐藏在回调函数中。

这是一个适合您的 fiddle :http://jsfiddle.net/nDNXc/549/

希望有帮助。