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的.

版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

Jquery实现自定义滚动条,DIV滑动效果

浏览器自带的滚动条一般都不符合我们的需求(因为不好看,太丑,还不能改!),网上搜了一下,发现有很多用js或者jquery实现的自定义的滚动条,而且样式都很漂亮。比如说这个: http://manos....
  • csmzl
  • csmzl
  • 2016-10-21 09:40
  • 1214

Android中利用GridView实现水平和垂直均有滚动条的表格效果

文章转载自:http://blog.csdn.net/abnerchai/article/details/7540820,谢谢作者 研究了一下Android的GridView,但是默认的GridVi...

js 实现层随滚动条移动效果

随滚动条移动的层 - 51windows.Net .div{  position: absolute;  border: 2px solid red;  backgro...

jquery 实现滚动条至页面底端自动加载数据效果

无限滚动自动翻页可以说是web2.0时代的一项堪称伟大的技术,它让我们在浏览页面的时候只需要把滚动条拉到网页底部就能自动显示下一页的结果,改变了一直以来只能通过点击下一页来翻页这种常规做法。 无限滚动...

jquery.lazyload.js实现图片延迟加载——wordpress图片随滚动条渐显效果

看到Louis Han的博客有个图片随滚动条渐显的效果,感觉既华丽又能节省资源,一举两得,于是就开始研究。通过查看其源代码以及google搜索知识,初步搞明白了,它是通过一个js来实现的,下面就来介绍...

JQuery页面随滚动条动态加载效果实现

Google阅读器上 有一个AJAX scollLoad效果很 不错,就是阅读项目时不需要翻页,浏览器滚动条往下拉到一定位置时自动加载新的一批项目进来,一直到所有项目加载完为止。要知道,数据量增加很频...

Android中自定义ProgressDialog实现加载滚动条(加载中…)效果

本文所述是通过自定义ProgressDialog实现弹出“加载中……”效果。

jquery使用div实现滚动条效果

查了些div实现滚动条的效果,看了很多,大多都不符合要求。 要求如下: 1.div大小固定,div中内容大小不固定 2.鼠标移动到内容上时,如果内容太大,则出现滚动条,并可以拖动查看,而内容宽度...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

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