webwork + ajax 整合实例2 ---- 实现滚动条效果

原创 2007年09月26日 14:14:00
 

webwork中应用ajax技术,只要在webwork的返回值上加以区别就可以把 动态取得的值,返回给前台浏览器.

在这个实例中,我们有一个html页面,一个java文件,然后再配置文件中写上相关映射就OK.

代码如下:

progressBar.html


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    
<title>
        Ajax Progress Bar
    
</title>
        
<script type="text/javascript">...
           
var xmlHttp;
           
var key=1;
           
var bar_color = "green";
           
var span_id = "block";
           
var clear = "&nbsp;&nbsp;&nbsp;";

           
function createXMLHttpRequest()...{
                  
if(window.ActiveXObject)...{
                         xmlHttp 
= new ActiveXObject("Microsoft.XMLHTTP");
                  }
else if(window.XMLHttpRequest)...{
                         xmlHttp 
= new XMLHttpRequest();
                  }

           }


           
function go()...{
               key 
= 1;
                  createXMLHttpRequest();
                  checkDiv();
                  
var url = "ProgressBar.action?task=create";
                  
var button = document.getElementById("go");
                  button.disabled 
= true;
                  xmlHttp.open(
"GET",url,true);
                  xmlHttp.onreadystatechange 
= goCallback;
                  xmlHttp.send(
null);
           }


           
function goCallback()...{
               
if(xmlHttp.readyState == 4 )...{
                   
if(xmlHttp.status ==  200)...{
                       setTimeout(
"pollServer()",1000);
                   }

               }

           }


           
function pollServer()...{
                   createXMLHttpRequest();
                   key 
= key + 1;
                   
var url = "ProgressBar.action?task=poll&key=" + key;
                   xmlHttp.open(
"GET",url,true);
                   xmlHttp.onreadystatechange 
= pollCallback;
                   xmlHttp.send(
null);
           }


           
function pollCallback()...{
                    
                
if(xmlHttp.readyState ==4)...{
                    
if(xmlHttp.status ==200)...{
                        
var percent_complete = xmlHttp.responseXML.getElementsByTagName("percent")[0].firstChild.data;
                        
var index = processResult(percent_complete);
                        
for(var i=1; i<index; i++)...{
                            
var elem = document.getElementById("block" + i);
                            elem.innerHTML 
= clear;
                            elem.style.backgroundColor 
= bar_color;
                            
var next_cell = i + 1;
                            
if(next_cell > index && next_cell <=9)...{
                                document.getElementById(
"block" + next_cell).innerHTML = percent_complete + "%";
                            }

                        }

                        
if(index<9)...{
                            setTimeout(
"pollServer()",1000);
                        }
else...{
                            document.getElementById(
"complete").innerHTML = "Complete";
                            document.getElementById(
"go").disabled = false;
                        }

                    }

                }

           }


           
function processResult(percent_complete)...{
               
var ind;
               
if(percent_complete.length == 1)...{
                   ind 
= 1;
               }
else if(percent_complete.length == 2)...{
                   ind 
= percent_complete.substring(0,1);
               }
else...{
                   ind 
= 9;
               }

               
return ind;
           }


           
function checkDiv()...{
               
var progress_bar = document.getElementById("progressBar");
               
if(progress_bar.style.visibility == "visible")...{
                   clearBar();
                   document.getElementById(
"complete").innerHTML = "";
               }
else...{
                   progress_bar.style.visibility 
= "visible";
               }

           }


           
function clearBar()...{
               
for(var i=1; i<10; i++)...{
                  
var elem = document.getElementById("block" + i);
                  elem.innerHTML 
= clear;
                  elem.style.backgroundColor 
= "white";
               }

           }


        
</script>
</head>

<body>
   
<h1>Ajax Progress Bar Example</h1>
   Launch long-running progress:
   
<input type="button" value="Launch" id="go" onclick="go();">
   
<p>
   
<table align="center">
       
<tbody>
           
<tr><td>
               
<div id="progressBar"
                    style
="padding:2px;border:solid black 2px;visibility:hidden">
                    
<span id="block1">&nbsp;&nbsp;&nbsp;</span>
                    
<span id="block2">&nbsp;&nbsp;&nbsp;</span>
                    
<span id="block3">&nbsp;&nbsp;&nbsp;</span>
                    
<span id="block4">&nbsp;&nbsp;&nbsp;</span>
                    
<span id="block5">&nbsp;&nbsp;&nbsp;</span>
                    
<span id="block6">&nbsp;&nbsp;&nbsp;</span>
                    
<span id="block7">&nbsp;&nbsp;&nbsp;</span>
                    
<span id="block8">&nbsp;&nbsp;&nbsp;</span>
                    
<span id="block9">&nbsp;&nbsp;&nbsp;</span>
               
</div>
            
</td></tr>
            
<tr><td align="center" id="complete"></td></tr>
       
</tbody>
     
</table>
</body>
</html>
        

ProgressBar.java


package control;

import java.io.PrintWriter;

import javax.servlet.http.HttpServletResponse;

import com.opensymphony.webwork.ServletActionContext;

import core.BookActionSupport;

public class ProgressBar extends BookActionSupport...{
    
private int counter = 1;
    
    
public String execute()...{
        String task 
= getParameter("task");
        String key 
= getParameter("key");
        key 
= key == null?"0":key;
        counter 
= Integer.valueOf(key).intValue();
        String res 
= "";
        
        
if(task.equals("create"))...{
            res 
= "<key>1</key>";
            counter 
= 1;
        }
else...{
            String percent 
= "";
            
switch(counter)...{
            
case 1: percent = "20"break;
            
case 2: percent = "23"break;
            
case 3: percent = "35"break;
            
case 4: percent = "51"break;
            
case 5: percent = "64"break;
            
case 6: percent = "73"break;
            
case 7: percent = "89"break;
            
case 8: percent = "100"break;
            }

            res 
= "<percent>" + percent + "</percent>";
            res 
= "<rsponse>" + res + "</rsponse>";
        }

        
try...{
            HttpServletResponse response 
= ServletActionContext.getResponse();
            PrintWriter out 
= response.getWriter();
            response.setContentType(
"text/xml");
            response.setHeader(
"Cache-Control","no-cache");
            out.write(res);
            out.close();
        }
catch(Exception e)...{
            System.out.println(e.getMessage());
        }

        
return "";
    }

}

xwork.xml

在此配文件需要注意你的包名,我的包名是helloWorld; 并且我的ProgressBar.java放在control目录下。注意区别!

<?xml version="1.0" encoding="UTF-8"?>

<!DOCTYPE xwork PUBLIC "-//OpenSymphony Group//XWork 1.0//EN" "X:WorkSpaceBFPPropertyconfigwebxwork-1.0.dtd">

<xwork>

<include file="webwork-default.xml"/>
     
     
<package name="helloWorld" extends="webwork-default">
         
<interceptors>
             
<interceptor name="params" class="com.opensymphony.xwork.interceptor.ParametersInterceptor"/>
         
</interceptors>    

        
<default-interceptor-ref name="defaultStack"/>

         
<action name="ProgressBar" class="control.ProgressBar">
               
<result name="success">/jsp/domainS.jsp</result>
               
<interceptor-ref name="model-driven"/>
              
<interceptor-ref name="params"/>          
         
</action>
     
</package>

</xwork>

OK,如果你是copy 的代码,在配置文件正确的情况下,应该可以运行了. 看看结果吧. 一定要注意配置文件和浏览器版本.在IE5以下的版本是不支持ajax的.

webwork + ajax 整合实例

首先, 配置好webwork环境. 在webwork中应用ajax技术,只要在webwork的返回值上加以区别就可以把 动态取得的值,返回给前台浏览器. 在这个实例中,我们有一个html页面,一个ja...
  • sunyadongwanghbjm
  • sunyadongwanghbjm
  • 2007-09-25 12:08:00
  • 2374

在webwork里使用ajax

jsp页面页面上写jquery代码 en/icbc/js/jquery-1.3.1.js" type="text/javascript"> /*ajax请求得到专区分类的个数*/ ...
  • sunvsjay1890
  • sunvsjay1890
  • 2013-02-18 17:00:18
  • 955

webwork + ajax 整合实例

首先, 配置好webwork环境. 在webwork中应用ajax技术,只要在webwork的返回值上加以区别就可以把 动态取得的值,返回给前台浏览器. 在这个实例中,我们有一个html页面,一个ja...
  • thebesghost
  • thebesghost
  • 2007-09-26 16:35:00
  • 2601

struts2框架下用ajax实现网页局部刷新

我们知道AJAX是AsynchronousJavascript And Xml ,他最大的功能就是异步通信实现页面的局部刷新。下面就是用户注册页面时,验证用户名是否已经被注册过(就是验证数据库中是否已...
  • huo2007201019
  • huo2007201019
  • 2012-06-11 22:48:19
  • 6475

js +Ajax 实现滚动条自动加载内容

=html> html> head> script src="./js/jquery-3.2.1.min.js" type="text/javascript">script> scri...
  • glx490676405
  • glx490676405
  • 2017-08-17 17:34:18
  • 133

struts-ajax实现局部刷新分页

struts-ajax实现局部刷新分页
  • Javacghv
  • Javacghv
  • 2015-07-29 23:06:01
  • 722

java ajax 文件上传带滚动条显示

问题:实现文件上传并给出进度条显示上传过程信息。 如何实现上传的功能  ------使用apache的FileUpload组件上传文件如何实现上传文件的监听功能 ------使用ProgressL...
  • zhang1206214477
  • zhang1206214477
  • 2014-12-07 22:27:29
  • 1727

Ajax动态滚动加载数据

看新浪微博,人人网都有这样的效果:滚动条滚动到最下面的时候,新的数据就被自动加载出来了,今天亲自尝试了一下这个效果的实现。 首先,准备一个分页的存储过程: CREATE PROCEDURE pr...
  • dannywj1371
  • dannywj1371
  • 2013-09-22 15:50:01
  • 16004

滚动条滚动到底部加载其他数据(Jquery+ajax)

/*js*/ $(function(){ getData(); var winH = $("#div1").height(); //页面可视区域高度 ...
  • dongzhongyan
  • dongzhongyan
  • 2016-09-22 14:35:40
  • 1198

滚动条效果实现

(function(win, doc, $) { function CusScrollBar(options) { this._init(options); } ...
  • aenana
  • aenana
  • 2016-11-13 14:35:11
  • 364
收藏助手
不良信息举报
您举报文章:webwork + ajax 整合实例2 ---- 实现滚动条效果
举报原因:
原因补充:

(最多只允许输入30个字)