Javascript 使用$.get启动进度条

我意识到已经有很多与进度条相关的问题出现了。我浏览了其中的许多，但都无法使事情正常进行

简单地说，我正在用JSP开发一个页面，我想在对数据进行调用时在引导中使用一个动画进度条来显示

HTML:

还有我的脚本：

//Serves up the data
$('#btnData').click(function() {

    //THIS IS THE PROGRESS BAR
    $("#searchAnimation").show();

    $.get('daoServlet', function(responseText) {
        $('#dataDisp').html(responseText);
    });

});

我得到了一个想法，%的进度条宽度是$.get调用在获取数据方面所处的位置。我只是不知道怎么做

---

PS-我知道我的for/if in the doGet是一个令人讨厌的反模式，我只是还没有找到解决方法。

我以为ajaxStart在事件中包含了百分比信息。但是，即使它不可能隐藏/显示100%的动画进度条，以指示其加载的内容

ajaxStart文档

进度文件

---

如果加载不使用ajax的内容，还可以抛出ajaxStart事件来触发组件隐藏和显示

你可以做你想做的事情，但是我很确定，要将progressbar的百分比设置为请求的实际完成百分比，所需的时间比你愿意实现的时间要长（而且远远超出了它的价值）。你最好只使用动画gif。它需要WebSocket或来回请求，以及对服务器端的更改，以允许其他脚本计算出进程的进度并生成%。@KevinB是的，我实现了一个，我只是不太喜欢它。感谢你诚实的回答。基本上，你要解决的问题是你必须能够在客户端计算服务器处理和返回请求的时间。在大多数情况下，没有内置的方法可以做到这一点，因此流程必须将其进度通知客户端（例如websockets），或者流程需要将该信息提供给客户端随后需要进行的请求（长轮询）以获得该值。@KevinB感谢您的深入响应，尽管我目前不打算实现它，但如果我将来想重新访问它，您让我了解了它的工作原理。

@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response)
    throws ServletException, IOException
{
    //String that gets returned as HTML
    StringBuilder returnAsHTML = new StringBuilder();

    //See if the class is closed, has a lab, or is just a regular class
    for(ClassInfo classes : springClassListings)
    {
        //Class is full, style accordingly
        if(classes.getSectionMeetingInfo().contentEquals("LEC") && classes.getSectionEnrolled().contentEquals("0"))
        {
            returnAsHTML.append(closedClass(classes));
        }
        else if(classes.getSectionMeetingInfo().contentEquals("LAB")) //These are labs, style accordingly
        {
            returnAsHTML.append(labClass(classes));
        }
        else //These are normal classes without lab components
        {
            returnAsHTML.append(openClass(classes));
        }

    }

    response.setContentType("text/html");
    response.setCharacterEncoding("UTF-8");
    response.getWriter().write(returnAsHTML.toString());
}

//Serves up the data
$('#btnData').click(function() {

    //THIS IS THE PROGRESS BAR
    $("#searchAnimation").show();

    $.get('daoServlet', function(responseText) {
        $('#dataDisp').html(responseText);
    });

});