跟我学AJAX技术如何应用AJAX技术实现实时任务进度条的Web应用示例第三部分.docx

1、跟我学AJAX技术如何应用AJAX技术实现实时任务进度条的Web应用示例第三部分1.1 跟我学AJAX技术如何应用AJAX技术实现实时任务进度条的Web应用示例（第三部分）1.1.1 完善本示例的功能实现代码1、如何完善本示例能够适合多用户访问？ 应用session存储每个用户自己的“工作进度”，从而隔离各个不同用户的“工作进度”，并且不断地更新在session中保存的当前“工作进度”量，最终使得“工作进度”量为局部变量。2、完善后的ResponeTaskProgressServlet代码package com.px1987.webcrm.servlet;import java.io.IOEx

2、ception;import java.io.PrintWriter;import javax.servlet.ServletException;import javax.servlet.http.HttpServlet;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;import javax.servlet.http.HttpSession;public class ResponeTaskProgressServlet extends HttpServlet

3、public ResponeTaskProgressServlet() super(); public void destroy() super.destroy(); /注意：多用户将会共享此变量，此进度条示例只适合单用户访问。怎么能够适合多用户访问？ public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException int counter=0; String taskActionType = request.getParameter(

4、taskActionType); int returnCurrentPercent; if (taskActionType.equals(getCurrentStatus) HttpSession session=request.getSession(); if(session.getAttribute(counterKeyName)=null) session.setAttribute(counterKeyName,1); else counter= (Integer)session.getAttribute(counterKeyName).intValue(); returnCurrent

5、Percent = doSomeOneTask(counter); counter+; session.setAttribute(counterKeyName,counter); if(counter 10) session.removeAttribute(counterKeyName); else returnCurrentPercent = 0; response.setContentType(text/html); /* * 清除浏览器中可能的缓存的设置不产生缓存的效果，从而达到立即显示服务器返送的新的数据 */ response.setHeader(Cache-Control, no-

6、cache); PrintWriter out = response.getWriter(); out.println(returnCurrentPercent); out.flush(); out.close(); /* 修改该方法为带一个参数*/ private int doSomeOneTask(int counter) return counter*10; public void init() throws ServletException 1.1.2 采用XML进行数据交换实现Web实时任务进度条1、设计客户端页面 taskRequest.jsp（包括CSS和JS） 为了简化实现的过

7、程，本示例将CSS和JS代码都包含在当前的页面中，正常应该分离出来。任务请求的客户端页面 #displayLoadingChartTextID font-family:Arial; font-weight:bolder; color:black; background-color:#EAEAEA; padding:0px; border-style:none; width:80px; #displayPercentValueTextID font-family:Arial; color:black; text-align:center; border-width:medium; border-

8、style:none; var xmlHttpRequest; var currentTotalBarAmount =; function sendAsynchronousRequest() xmlHttpRequest=createXMLHttpRequest(); xmlHttpRequest.onreadystatechange = processXMLHttpResponse_SecondTime; var requestServerURL = $pageContext.request.contextPath/responeTaskProgressServlet.action?task

9、ActionType=getCurrentStatus; xmlHttpRequest.open(GET, requestServerURL, true); xmlHttpRequest.send(null); function createXMLHttpRequest() var localXMLHttpRequest; if(window.XMLHttpRequest) /* * * 表示用户的浏览器为fireFox等非IE系列，则应用XMLHttpRequest对象模板创建出对象实例 */ localXMLHttpRequest=new XMLHttpRequest(); else if

10、(window.ActiveXObject) /* * * 表示用户的浏览器为IE系列，则应用ActiveXObject对象模板创建出对象实例 */ try localXMLHttpRequest=new ActiveXObject(Msxml2.XMLHTTP); catch(e) try localXMLHttpRequest=new ActiveXObject(Microsoft.XMLHTTP); catch(e) window.alert(你的IE浏览器不支持XMLHttpRequest相关的技术实现！); return localXMLHttpRequest; function p

11、rocessXMLHttpResponse_SecondTime() if(xmlHttpRequest.readyState = 4) if (xmlHttpRequest.status = 200) showCurrentTaskProgress(); else if(xmlHttpRequest.status =400) window.alert(你的请求无效！); else if(xmlHttpRequest.status =404) window.alert(你向服务端程序请求的URL不正确，未找到请求的目标文件！); else if(xmlHttpRequest.status =5

12、00) window.alert(服务器由于遇到错误而不能完成该请求！); else if(xmlHttpRequest.status =505) window.alert(HTTP版本不受支持！); else window.alert(出现了其它不知名的错误！); function showCurrentTaskProgress() /* 获得服务器端程序返回的XML文档数据所对应的DOM对象 */ var xmlDOMReturnResult=xmlHttpRequest.responseXML; /* 获得XML文档中指定标签名称的标签中所包含的数据，该数据为任务进度量 */ var b

13、arConterValue =xmlDOMReturnResult.getElementsByTagName(currentPercent)0.firstChild.data; currentTotalBarAmount =currentTotalBarAmount + | ; document.getElementById(displayLoadingChartTextID).innerHTML=载入中.+currentTotalBarAmount ; document.getElementById(displayPercentValueTextID).innerHTML=barConter

14、Value +% ; if (barConterValue 99) window.location.href = #; /任务结束时自动跳转到目标页面中 else setTimeout(sendAsynchronousRequest(), 1000); 注意：本示例是应用XML传递数据，但应用XML技术会存在有一些问题。其中一个就是延迟浏览器不能立即解析 XML 文档并生成 DOM 模型，所以这会降低某些 Ajax 组件需要的“迅捷”感，特别是在较慢的机器上解析大型文档的时候更是如此。比如“现场搜索”就是一个示例，在这种搜索中，当用户输入搜索术语时，就会从服务器提取搜索结果并显示给用户。对于现

15、场搜索组件来说，迅速地响应输入是非常重要的，但是同时它还需要迅速而持续地解析服务器的响应。 避免使用 XML 的最大原因其实还是在客户端需要应用复杂的DOM API进行XML解析。目前比较好的方法是应用JSON（JavaScript Object Notation），它是一种轻量级的数据交换格式。JSON 可以将JavaScript对象中表示的一组数据转换为字符串，然后就可以在函数之间轻松地传递这个字符串，或者在异步应用程序中将字符串从 Web 客户机传递给服务器端程序。2、修改后的ResponeTaskProgressServlet程序代码package com.px1987.webcrm.

16、servlet;import java.io.IOException;import java.io.PrintWriter;import javax.servlet.ServletException;import javax.servlet.http.HttpServlet;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;import javax.servlet.http.HttpSession;public class ResponeTaskProgressS

17、ervlet extends HttpServlet public ResponeTaskProgressServlet() super(); public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException int counter=0; String taskActionType = request.getParameter(taskActionType); int returnCurrentPercent; if (taskActi

18、onType.equals(getCurrentStatus) HttpSession session=request.getSession(); if(session.getAttribute(counterKeyName)=null) session.setAttribute(counterKeyName,1); else counter= (Integer)session.getAttribute(counterKeyName).intValue(); returnCurrentPercent = doSomeOneTask(counter); counter+; session.set

19、Attribute(counterKeyName,counter); if(counter 10) session.removeAttribute(counterKeyName); else returnCurrentPercent = 0; response.setContentType(text/xml); response.setHeader(Cache-Control, no-cache); PrintWriter out = response.getWriter(); out.println(); out.println(); out.println(+returnCurrentPe

20、rcent+); out.println(); out.flush(); out.close(); /* 也就是动态创建出下面的XML文件 20*/ private int doSomeOneTask(int counter) /该方法为完成具体任务的模板方法 return counter*10; 1.1.3 将客户端的AJAX请求改变为Post请求1、修改taskRequest.jsp页面中的JS代码中的请求类型 将如下的代码：var requestServerURL =$pageContext.request.contextPath/responeTaskProgressServlet.a

21、ction?taskActionType=getCurrentStatus; xmlHttpRequest.open(GET, requestServerURL, true); xmlHttpRequest.send(null); 改变为如下的代码：var requestServerURL = $pageContext.request.contextPath/responeTaskProgressServlet.action;xmlHttpRequest.open(post, requestServerURL, true); xmlHttpRequest.setRequestHeader(Co

22、ntent-Type,application/x-www-form-urlencoded);xmlHttpRequest.send(requestParameters); 2、在后台ResponeTaskProgressServlet类中添加一个doPost方法public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException doGet(request, response); 1.1.4 将JavaScript代码从页面中分离到一个独

23、立的JS文件中1、修改taskRequest.jsp页面任务请求的客户端页面 #displayLoadingChartTextID font-family:Arial; font-weight:bolder; color:black; background-color:#EAEAEA; padding:0px; border-style:none; width:80px; #displayPercentValueTextID font-family:Arial; color:black; text-align:center; border-width:medium; border-style:

24、none; 2、javascript目录中的taskProgressBar.js文件 var xmlHttpRequest; var currentTotalBarAmount =; var requestServerURL; var requestParameters; function sendAsynchronousRequest(requestServerURLString,requestParametersString) requestServerURL=requestServerURLString; requestParameters=requestParametersString; createXMLHttpRequestAndSendRequest(); function createXMLHttpRequestAndSendRequest() xmlHttpRequest=createXMLHttpReques