关闭

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

640人阅读 评论(0) 收藏 举报
 

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

0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:123009次
    • 积分:1738
    • 等级:
    • 排名:千里之外
    • 原创:43篇
    • 转载:27篇
    • 译文:0篇
    • 评论:27条
    文章分类
    最新评论