如何缓冲 Ajax 请求？

Question

我有一个简单的 Ajax 函数，如下所示：

var x;
var myRequest = new Array();

function CreateXmlHttpReq(handler) {
    var xmlhttp = null;
    try {
        xmlhttp = new XMLHttpRequest();
    } catch (e) {
        try {
            xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
        } catch (e) {
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
    }
    xmlhttp.onreadystatechange = handler;
    return xmlhttp;
}

function getResults() {
    var r = Math.random();
    var someVar = document.getElementById("myvar").value;
    var myUrl = "url/of/my/phpScript.php?";
    myUrl += "r=" + r;
    //encodeURIComponent() instead of escape() when i aspect normal text
    myUrl += "&someVar=" + escape(someVar);
    //startLoading just show an overlay with a small rotating gif
    startLoading();
    x++;
    myRequest[x] = CreateXmlHttpReq(function () {
        printResultHandler(x);
    });
    myRequest[x].open("GET", myUrl);
    myRequest[x].send(null);
}

//example handler
function printResultHandler(x) {
    if (myRequest[x].readyState == 4 && myRequest[x].status == 200) {
        //usually i use innerHTML for quick requests, the DOM for more complex req
        document.getElementById(div).innerHTML = myRequest[x].responseText;
        //this will hide the overlay showed ith startLoading()
        stopLoading();
    }
}

而且效果很好。当返回流量很大时（它可以是 XML、HTML 或其他），我只是遇到了一些问题，浏览器似乎“睡着了”一段时间。我不喜欢将大量文本（XML、HTML）合二为一。 处理这个不好。

我想知道是否有某种方法可以缓冲该请求。当请求完成并返回200 状态时，有没有办法逐段获取 responseText（比如说 2048 字节或逐行）？ 我想是这样的：

function printResultHandler(x) {
    if (myRequest[x].readyState == 4 && myRequest[x].status == 200) {
        //usually i use innerHTML for quick requests, the DOM for more complex req
        //document.getElementById(div).innerHTML = myRequest[x].responseText;
        var answer;
        while ((answer = readline(myRequest[x].responseText))) {
            //to something;
        }
        //this will hide the overlay showed ith startLoading()
        stopLoading();
    }
}

简而言之，相当于PHP的readdir()或fread()。

Answer 1

同意，缓冲请求并不是你能做的。

您可以考虑通过一组 HTTP 请求错开用户对数据的请求，在每个 HTTP 请求返回时对其进行解析和处理。

例如，如果用户希望请求记录 1 到 1000，则客户端可以先请求记录 1 到 100，然后对其进行处理、解析和渲染，然后再请求记录 101 到 200，依此类推。前 100 条记录的显示速度相对较快，在很短的一段时间后，接下来的 100 条记录就会显示出来。只要在用户设法处理前 100 条记录之前显示第二条 100 条记录，就应该没问题。完成请求的总时间会更长，但是 Web 应用会显得更灵敏，并且感知到的任务完成时间会更短。

如果您不只是用数据更新元素的 innerHTML 属性，还应该考虑从 XML 切换到 JSON。

要向用户显示对 AJAX 请求的响应，必须首先将响应解析为数据结构，然后再进行渲染。令人惊讶的是，XML 和 JSON 的解析时间几乎相同。不同之处在于遍历和读取生成的数据结构所需的时间。

用于遍历和访问已解析响应的 DOM 中数据的浏览器函数相对较慢。浏览器 DOM API 方法掩盖了 DOM 遍历所涉及的复杂性，并使缓慢的过程看起来既漂亮又简单。

通过解析 JSON 格式的响应来访问 JavaScript 对象中的数据要快得多。对于相同的数据集，遍历 JavaScript 对象比遍历 DOM 树快 2 到 3 倍。

在最近使用 10Mb 源数据对 FireFox 3.1 beta 2 进行的测试中，遍历 XML 响应的 DOM 大约需要 30 秒。对从同一原始大型数据集填充的 JavaScript 对象执行相同操作大约需要 15 秒。

Answer 2

不，没有办法缓冲请求。如果您返回大量数据，然后尝试一次将其全部插入页面，则解析所有数据总是需要很长时间。

您可能需要考虑是否有其他方法可以获得您想要的结果。您是否有理由必须通过 AJAX 请求将如此大量的数据插入页面？

Answer 3

您必须手动完成（也就是自己编写代码）。

一个简单的解决方案如下（C=客户端，S=服务器）

• C 发送请求
• S 准备整个输出
• S 生成某种数据标识符键（例如数据的 md5）
• S 将数据切成块并保存（并确定块数）
• S 返回数据标识符（可能还有块计数）
• C 从第一个块迭代到最后一个块，向服务器发送数据密钥（和块号）
• S 返回请求的块
• C 显示块（或内容正在加载进度条）

需要注意的是，如果您不继续使用进度条方式而是进行即时处理，那么 S 必须将数据切割成块，作为 C 可处理的部分正确的代码片段。