Question

我希望在网页上显示数据，假设我在服务器上有一个tracert，可能需要很长时间，但我想显示数据。

如果我这样做：

 $.ajax({
         url: '/cgi-bin/trace.cgi',
         dataType: 'text',
         async: true,
         cache: false,
         success: function (response) {
           $('#traceOut').append(response);
         }
        });

只有在我们完成cgi请求后才会调用它。

我可以直接使用XMLHttpRequest，onreadystatechange和xmlhttp.readyState == 3 这在Firefox中可以正常工作，但在Chrome中它只会在数据达到2k时转储。

我如何在jQuery中执行此操作？

Answer 1

有可能，通过民意调查。棘手的部分是协调服务器端多个用户的进程。我将解释下面的工作流程。

方法

/**
 * Polls a URL until server indicates task is complete,
 * then sends a final request for those results.
 * 
 * Requires jQuery 1.4+.
 */
function poll(params) {

    // offer default params
    params = $.extend({
        error: function(xhr, status, err) {
            console.log('Network error: ' + status + ', ' + err);
        },
        progress: function(prog) {
            console.log(prog);
        },
        timeoutMillis: 600000,    // 10 minutes
        intervalMillis: 3000      // 3 seconds
    }, params);

    // kickoff
    _poll(params);

    function _poll(params) {
        $.ajax({
            url: params.url,
            type: 'GET',
            dataType: 'json',
            timeout: params.timeoutMillis,
            data: 'action=poll',
            success: (function(response, status, xhr) {
                if ('progress' in response) {
                    params.progress('Progress: ' + response.progress);
                }
                if ('status' in response) {
                    if (response.status == 'pending') {
                        // slight delay, then poll again
                        // (non-recursive!)
                        setTimeout((function() {
                            _poll(params);
                        }), params.intervalMillis);
                    }
                    else if (response.status == 'cancelled') {
                        params.progress("Task was cancelled");
                    }
                    else {
                        params.progress("Task complete");
                        // done polling; get the results
                        $.ajax({
                            url: params.url,
                            type: 'GET',
                            timeout: params.timeoutMillis,
                            data: 'action=results',
                            success: params.success,
                            error: params.error
                        });
                    }
                }
            }),
            error: params.error
        });
    }
}

使用示例

poll({
    url: '/cgi-bin/trace.cgi',
    progress: function(prog) {
        $('body #progress').text(prog);
    },
    success: function(response, status, xhr) {
        $('body').html(response);
    }
});

工作流

此方法将向服务器发送请求，并将参数“action”设置为“poll”。 CGI脚本应该启动其后台任务，在用户会话中保留一些状态，并使用JSON格式的字符串进行响应：

{"status": "pending", "progress": "0%"}

浏览器将重复发出这些“action = poll”请求，直到响应显示完成。 CGI脚本必须跟踪任务的进度并相应地响应浏览器。这将涉及会话处理和并发：

{"status": "pending", "progress": "25%"}
{"status": "pending", "progress": "50%"}
{"status": "pending", "progress": "75%"}
{"status": "complete"}

然后，浏览器将发出“action = results”请求以接收后台任务的最终有效负载。在这个例子中，它只是HTML：

"<p>The answer is: 42</p>"

获取来自jquery的数据

1 个答案:

方法

使用示例

工作流