今天跟小伙伴儿在讨论out.flush()实时传回后台处理结果,前端如何接收的问题,小伙伴提供的方法是通过XMLHttpRequest()发送请求,我们来看一下XMLHttpRequest对象:
百度百科中是这样介绍XMLHttpRequest的:
XMLHttpRequest对象可以在不向服务器提交整个页面的情况下,实现局部更新网页。当页面全部加载完毕后,客户端通过该对象向服务器请求数据,服务器端接受数据并处理后,向客户端反馈数据。 XMLHttpRequest 对象提供了对 HTTP 协议的完全的访问,包括做出 POST 和 HEAD 请求以及普通的 GET 请求的能力。XMLHttpRequest 可以同步或异步返回 Web 服务器的响应,并且能以文本或者一个 DOM 文档形式返回内容。尽管名为 XMLHttpRequest,它并不限于和 XML 文档一起使用:它可以接收任何形式的文本文档。XMLHttpRequest 对象是名为 AJAX 的 Web 应用程序架构的一项关键功能。
XMLHttpRequest对象属性:
属性名意义onreadystatechange每次状态改变所触发事件的事件处理程序。responseText从服务器进程返回数据的字符串形式。responseXML从服务器进程返回的DOM兼容的文档数据对象。status从服务器返回的数字代码,比如常见的404(未找到)和200(已就绪)status Text伴随状态码的字符串信息readyState对象状态值readyState值对应意义
- 0 (未初始化) 对象已建立,但是尚未初始化(尚未调用open方法)
- 1 (初始化) 对象已建立,尚未调用send方法
- 2 (发送数据) send方法已调用,但是当前的状态及http头未知
- 3 (数据传送中) 已接收部分数据,因为响应及http头不全,这时通过responseBody和responseText获取部分数据会出现错误
- 4 (完成) 数据接收完毕,此时可以通过通过responseXml和responseText获取完整的回应数据
这样我们可以通过readyState状态值就可以判断请求处理情况,通过responseText可以取得后台响应的内容;
response.flush 用法:
我们在编写程序的过程中,某一个请求可能会处理多个任务,或者处理任务时间比较长,在这种情况下,一般我们会反馈给用户一些信息,比如:“XX正在处理”、“XX处理完毕”等信息,给用户一些信息提示,避免出现后台长时间处理,前端页面“卡死”的现象;这时我们就会用到 response.flush() 。他会将缓冲区中编译完成的数据先发送到客户端。
具体实现方法:在我们处理每个任务之后,写一个 response.write("这里写一些操作提示信息!"),在后面加上 response.flush() 这样就会在每个任务完成之后将提示信息返回到页面。如果我们没有添加response.flush() 所有的信息将会在方法执行完毕后响应到页面。
在网上搜索发现:即使写了response.flush() 但并没有将之前的信息响应到页面。造成这个现象的主要原因在于flush 的内容小于256字节,也就是说编译产生的数据大小要大于256字节,执行response.flush()以后才会响应到页面。这个也是值得注意的地方。
下面代码是今天写的一个例子:
java后台代码:
response.setContentType("text/html");
PrintWriter out = response.getWriter();
out.print("任务处理开始");
out.flush();
for(int i = 0; i<10; i++) {
try {
Thread.sleep(1000);//加入每个任务处理需要1秒钟
} catch (InterruptedException e) {
}
out.print("第["+i+"]个处理任务!");
out.flush();
}
out.print("所有任务处理完毕!");
out.flush();
out.close();
前端页面代码
<a href="###" id="a">点击</a>
<div id="state" style="overflow: auto;font-size: 10px;border-style: double;color: #FFF;background: #000;width:400px;height:100px;" >
</div>
<script>
$(function(){
$("#a").click(function (){
var strLength=0,str="";
var xmlHttp;
if (window.ActiveXObject) {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
} else if (window.XMLHttpRequest) {
xmlHttp = new XMLHttpRequest();
}
xmlHttp.onreadystatechange=function(){
if (xmlHttp.readyState==4 && xmlHttp.status==200){
//这里是200OK
} else {
str = xmlHttp.responseText;
$("#state").append(str.substring(strLength)+"<br />")
strLength=xmlHttp.responseText.length;
}
}
xmlHttp.open("GET","/x/servlet/a");
xmlHttp.send();
});
});
</script>
效果是这样的:

但是测试发现,在谷歌浏览器下是好用的。IE浏览器下报了一个很高端的错误,请看图

坑爹的IE浏览器 这是 MSDN的说明 MSDN: XMLHttpRequest object