网络编程 | 站长之家 | 网页制作 | 图形图象 | 操作系统 | 冲浪宝典 | 软件教学 | 网络办公 | 邮件系统 | 网络安全 | 认证考试 | 系统进程
Firefox | IE | Maxthon | 迅雷 | 电驴 | BitComet | FlashGet | QQ | QQ空间 | Vista | 输入法 | Ghost | Word | Excel | wps | Powerpoint
asp | .net | php | jsp | Sql | c# | Ajax | xml | Dreamweaver | FrontPages | Javascript | css | photoshop | fireworks | Flash | Cad | Discuz!
当前位置 > 网站建设学院 > 网络编程 > Ajax
Tag:注入,存储过程,分页,安全,优化,xmlhttp,fso,jmail,application,session,防盗链,stream,无组件,组件,md5,乱码,缓存,加密,验证码,算法,cookies,ubb,正则表达式,水印,索引,日志,压缩,base64,url重写,上传,控件,Web.config,JDBC,函数,内存,PDF,迁移,结构,破解,编译,配置,进程,分词,IIS,Apache,Tomcat,phpmyadmin,Gzip,触发器,socket
网络编程:ASP教程,ASP.NET教程,PHP教程,JSP教程,C#教程,数据库,XML教程,Ajax,Java,Perl,Shell,VB教程,Delphi,C/C++教程,软件工程,J2EE/J2ME,移动开发
本月文章推荐
.AJAX框架汇总.
.AJAX如何与后台交互 .
.AJAX入门之深入理解JavaScript中.
.Ajax & XMLHttpRequset.
.使用jQuery简化Ajax开发—Ajax开.
.AJAX技术 vs 传统的ASP无刷新技术.
.ajax下RegisterClientScriptBloc.
.xmlHTTP xmlDOC 与 C#中DataSet的.
.基于ASP.NET AJAX的WebPart开发与.
.Ajax跨域问题的一些解决方法.
.Ajax联动下拉框的实现例子.
.基于css样式绑定的样式驱动式AJA.
.使用Ajax时的十个常犯的错误.
.DWR让AJAX如此简单.
.注册起动脚本,ASP.NET AJAX的一.
.结合AJAX进行PHP开发之入门.
.Mashups+AJAX打造全新Web开发.
.AJAX、AJAX实例及AJAX源代码(as.
.利用AJAX和ASP.NET实现简单聊天室 .
.利用Ajax技术写一个迷你留言板WE.

ajax进度条

发表日期:2007-3-7


在最近的一个项目中,有一个上传功能:上传一个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()用来上传文件和写库操作.彼此分工明确.
  特此存档.

上一篇:基于css样式绑定的样式驱动式AJAX程序开发(.net实现) 人气:6638
下一篇:利用Asp.net Ajax异步获取xml文档内容 人气:7951
浏览全部ajax的内容 Dreamweaver插件下载 网页广告代码 祝你圣诞节快乐 2009年新年快乐