jsp实时显示后台批处理进度 - out分块，简单的长连接方式

这两天在实现一个批处理操作，但是想让前台实时显示后台批处理进度，本想着用复杂一些的框架可以实现异步信息调用

但是鉴于是内部管理系统，且只有一两个人用到这个功能，所以做了一个简单的长连接方式的实时响应

有些人说使用ajax请求，定时刷新，个人觉得很耗服务器资源，而且准确的说也不是实时的

【原文摘自 BearRui(AK-47) 的Blog】http://www.blogjava.net/BearRui/archive/2010/06/01/ajax_better_experience.html

使用技术：AJAX - onreadystatechange 事件

　　详细解释：http://www.runoob.com/ajax/ajax-xmlhttprequest-onreadystatechange.html

　　MSDN：https://msdn.microsoft.com/en-us/library/ms535874(VS.85).aspx

要解决实现上面的功能，需要解决下面几个问题：

1. 服务器如何在处理一部分数据后传递部分response到浏览器。

2、浏览器如何能处理服务器传递过来部分数据，并保持http连接直到处理完全完毕。

解决

　　第1个问题，使用flush让response分块进行呈现就可以了，具体请参考我另一遍随笔"flush让页面分块,逐步呈现 http://www.blogjava.net/BearRui/archive/2010/05/19/flush_chunk_encoding.html";
　　第2个问题，则需要用到XMLHttpRequest的readyState状态，w3c对 readyState 定义如下几个值：

　　UNSENT = 0; // 没有发送请求

OPENED = 1; // 已经打开http连接

HEADERS_RECEIVED = 2; // 接收到response header

LOADING = 3; // 真正接收response body

DONE = 4; // 请求接收完毕

另外的问题： readyState每次返回0-4的状态时，state的值是多少呢？200吗？还是其他？

　　首先，status是XMLHttpRequest对象的一个属性，表示响应的HTTP状态码。

　　在HTTP1.1协议下，HTTP状态码总共可分为5大类，如下表所示：

1XX 服务器收到请求，需要继续处理。例如101状态码，表示服务器将通知客户端使用更高版本的HTTP协议。

2XX 请求成功。例如200状态码，表示请求所希望的响应头或数据体将随此响应返回。

3XX 重定向。例如302状态码，表示临时重定向，请求将包含一个新的URL地址，客户端将对新的地址进行GET请求。

4XX 客户端错误。例如404状态码，表示客户端请求的资源不存在。

5XX 服务器错误。例如500状态码，表示服务器遇到了一个未曾预料的情况，导致了它无法完成响应，一般来说，这个问题会在程序代码出错时出现。

　　其次，经过测试，每次readyState有状态变化，如果后台不异常，那么返回都是200，所以当readyState返回4时候，需要对state=200做判断，否则提示批处理异常

下面来看代码

===================前端代码====================

//打开框
$('#settle-batch').dialog("center");
settleBatch.html("");
$('#settle-batch').dialog('open').dialog('setTitle', "批量处理进度显示");

//发送批处理请求
var xhr = new window.XMLHttpRequest();
if(!window.XMLHttpRequest){
try {
xhr = new window.ActiveXObject("Microsoft.XMLHTTP");
} catch(e) {
alertMsg("失败", "创建请求失败，请重试");
}
}
xhr.open("post","http://localhost:8081/WMS/agentsettle/batch");
settleBatch.append("<p>正在发送批处理请求 ...</p>");

//处理实时回调信息
var oldSize=0;
xhr.onreadystatechange = function(){
var readyState = xhr.readyState;
//成功发送请求
if(readyState == 2){
settleBatch.append("<p>启动上月代理分成批处理</p>");
settleBatch.append("<p style='margin: 10px;'></p>");
}
//接收事实数据
if(readyState > 2){
var tmpText = xhr.responseText.substring(oldSize);
oldSize = xhr.responseText.length;
if(tmpText.length > 0 ){
// 设置文本
var str = tmpText.replace(/"/g, "");
settleBatch.append("<p>" + str + "</p>");
}
}
//处理成功
if(readyState == 4){
settleBatch.append("<p style='margin: 10px;'></p>");
if (xhr.status === 200) {
settleBatch.append("<p>批处理完成 !!!</p>");
} else {
settleBatch.append("<p>批处理异常结束 !!!???</p>");
}
}
}
xhr.send(null);

=============后台代码==================

response.setHeader("Content-Type","application/x-javascript");
//设置out的字符编码，否则到前台可能中文乱码
response.setCharacterEncoding("UTF-8");
PrintWriter out = getResponse().getWriter();

Thread.sleep(1000);
out.println("正在处理第1个 ...");
out.flush();

Thread.sleep(1000);
out.println("正在处理第2个 ...");
out.flush();

Thread.sleep(1000);
out.println("正在处理第3个 ...");
out.flush();

Thread.sleep(1000);
out.println("正在处理第4个 ...");

经测试，现在chrome、firefox、360浏览器都支持readyState=3的处理

基于Webkit的浏览器支持的不是很好，需要设置Content-Type：application/x-javascript才行(经测试发现Content-Type:text/html在有些情况下正常，有些情况下又不正常，而用application/x-javascript都正常)。

另外方法：

1、jquery 1.5已经支持onreadysatechange，可以使用

2、有些 消息异步通讯 的框架也可以实现这样的功能，不过要看实现实时显示的功能复杂度