基于c样式绑定的样式驱动式AJAX程序开发(.net实现)_Ajax编程_黑客防线网安服务器维护基地--Powered by WWW.RONGSEN.COM.CN

基于c样式绑定的样式驱动式AJAX程序开发(.net实现)

作者:黑客防线网安Ajax教程基地 来源:黑客防线网安Ajax教程基地 浏览次数:0

黑客防线网安网讯:  在最近的一个项目中,有一个上传功能:上传一个cvs文件,然后解析此文件并写入数据库  由于经常需要传很大的文件,客户完成此功能往往需要40分钟,在这个过程中,页面也没有任何提示,...

  在最近的一个项目中有一个上传功能:上传一个cvs文件然后解析此文件并写入数据库
  由于经常需要传很大的文件,客户完成此功能往往需要40分钟,在这个过程中,页面也没有任何提示,用户体验非常不好?
  为何不用ajax作一个进度条呢?
  分两步完成此需求:
  一:写一个简单的ajax,实现最简单的进度条功能
  二:把此进度条改造为项目可用的进度条

  一:最简单的进度条
  1。客户端每2秒发送一个createXMLHttpRequest请求给服务端.并得到服务端返回的进度数据.根据服务端返回的数据,用javascript更新一个table的width,
  这样就模拟了一个进度条.
  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;
          function createXMLHttpRequest() ...{
              if (window.ActiveXObject) ...{
                  xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
              }
              else if (window.XMLHttpRequest) ...{
                  xmlHttp = new XMLHttpRequest();               
              }
          }

          function go() ...{
              createXMLHttpRequest();
              clearBar();
              var url = "ProgressBarServlet?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()", 2000);
                  }
              }
          }
         
          function pollServer() ...{
              createXMLHttpRequest();
              var url = "ProgressBarServlet?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 progress = document.getElementById("progress");
                      var progressPersent = document.getElementById("progressPersent");
       progress.width = percent_complete + "%";
       progressPersent.innerHTML = percent_complete + "%";
                      if (percent_complete < 100) ...{
                          setTimeout("pollServer()", 2000);
                      } else ...{
                          document.getElementById("complete").innerHTML = "Complete!";
                          //document.getElementById("go").disabled = false;
                      }
                  }
              }
          }       
   function clearBar() ...{
     var progress_bar = document.getElementById("progressBar");
     var progressPersent = document.getElementById("progressPersent");
     var complete = document.getElementById("complete");
     progress_bar.style.visibility = "visible"
     progressPersent.innerHTML = "&nbsp;";
     complete.innerHTML = "Begin to upload this file...";
   }
      </script>
    </head>
  <body>
  <div id="progressBar" style="padding:0px;border:solid black 0px;visibility:hidden">
  <table width="300" border="0" cellspacing="0" cellpadding="0"  align="center">
    <tr>
      <td align="center" id="progressPersent">86%</td>
    </tr>
    <tr >
      <td>
   <table width="100%" border="1" cellspacing="0" cellpadding="0" bordercolor="#000000">
    <tr>
      <td>
   <table width="1%" border="0" cellspacing="0" cellpadding="0" bgcolor="#FF0000" id="progress">
                <tr>
                  <td>&nbsp;</td>
                </tr>
              </table></td>
    </tr>
  </table>
  </td>
    </tr>
    <tr>
      <td align="center" id="complete">completed</td>
    </tr>
  </table>
  </div>
  <input id = "go" name="run" type="button" value="run" onClick="go();">

  </body>
  </html>

  
  2:一个模拟servlet:ProgressBarServlet1。java,内容如下:

  
  package com.cyberobject.lcl.ajax;

  import java.io.*;

  import javax.servlet.*;
  import javax.servlet.http.*;

  /**
   *
   * @author nate
   * @version
   */
  public class ProgressBarServlet extends HttpServlet {
   private int counter = 1;
     
   /** Handles the HTTP <code>GET</code> method.
    * @param request servlet request
    * @param response servlet response
    */
   protected void doGet(HttpServletRequest request, HttpServletResponse response)
   throws ServletException, IOException {
    String task = request.getParameter("task");
    String res = "";
         
    if (task.equals("create")) {
     res = "<key>1</key>";
     counter = 1;
    }
    else {
     String percent = "";
     switch (counter) {
      case 1: percent = "10"; 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;
     }
     counter++;
                 
     res = "<percent>" + percent + "</percent>";
    }
         
    PrintWriter out = response.getWriter();
    response.setContentType("text/xml");
    response.setHeader("Cache-Control", "no-cache");
    out.println("<response>");
    out.println(res);
    out.println("</response>");
    out.close();
   }
     
   /** Handles the HTTP <code>POST</code> method.
    * @param request servlet request
    * @param response servlet response
    */
   protected void doPost(HttpServletRequest request, HttpServletResponse response)
   throws ServletException, IOException {
    doGet(request, response);
   }
     
   /** Returns a short description of the servlet.
    */
   public String getServletInfo() {
    return "Short description";
   }
  }
  3:在web。xml中配置好servlet映射:
    <!-- Action Servlet Mapping -->
    <servlet>
     <servlet-name>ProgressBarServlet</servlet-name>
     <display-name>ProgressBarServlet</display-name>
     <servlet-class>com.cyberobject.lcl.ajax.ProgressBarServlet</servlet-class>
    </servlet>

      <servlet-mapping>
     <servlet-name>ProgressBarServlet</servlet-name>
     <url-pattern>/ProgressBarServlet</url-pattern>
    </servlet-mapping>

  
  此时进度条已经可以运行了。接下来的工作就是把它移植到我们的系统。
    二:
    1:在写数据库的class DbOperater中,增加一个progress属性
    private int progress;

    2:在写数据库的class中,增加一个getProgress()方法:
    public int getProgress()
    {
   return progress;
    }
    3: 在写库的for循环中, progress++;
    4:在调用DbOperater的servlet中调用DbOperater的getProgress()方法,这样就为进度条提供了实时数据.
    5:另外:servlet的doGet()用来获得进度数据,doPost()用来上传文件和写库操作.彼此分工明确.
    特此存档.

    黑客防线网安服务器维护方案本篇连接:http://www.rongsen.com.cn/show-15512-1.html
网站维护教程更新时间:2012-04-05 00:02:25  【打印此页】  【关闭
我要申请本站N点 | 黑客防线官网 |  
专业服务器维护及网站维护手工安全搭建环境,网站安全加固服务。黑客防线网安服务器维护基地招商进行中!QQ:29769479

footer  footer  footer  footer