JQuery 的 $.get 能否逐步显示内容？

This topic created in 4234 days ago, the information mentioned may be changed or developed.

例如代码：
$.get("test.jsp",function(data){
$("#output").append(data);
});

是获取 test.jsp 的内容，并 append 到 #output，

现在的问题是 test.jsp 中显示的内容是逐步输出的：

out.print("1");out.flush();
Thread.sleep(1000);
out.print("2");out.flush();
Thread.sleep(1000);
out.print("3");out.flush();
Thread.sleep(1000);
out.print("ok");out.flush();

每打印一个数字，sleep(1000)，直接在浏览器打开 test.jsp 也可以看到这种效果
但 $.get("test.jsp"... 无法将这种效果消失出来，总是等到该页面完全处理完成后一次显示出所有内容

将其逐步显示的效果在 #output 中展现出来？

test.jsp

out.flush

output

8 replies • 2014-11-06 04:55:51 +08:00

oott123

Nov 5, 2014

$.get("test.jsp?step=1",function(data){
----$("#output").append(data);
----setTimeout(function(){
--------$.get("test.jsp?step=2",function(data){
------------$("#output").append(data);
--------});
----});
});

oott123

Nov 5, 2014

setTimeout 漏了个参数orz

byc8888

Nov 5, 2014

建议把数据一次提交减少对服务器的请求次数
然后用$.each遍历出来可以达到效果

byc8888

Nov 5, 2014

$.post("test.jsp",{a:1,b:2},function(d){
--- $.each(d,function(i,v){
------- setTimeout('$("#output").append('+ v.data+')',100)
---})
},'json');
服务端输出JSON数据JQ遍历出来！！

andybest

Nov 5, 2014

@oott123 @byc8888
test.jsp 中输出1，2，3只是举个例子，实际上是无法修改 test.jsp 中的代码的

byc8888

Nov 5, 2014

SoloCompany

Nov 6, 2014

jquery.ajax 封装似乎没有针对这个进行优化

最直接的方法还是直接面向 XMLHttpRequest 编程吧
通过 onreadystatechange 事件，在 readyState 转变为 LOADING 的时候 setup 一个 timer/interval 去定期获取 responseText 的内容（holds partial data）并执行你自己的逻辑

最后在 readyState 转变为 DONE 的时候 clear interval

andybest

Nov 6, 2014

@SoloCompany 灵！！！

有没针对这个需求的 JQuery 方法封装呢？类似 readSteam getSteam 之类。。。
真的要自己写一个吗（伸手党又来了）