J2EE从入门到精通40-41-Ajax(6)

//在表格中新增一列来排列讯息 varrow=createRow(message); table_body.appendChild(row); }

//下次2秒后会再查询一下有无新讯息 setTimeout(queryMessage,2000); } } }

functioncreateRow(message){

varrow=document.createElement(\varcell=document.createElement(\

varcell_data=document.createTextNode(message); cell.appendChild(cell_data); row.appendChild(cell); returnrow; }

伺服端必须传回以下的XML格式，表示目前伺服端所管理的聊天室中可取得的讯息：

聊天讯息一 聊天讯息二 聊天讯息三

以下是个简单的聊天室Servlet： ChatRoomServlet.java packageonlyfun.caterpillar; importjava.io.IOException; importjava.io.PrintWriter; importjava.util.LinkedList; importjava.util.List;

importjavax.servlet.ServletException;

importjavax.servlet.http.HttpServletRequest; importjavax.servlet.http.HttpServletResponse; publicclassChatRoomServletextends

javax.servlet.http.HttpServletimplementsjavax.servlet.Servlet{

privatestaticLinkedListmessages=newLinkedList();

privateListaddMessage(Stringtext){ if(text!=null&&text.trim().length()>0){ messages.addFirst(newMessage(text)); while(messages.size()>10){ messages.removeLast(); } }

returnmessages; }

26

privateListgetMessages(){ returnmessages; }

protectedvoiddoPost(HttpServletRequestrequest,HttpServletResponseresponse) throwsServletException,IOException{ Listlist=null;

if(\Stringmsg=request.getParameter(\//中文处理

msg=newString(msg.getBytes(\list=addMessage(msg); }

elseif(\list=getMessages(); }

response.setContentType(\

response.setHeader(\response.setCharacterEncoding(\

PrintWriterout=response.getWriter(); out.println(\for(inti=0;i

out.println(\}

out.println(\out.close(); } }

Message.java

packageonlyfun.caterpillar; publicclassMessage{ privateStringtext;

publicMessage(Stringnewtext){ text=newtext;

if(text.length()>256){ text=text.substring(0,256); }

text=text.replace('<','['); text=text.replace('&','_'); }

publicStringgetText(){

27

returntext; } }

40.11进度列

如果伺服端收到客户端请求后，必须处理一段时间可以有回应，这时也许可以在客户端设计一个进度列，显示目前伺服端对于请求处理的进度，方式就是让客户端定时以非同步方式取得伺服端的请求进度，并以进度列显示在网页之上。

在这边举个最简单的例子，假设网页中有个按钮，按下去之后会作某些事： ProgressBarEX-1.html

\

进度列

ProgressBarEx-1.js中在按下按钮后，会暂时锁定按钮无法使用，并定时向伺服端取得进度，进度列是一个1像素宽、20像素高的图片，藉由改变它在网页中显示的宽度来模拟进度列的增长：

ProgressBarEx-1.js varxmlHttp;

functioncreateXMLHttpRequest(){ if(window.XMLHttpRequest){ xmlHttp=newXMLHttpRequest(); }

elseif(window.ActiveXObject){

xmlHttp=newActiveXObject(\} }

functiondoSomething(){

document.getElementById(\ pollProgress(); }

functionpollProgress(){

varurl=\createXMLHttpRequest();

28

xmlHttp.onreadystatechange=handleStateChange; xmlHttp.open(\xmlHttp.send(null); }

functionhandleStateChange(){ if(xmlHttp.readyState==4){ if(xmlHttp.status==200){ varpercent=xmlHttp.responseXML.getElementsByTagName( \ varprogressbar=document.getElementById(\ progressbar.innerHTML=

\ +percent+\ if(percent!=100){ //每两秒查询一次进度

setTimeout(pollProgress,2000); } else{ document.getElementById(\ } } } }

伺服端必须传回以下的XML格式表示进度：

10

您可以搭配下面这个超级简单的Servlet来摸拟伺服端的进度处理： ProgressServlet.java

packageonlyfun.caterpillar; importjava.io.IOException;

importjavax.servlet.ServletException;

importjavax.servlet.http.HttpServletRequest; importjavax.servlet.http.HttpServletResponse; importjava.io.*;

importjavax.servlet.http.*;

//超级简单的Servlet，只是用来测试客户端的Progressbarorz.. publicclassProgressServletextendsHttpServlet{ privateintcounter;

protectedvoiddoGet(HttpServletRequestrequest,HttpServletResponseresponse) throwsServletException,IOException{

PrintWriterout=response.getWriter(); response.setContentType(\

29

response.setHeader(\out.println(\out.println(\out.println(10*counter++); out.println(\out.println(\out.close();

if(counter>10){ counter=0; } } }

40.12提示文字

如果您的页面中有很多产品，对于每个产品您会希望有产品说明，但每个产品都会有大量的文字说明，使用者也许只对一两项产品有兴趣，却得下载其它产品的大量文字说明。

您可以使用非同步请求，在使用者将滑鼠指向产品时，从伺服端下载产品说明并显示，这样就可以节省大量的说明文字下载。

例如我的Gossip首页就是一个例子，以下是简化后的HTML内容： TipsEx-1.html

\

提示文字

\ll>

src=\

30