解析AJAX进度条_AJAX教程

编辑Tag赚U币
教程Tag:暂无Tag,欢迎添加,赚取U币!

推荐:解读jsp+ajax自动刷新实例
一、JSP文件:auto.jsp %@ page contentType=text/html; charset=gb2312 % % //设置输出信息的格式及字符集 response.setContentType(text/xml; charset=UTF-8); response.setHeader(Cache-Control,no-cache); out.println(response); for(int i=0

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

 

分享:AJAX教程之由省份选择城市
一、test.html html head titleMyHtml.html/title meta http-equiv=keywords content=keyword1,keyword2,keyword3 meta http-equiv=description content=this is my page /head script type=text/javascript function getResult(stateVal) { var u

来源:模板无忧//所属分类:AJAX教程/更新时间:2010-02-28
相关AJAX教程