Javascript 如何使用AJAX/jQuery创建进度条来下载XML内容?

Javascript 如何使用AJAX/jQuery创建进度条来下载XML内容?,javascript,jquery,ajax,html,Javascript,Jquery,Ajax,Html,如果这是一个相当简单的答案,我很抱歉,但我已经坚持了一段时间了。目前,我有一个XML文件,用户可以通过多种方式添加图像、音频文件和文本。如果文件变大,我希望页面需要一个进度条 我已经找到了许多关于为上传、PHP文件创建进度条以及设置它们样式的教程,但是我还没有找到任何关于监控已读取和处理的XML文件百分比的教程。我一直试图使我的代码与一起工作,但没有运气 我的简单AJAX调用: $(document).ready(function() { $.ajax({ type: "

如果这是一个相当简单的答案,我很抱歉,但我已经坚持了一段时间了。目前,我有一个XML文件,用户可以通过多种方式添加图像、音频文件和文本。如果文件变大,我希望页面需要一个进度条

我已经找到了许多关于为上传、PHP文件创建进度条以及设置它们样式的教程,但是我还没有找到任何关于监控已读取和处理的XML文件百分比的教程。我一直试图使我的代码与一起工作,但没有运气

我的简单AJAX调用:

$(document).ready(function() {
    $.ajax({
        type: "GET",
        url: xmlTitle,
        dataType: "xml",
        success: parseXML
    });
});
parseXML是我读取XML文件,然后在HTML上正确显示它的函数

基本上,我希望代码自动显示进度条,一旦成功,进度条就会消失并显示内容


如果我的方法不对,我也愿意接受任何其他建议。再次抱歉,如果这是一个简单的问题,但感谢您的回复

这就足够了:

$(document).ready(function() {
    showProgressBar();
    $.ajax({
        type: "GET",
        url: xmlTitle,
        dataType: "xml",
        success: parseXML
    });
    function parseXML(xml){
        hideProgressBar();
        ...
    }
});

如果您想用上传的实际进度更新progressbar,您必须使用
xhr.upload.progress
事件和
xhr.progress
事件,这两个事件都不能在jQuery中实现,因为如果您可以移动到websockets,IE中没有解决方法使它们工作,我认为您将获得在单个线程中管理数据传输的更多能力

如果您想要传统的ajax,我认为您需要一种类似于上传进度的方法:


基本上,轮询服务器并询问它在传输过程中走了多远,然后向用户报告。因此,在同时轮询不同的小型端点时,您将有一个大型ajax请求。您的服务器将上传进度作为用户会话的一部分。

这实际上是我偶然发现的一种可能性。我希望找到一种方法来实际更新进度条,但这是一个简单得多的解决方法。我想我总是可以用加载gif来代替。非常感谢。编辑:我忘了询问AJAX成功声明。成功声明只是说请求成功了,还是所有内容(如图像和音频)都显示正确?@user2059503它只是说请求成功了,返回的数据可以访问。感谢您的回复!从我所做的研究来看,XMLHttpRequest似乎是显示进度条的正确方式,我认为这需要一些PHP代码。我很可能会坚持只显示和隐藏一个div以实现简单性,但是感谢您的回复,这看起来是正确的方法。我只需要找到一种方法来适应下载而不是上传。