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

• Ajax都是一次请求结束了，调用一个回调来通知

• 实时的获取数据的动态变化做不到

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

提供几种方法：

1. 用EventSource（这个个个浏览器的支持不一，IE就不支持）看这两个就能看懂MDN EventSource，这里面有个例子

2. WebSocket

3. 内嵌一个隐藏的iframe，iframe的src属性指向你的长耗时任务的URL，然后写一个Timer不停的去刷新iframe中的内容，根据内容字符串的最后一个百分号的值，获得进度。

4. 使用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);

网页如下：

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

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

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

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

感谢楼上各位大神的回答，总结下最后的思路大概是这个样子的
响应头中写明响应长度，这里为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事件，不过问题基本算是解决了，再次谢谢各位！