XMLHttpRequest实时显示后台处理进度

无主题博客 » 编程语言 » Java » XMLHttpRequest实时显示后台处理进度

今天跟小伙伴儿在讨论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>

效果是这样的:
20141126142330

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

20141126142932

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

发表评论

电子邮件地址不会被公开。 必填项已用*标注