从PHP脚本获取XMLHttpRequest进度 [英] Getting XMLHttpRequest Progress from PHP Script

问题描述

我正在使用javascript将XMLHttpRequest运行到返回数据的PHP脚本。基本上我希望能够为用户提供一个进度条（而不是旋转的圆圈或其他东西），显示获取和接收数据的进度。我知道如果我得到一个文件，我可以检查内容长度标题并使用它，但是在脚本的情况下，你不知道它检索了多少数据。

I am using javascript to run a XMLHttpRequest to a PHP script which returns data. Basically I want to be able to provide the user with a progress bar (instead of a spinning circle or something) that shows the progress of getting and receiving the data. I know if I was getting a file, I could just check the content length header and use that, but in the case of a script, you don't know how much data it's retrieving.

对此的答案可能就像不可能一样容易，因为现在它似乎就是这样。但总结一下：如何监控正在运行的脚本（php）和XMLHttpRequest的进度？

The answer to this might be as easy as, "it's not possible," because right now it seems that way. But in conclusion: How do you monitor progress of a running script (php) over and XMLHttpRequest?

推荐答案

如果你正在使用FireFox（我相当肯定除IE以外的大多数其他浏览器），然后确实有办法报告在XHR操作期间传输了多少数据。如果有问题的操作发送了正确的标题，则使用此信息计算下载数据的百分比相当容易。

If you're using FireFox (and I'm fairly sure most other browsers other than IE), then there is indeed a way to report how much data has been transferred during an XHR operation. If the operation in question sends the correct header, it's fairly easy to use this information to calculate the percentage of the data downloaded.

我编写了这段代码来确定几年前在XHR操作中传输的数据的百分比，所以我很抱歉它没有反映我从那以后获得的多年编码经验。我几乎肯定不会这样写它！尽管如此，我仍然设法将其捕获，并希望它对您有用。

I wrote this code for determining the percentage of data transferred in an XHR operation years ago, so I apologize for it not reflecting the years of coding experience I've gained since. I almost certainly wouldn't write it this way now! Still, I managed to fish it out, and hope it's of use for you.

在编写本文时，IE7是可用的最新版资源管理器，我记得代码不起作用，因此它包含防止它的代码在IE下初始化。我从来没有在版本8或版本9的测试版中尝试过这个代码，它确实可以在这些版本中使用，但我不能保证它。如果你能在新版IE中使用它，请告诉我！

At the time this was written, IE7 was the latest version of Explorer available, and I remember the code didn't work in that, hence it contains code to prevent it initializing under IE. I've never tried this code out under version 8 or the beta of version 9, and it may indeed work in those versions as well, but I can't vouch for it. If you can get it working in a new version of IE, please let me know!

它的工作原理是在beforeSend中运行代码（回调jQuery提供你想在启动ajax请求之前运行的代码）来设置Javascript间隔（在代码I中）已经放了50毫秒，这可能是太常见了。200毫秒应该仍然充足，并减少对系统的压力）。每次间隔计时器触发时，它都会运行一个查看XHR请求的responseText属性的函数。 responseText属性保存到目前为止收到的数据的原始文本。通过使用length（）字符串方法计算其中有多少个字符，我们可以计算到目前为止已经收集了多少字节。

It works by running code in beforeSend (a callback jQuery provides for code you want to run before starting an ajax request) to set up a Javascript interval (in the code I've put 50 miliseconds, which is probably far too often. 200 miliseconds should still be plenty, and put less strain on the system). Every time the interval timer fires, it runs a function that looks at the responseText attribute of the XHR request. The responseText attribute holds the raw text of the data received thus far. By counting how many characters are in there with the length() string method, we can work out how many bytes have been collected so far.

至于计算要发送的总数据的百分比，这将要求您的服务器端代码发送一个内容长度的标头，其中包含准确计数的数量它要发送的字节数。这需要你的聪明才智，但不应该太难。如果您发送准确的内容长度标头，则它用于计算到目前为止收到的数据的百分比。如果您未设置内容标题，则会显示到目前为止收到的数据量。

As far as working out the percentage of total data to be sent, this will require that your server side code sends a content-length header with an accurate count of how many bytes it is going to send. This will require a little cleverness on your part, but shouldn't prove too difficult. If you send an accurate content-length header, then it is used to calculate a percentage of data received so far. If you don't set a content header, then the amount of data received so far is displayed instead.

<script type="text/javascript">
$.ajax ({
    beforeSend  : function (thisXHR)
    {
        // IE doesn't support responseText access in interactive mode
        if (!$.browser.msie)
        {
            myTrigger = setInterval (function ()
            {
                if (thisXHR.readyState > 2)
                // When there is partial data available use it to determine how much of the document is downloaded
                {   
                    var dlBytes = thisXHR.responseText.length;
                    if (totalBytes == -1)
                        totalBytes  = thisXHR.getResponseHeader ('Content-length');
                    (totalBytes > 0)?
                        $('#progress').html (Math.round ((dlBytes / totalBytes) * 100) + "%"):
                        $('#progress').html (Math.round (dlBytes / 1024) + "K");
                }
            }, 50); // Check the status every 50 miliseconds
        }
    },
    complete    : function ()
    {
        // Kill the download progress polling timer
        if (myTrigger)
            clearInterval (myTrigger);
    }
});
</script>

这篇关于从PHP脚本获取XMLHttpRequest进度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！