javascript - js能否在一个http长请求中多次进行数据交互？

Question

描述你的问题 能否在请求服务器端执行一个耗时较长的任务时，过程中会返回进度，利用http长连接 服务器端环境为 lighttpd + CGI(linux c实现，非fastcgi) 例如这里的代码，http发起一次请求后，需要等待服务器端C...

大家讲道理 · Answer

前面几位大神说的都对，~~但是题主的要求Ajax是无法实现的。~~

~~Ajax都是一次请求结束了，调用一个回调来通知~~
~~实时的获取数据的动态变化做不到~~

感谢 @白一梓让我知道了XMLHttpRequest level 2 API（对以上言辞做修改），于是有了第4种方法

提供几种方法：

用EventSource（这个个个浏览器的支持不一，IE就不支持）看这两个就能看懂MDN EventSource，这里面有个例子
WebSocket
内嵌一个隐藏的iframe，iframe的src属性指向你的长耗时任务的URL，然后写一个Timer不停的去刷新iframe中的内容，根据内容字符串的最后一个百分号的值，获得进度。
使用ajax XMLHttpRequest level 2 API

PS：另外CGI的机制不太清楚，是CGI执行完毕，一次性的获得stdout的内容，一次性传回，还是一边执行CGI一边传输stdout的输出，如果是前置，那就没办法了

这里把方法4做个例子：
服务器端用nodejs写一个模拟（Node.js >= v4.x)

'use strict';

const http = require('http');

const server = http.createServer();
server.on('request', function(req, res) {
    console.log('HTTP', req.method, req.url);
    let n = 0;
    res.writeHead(200, {
        'Content-Type': 'text/plain',
        'Connection': 'keep-alive',
        'Access-Control-Allow-Origin': '*',
        'Content-Length': 100
    });

    const inter = setInterval(function() {
        res.write('.');
        n++;
        if (n >= 100) {
            clearInterval(inter);
            res.end();
        }
    }, 50);

    res.on('error', function(err) {
        console.log(err);
    });

    res.on('close', function() {
        console.log('Connection close');
    })
});

server.listen(8000);

网页如下：

PHP中文网 · Answer

使用websocket可以满足题主的需求

ringa_lee · Answer

长连接是对底层的TCP连接来说的。意思是一个TCP连接可以给多个HTTP连接复用，从而节省建立和断开连接的时间，提高效率。但是对HTTP来说并没有长连接短连接之分，浏览器接收完服务器发送的响应数据之后本次HTTP请求就完成了。

天蓬老师 · Answer

获取ajax加载进度请看阮一峰的文章XMLHttpRequest Level 2 使用指南的第九节。你可以设置返回http头部content-length为100字节，在每完成一部分任务时，就返回一部分数据，所有任务完成后返回最后的第100字节。只给一个思路，具体我没有试验过。

PHP中文网 · Answer

长轮询(long polling)
你可以通过ajax请求来模拟HTTP长连接，这个需要服务器的配合，服务器端将数据返回给前端后，并不关闭连接~~
同时ajax再获取到数据后再次发送http请求~~
Comet就是这样的一个类似实现

天蓬老师 · Answer

感谢楼上各位大神的回答，总结下最后的思路大概是这个样子的
响应头中写明响应长度，这里为100，当返回的响应长度不够时，该请求不会结束

res.writeHead(200, {
    'Content-Type': 'text/plain',
    'Connection': 'keep-alive',
    'Access-Control-Allow-Origin': '*',
    'Content-Length': 100
});

然后服务端每执行一部分后输出几个字节，这里是每执行1%的工作，写1字节，这样就会触发js端xhr的event事件，该事件的total是响应头中的content-length，这里是100，而lengthComputable是已经收到的字节数。所以通过服务器和前端的配合，这样就可以计算出执行的百分比。

目前通过nodejs做服务器是成功的，cgi还需要测试写一个字节，能否立刻触发前端的event事件，不过问题基本算是解决了，再次谢谢各位！

Php8, saya datang juga

Ketahui reka letak tapak web dalam masa 30 minit

Tutorial Video Permulaan Shangguan Oracle kepada Mahir

Baris pertama kod UNI-APP anda

Berkibar dari awal ke pelancaran apl

Tutorial Video Linux Baharu Brother Lian

Tutorial Video AXURE 9 (Sesuai untuk UI Reka Bentuk Produk Interaktif Pengurus Produk)

Tutorial Video PS Kemahiran Asas Sifar

Tutorial video UI 16 hari untuk anda bermula

Tutorial Video Teknik PS dan Teknik Menghiris

Tutorial Video Pembinaan Persekitaran Awan Alibaba dan Pelancaran Projek

Gambaran Keseluruhan Rangkaian Komputer - Pengetahuan Asas yang Perlu Dikuasai Pengaturcara

Tutorial Penting untuk Pengaturcara - Penjelasan Protokol HTTP

Tutorial Video Websocket