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

上传人:b****7 文档编号:11200162 上传时间:2023-02-25 格式:DOCX 页数:20 大小:21.51KB
下载 相关 举报
跟我学AJAX技术如何应用AJAX技术实现实时任务进度条的Web应用示例第三部分.docx_第1页
第1页 / 共20页
跟我学AJAX技术如何应用AJAX技术实现实时任务进度条的Web应用示例第三部分.docx_第2页
第2页 / 共20页
跟我学AJAX技术如何应用AJAX技术实现实时任务进度条的Web应用示例第三部分.docx_第3页
第3页 / 共20页
跟我学AJAX技术如何应用AJAX技术实现实时任务进度条的Web应用示例第三部分.docx_第4页
第4页 / 共20页
跟我学AJAX技术如何应用AJAX技术实现实时任务进度条的Web应用示例第三部分.docx_第5页
第5页 / 共20页
点击查看更多>>
下载资源
资源描述

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

《跟我学AJAX技术如何应用AJAX技术实现实时任务进度条的Web应用示例第三部分.docx》由会员分享,可在线阅读,更多相关《跟我学AJAX技术如何应用AJAX技术实现实时任务进度条的Web应用示例第三部分.docx(20页珍藏版)》请在冰豆网上搜索。

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

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

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

1.1.1完善本示例的功能实现代码

1、如何完善本示例能够适合多用户访问?

应用session存储每个用户自己的“工作进度”,从而隔离各个不同用户的“工作进度”,并且不断地更新在session中保存的当前“工作进度”量,最终使得“工作进度”量为局部变量。

2、完善后的ResponeTaskProgressServlet代码

packagecom.px1987.webcrm.servlet;

importjava.io.IOException;

importjava.io.PrintWriter;

importjavax.servlet.ServletException;

importjavax.servlet.http.HttpServlet;

importjavax.servlet.http.HttpServletRequest;

importjavax.servlet.http.HttpServletResponse;

importjavax.servlet.http.HttpSession;

publicclassResponeTaskProgressServletextendsHttpServlet{

publicResponeTaskProgressServlet(){

super();

}

publicvoiddestroy(){

super.destroy();

}

//注意:

多用户将会共享此变量,此进度条示例只适合单用户访问。

怎么能够适合多用户访问?

publicvoiddoGet(HttpServletRequestrequest,HttpServletResponseresponse)

throwsServletException,IOException{

intcounter=0;

StringtaskActionType=request.getParameter("taskActionType");

intreturnCurrentPercent;

if(taskActionType.equals("getCurrentStatus")){

HttpSessionsession=request.getSession();

if(session.getAttribute("counterKeyName")==null){

session.setAttribute("counterKeyName",1);

}

else{

counter=((Integer)session.getAttribute("counterKeyName")).intValue();

}

returnCurrentPercent=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-cache");

PrintWriterout=response.getWriter();

out.println(returnCurrentPercent);

out.flush();

out.close();

}

/**

修改该方法为带一个参数

*/

privateintdoSomeOneTask(intcounter){

returncounter*10;

}

publicvoidinit()throwsServletException{

}

}

1.1.2采用XML进行数据交换实现Web实时任务进度条

1、设计客户端页面taskRequest.jsp(包括CSS和JS)

为了简化实现的过程,本示例将CSS和JS代码都包含在当前的页面中,正常应该分离出来。

<%@pageisELIgnored="false"pageEncoding="GB18030"%>

DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http:

//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

//www.w3.org/1999/xhtml">

任务请求的客户端页面

varxmlHttpRequest;

varcurrentTotalBarAmount="";

functionsendAsynchronousRequest(){

xmlHttpRequest=createXMLHttpRequest();

xmlHttpRequest.onreadystatechange=processXMLHttpResponse_SecondTime;

varrequestServerURL="${pageContext.request.contextPath}/responeTaskProgressServlet.action?

taskActionType=getCurrentStatus";

xmlHttpRequest.open("GET",requestServerURL,true);

xmlHttpRequest.send(null);

}

functioncreateXMLHttpRequest(){

varlocalXMLHttpRequest;

if(window.XMLHttpRequest){

/**

*

*表示用户的浏览器为fireFox等非IE系列,则应用XMLHttpRequest对象模板创建出对象实例

*/

localXMLHttpRequest=newXMLHttpRequest();

}

elseif(window.ActiveXObject){

/**

*

*表示用户的浏览器为IE系列,则应用ActiveXObject对象模板创建出对象实例

*/

try{

localXMLHttpRequest=newActiveXObject("Msxml2.XMLHTTP");

}

catch(e){

try{

localXMLHttpRequest=newActiveXObject("Microsoft.XMLHTTP");

}

catch(e){

window.alert("你的IE浏览器不支持XMLHttpRequest相关的技术实现!

");

}

}

}

returnlocalXMLHttpRequest;

}

functionprocessXMLHttpResponse_SecondTime(){

if(xmlHttpRequest.readyState==4){

if(xmlHttpRequest.status==200){

showCurrentTaskProgress();

}

elseif(xmlHttpRequest.status==400){

window.alert("你的请求无效!

");

}

elseif(xmlHttpRequest.status==404){

window.alert("你向服务端程序请求的URL不正确,未找到请求的目标文件!

");

}

elseif(xmlHttpRequest.status==500){

window.alert("服务器由于遇到错误而不能完成该请求!

");

}

elseif(xmlHttpRequest.status==505){

window.alert("HTTP版本不受支持!

");

}

else{

window.alert("出现了其它不知名的错误!

");

}

}

}

functionshowCurrentTaskProgress(){

/**

获得服务器端程序返回的XML文档数据所对应的DOM对象

*/

varxmlDOMReturnResult=xmlHttpRequest.responseXML;

/**

获得XML文档中指定标签名称的标签中所包含的数据,该数据为任务进度量

*/

varbarConterValue=

xmlDOMReturnResult.getElementsByTagName("currentPercent")[0].firstChild.data;

currentTotalBarAmount=currentTotalBarAmount+"||";

document.getElementById("displayLoadingChartTextID").innerHTML=

"载入中..."+currentTotalBarAmount;

document.getElementById("displayPercentValueTextID").innerHTML=

barConterValue+"%";

if(barConterValue>99){

window.location.href="#";//任务结束时自动跳转到目标页面中

}

else{

setTimeout("sendAsynchronousRequest()",1000);

}

}

注意:

本示例是应用XML传递数据,但应用XML技术会存在有一些问题。

其中一个就是延迟——浏览器不能立即解析XML文档并生成DOM模型,所以这会降低某些Ajax组件需要的“迅捷”感,特别是在较慢的机器上解析大型文档的时候更是如此。

比如“现场搜索”就是一个示例,在这种搜索中,当用户输入搜索术语时,就会从服务器提取搜索结果并显示给用户。

对于现场搜索组件来说,迅速地响应输入是非常重要的,但是同时它还需要迅速而持续地解析服务器的响应。

避免使用XML的最大原因其实还是在客户端需要应用复杂的DOMAPI进行XML解析。

目前比较好的方法是应用JSON(JavaScriptObjectNotation),它是一种轻量级的数据交换格式。

JSON可以将JavaScript对象中表示的一组数据转换为字符串,然后就可以在函数之间轻松地传递这个字符串,或者在异步应用程序中将字符串从Web客户机传递给服务器端程序。

2、修改后的ResponeTaskProgressServlet程序代码

packagecom.px1987.webcrm.servlet;

importjava.io.IOException;

importjava.io.PrintWriter;

importjavax.servlet.ServletException;

importjavax.servlet.http.HttpServlet;

importjavax.servlet.http.HttpServletRequest;

importjavax.servlet.http.HttpServletResponse;

importjavax.servlet.http.HttpSession;

publicclassResponeTaskProgressServletextendsHttpServlet{

publicResponeTaskProgressServlet(){

super();

}

publicvoiddoGet(HttpServletRequestrequest,HttpServletResponseresponse)

throwsServletException,IOException{

intcounter=0;

StringtaskActionType=request.getParameter("taskActionType");

intreturnCurrentPercent;

if(taskActionType.equals("getCurrentStatus")){

HttpSessionsession=request.getSession();

if(session.getAttribute("counterKeyName")==null){

session.setAttribute("counterKeyName",1);

}

else{

counter=((Integer)session.getAttribute("counterKeyName")).intValue();

}

returnCurrentPercent=doSomeOneTask(counter);

counter++;

session.setAttribute("counterKeyName",counter);

if(counter>10){

session.removeAttribute("counterKeyName");

}

}

else{

returnCurrentPercent=0;

}

response.setContentType("text/xml");

response.setHeader("Cache-Control","no-cache");

PrintWriterout=response.getWriter();

out.println("

xmlversion=\"1.0\"encoding=\"UTF-8\"?

>");

out.println("");

out.println(""+returnCurrentPercent+"");

out.println("");

out.flush();

out.close();

}

/*也就是动态创建出下面的XML文件

xmlversion='1.0'encoding='UTF-8'?

>

20

*/

privateintdoSomeOneTask(intcounter){//该方法为完成具体任务的模板方法

returncounter*10;

}

}

1.1.3将客户端的AJAX请求改变为Post请求

1、修改taskRequest.jsp页面中的JS代码中的请求类型

将如下的代码:

varrequestServerURL=

"${pageContext.request.contextPath}/responeTaskProgressServlet.action?

taskActionType=getCurrentStatus";

xmlHttpRequest.open("GET",requestServerURL,true);

xmlHttpRequest.send(null);

改变为如下的代码:

varrequestServerURL=

"${pageContext.request.contextPath}/responeTaskProgressServlet.action";

xmlHttpRequest.open("post",requestServerURL,true);

xmlHttpRequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

xmlHttpRequest.send(requestParameters);

2、在后台ResponeTaskProgressServlet类中添加一个doPost方法

publicvoiddoPost(HttpServletRequestrequest,HttpServletResponseresponse)

throwsServletException,IOException{

doGet(request,response);

}

1.1.4将JavaScript代码从页面中分离到一个独立的JS文件中

1、修改taskRequest.jsp页面

<%@pageisELIgnored="false"pageEncoding="GB18030"%>

DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http:

//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

//www.w3.org/1999/xhtml">

任务请求的客户端页面

src="${pageContext.request.contextPath}/javascript/taskProgressBar.js">

2、javascript目录中的taskProgressBar.js文件

varxmlHttpRequest;

varcurrentTotalBarAmount="";

varrequestServerURL;

varrequestParameters;

functionsendAsynchronousRequest(requestServerURLString,requestParametersString){

requestServerURL=requestServerURLString;

requestParameters=requestParametersString;

createXMLHttpRequestAndSendRequest();

}

functioncreateXMLHttpRequestAndSendRequest(){

xmlHttpRequest=createXMLHttpReques

展开阅读全文
相关资源
猜你喜欢
相关搜索

当前位置:首页 > 高等教育 > 文学

copyright@ 2008-2022 冰豆网网站版权所有

经营许可证编号:鄂ICP备2022015515号-1