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

 

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