ajax应用程序越来越多，而大多数ajax处理都是显示一个‘loading .’在前台，再将数据提交给服务器进行处理，处理后再显示‘已处理’。能否让ajax更友好，实时显示服务器处理的进度？这在一些长期请求中尤其重要，例如上传文件、发送电子邮件和批量处理数据。答案当然是肯定的，不然你也不会写这个，对吧？_.存在的问题：要解决上述功能，需要解决以下问题：1。服务器如何在处理部分数据后将部分响应传输给浏览器？2.浏览器如何处理服务器传输的部分数据并保持http连接直到处理完全完成？要解决第一个问题，只需使用flush以块的形式呈现响应。有关详细信息，请参考我的另一篇文章“刷新以划分页面并逐步呈现”。对于第二个问题，需要XMLHttpRequest的readyState状态。w3c对readyState的定义如下：UNSENT=0；//未发送OPENED=1的请求；//http连接已打开。HEADERS _ RECEIVED=2；//接收响应头LOADING=3；//真正接收响应体DONE=4；//收到请求后，相信大家每天都在使用状态4，但我们这里需要的是状态3。例：废话少说。代码示例比任何书面解释都更有用。这里，我们假设一台服务器每秒需要6秒钟来处理一条记录，总共处理了6条记录。我们需要服务器在每次处理完一条数据时显示处理进度(包括文本和进度条)。服务器端代码(下面是JSP代码):复制的代码如下：% //下面设置内容类型： application/x-JavaScript适应Webkit浏览器(chrome，safari)响应. setheader ('content-type '，' application/x-JavaScript ')；int count=6；//为(int i=0)处理6条数据；icountI ){ //处理完一项后，将结果输出到客户端out . println(I 1)；out . flush()；//这里假设每条数据的处理时间为1秒线程。currentthread()。睡眠(1000)；}% html代码：复制代码如下：DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN ' ' http://www . w3 . org/TR/XHTML 1/DTD/XHTML L1-Transitional . DTD ' html xmlns=' http://www . w3 . org/1999/XHTML ' head style # div progress { width :300 px；height:24px位置：相对；} # DivProgress div { position : absolute；left:0top:0height:24px} # progress BG { background-color : # B9f8 F9；z索引：10；} # progress text { z-index :15；文本对齐：居中；宽度：100%；}/style/head body div id=' div progress ' div id=' progress BG '/div div id=' progress text '/div/div br/button onclick=' send()'提交数据/button script var t=document . getelementbyid(' progress text ')；var BG=document . getelementbyid(' progressBg ')；函数send(){ t.innerHTML='正在加载.'；BG . style . width=' 0px '；新窗口。XMLHttpRequest()；if(！窗户。XMLHttpRequest){ try { xhr=new window。ActiveXObject('微软。XMLHTTP’)；} catch(e) {} } xhr.open('post '，' http://localhost :801/chunk test/chunk . JSP？count=6 ')；var oldSize=0；xhr . onreadystatechange=function(){ if(xhr . readystate 2){ var tmpText=xhr . responsetext . substring(oldSize)；oldSize=xhr . responsetext . length；If(tmpText.length 0 ){ //设置文本t . innerHTMl=TMptext '/6 '；//设置进度条var width=par sent(tmptext)/6 * 300；BG . style . width=width ' px '；}} if(xhr.readyState==4){ //执行请求时，t.innerHTML='执行完成'；BG . style . width=' 300 px '；} } xhr . send(null)；}/script/body/html html html running渲染： 。

缺点：看到这个，可能你已经准备好自己尝试了。注意，上面的方法不错，但是也有一个缺点，那就是对浏览器的支持。目前所有版本的IE浏览器都不支持xhr.readyState==3状态，IE浏览器也不支持在响应完成前读取responseText属性。你可以查看MSDN : XMLHttpRequest对象。基于Webkit的浏览器不太支持，需要设置内容类型：application/x-javascript(测试后发现Content-Type:text/html部分正常，部分异常，application/x-JavaScript正常)。看到缺点后有没有再次打击自己的热情？事实上，我们不需要过多地处理IE。如果IE不支持，就不会显示进度，就像传统的ajax请求一样，总是会显示一个加载，直到请求完成。我们只需要加上一个简单的判断。如果是ie，则不会执行xhr.readyState 2中的代码。如果没有判断，则在IE下报告JS错误。DEMO:演示服务器不是很好，在国外可能随时都不会点击，有时候运行效果也不是很好。如你所知，请使用火狐或chrome查看演示，IE的效果和一般的ajax没什么区别。186 . 43 .8080/chunk test/index . html转载请注明来源于：http://www.cnblogs.com/BearsTaR/，禁止商业使用！58860 . 88888888861