使用AJAX实现Web页面进度条的实例分享
作者：Arison 发布时间：2024-07-25 08:33:33
标签：AJAX,进度条
在应用程序的安装和下载过程中，进度条的使用已经是非常普遍了。进度条可以用来表识项目的完成进度，可以用百分比或数字表示，可以水平放置。利用Ajax技术创建进度条，功能显得更加强大的快捷。
现在创建一个实例，以演示使用Ajax技术实现进度条。该实例同样可以分为客户端代码和服务端代码。
1，服务端代码
服务端代码主要实现一句客户端的请求信息，返回相应的百分比数字。打开记事本，输入下列代码：
<％@ page contentType="text/html; charset=gb2312" language="java" import="java.sql.*" errorPage="" ％>
<％!
int counter = 1;//注意：多用户将共享此变量，此进度条只适合单用户
％>
<％
String task = request.getParameter("task");
String res = "";
if (task.equals("create")) {
res = "1";
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();
％>
将上述代码保存，名称为ProgressBar.jsp。在该文件中，声明了一个变量counter，并赋值为1，该变量是进度条返回百分比数字的依据。在下面使用request对象获取客户端传送的变量task的值，如果该值为create，表示需要重新创建进度条，并设定counter的值为1；如果task不是create，则会依据counter的值返回百分比数字，完成一次操作，counter值加1。
2，客户端代码
本实例的客户端代码主要实现依据返回百分比数字显示进度条的状态。打开记事本，输入下列代码：
<html>
<head>
<title>JSP+Ajax 进度条</title>
<script type="text/javascript">
var xmlHttp;
var bar_color = 'blue';
var span_id = "yellow";
var clear = " "
function createXMLHttpRequest() {
if (window.ActiveXObject) {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
else if (window.XMLHttpRequest) {
xmlHttp = new XMLHttpRequest();
}
}
function go() {
createXMLHttpRequest();
checkDiv();
var url = "ProgressBarJsp.jsp?task=create";
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 = "ProgressBarJsp.jsp?task=poll";
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()", 2000);
} else {
document.getElementById("complete").innerHTML = "网站已完成加载!";
}
}
}
}
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 onload="go();">
<h1 align=center>网站正在加载中，请稍候</h1>
<p>
<table align="center">
<tbody>
<tr><td>
<div id="progressBar" style="padding:2px;border:solid yellow 2px;visibility:hidden">
<span id="block1"> </span>
<span id="block2"> </span>
<span id="block3"> </span>
<span id="block4"> </span>
<span id="block5"> </span>
<span id="block6"> </span>
<span id="block7"> </span>
<span id="block8"> </span>
<span id="block9"> </span>
</div>
</td></tr>
<tr><td align="center" id="complete"></td></tr>
</tbody>
</table>
</body>
</html>
将上述代码保存，名称为JspprogressBar.html。在该文件中，JavaScript函数createXMLHttpRequest()主要用来创建XMLHttpRequest对象，go()函数完成想服务器端发送异步请求，该函数在网页加载时被调用，其主要作用就是通知服务器，并在客户端开始运行进度条。GoCallback()函数主要用于处理服务端的响应，并每隔2秒调用pollServer()函数也是用于向服务端发送异步请求，主要请求服务器端响应的百分数字。PollCallback()函数主要用于处理服务器端响应，即依据服务器端的返回的数字，指定进度条的显示状态。这里需要注意的是，goCallback()函数只执行一次，而PollCallback()函数可以执行多次，其余的三个函数都是实现进度条的辅助函数。
3，运行
将上述两个Jsp文件复制到JSP目录下。运行效果图如下：
0
投稿猜你喜欢
初学Python，写了一小段程序，在pycharm中debug一直报错，在网上搜了很久，尝试多种方法后还是没有用。尝试了很久之后，发现这个问- 前言Python文件默认的编码格式是ascii ，无法识别汉字，因为ascii码中没有中文。所以py文件中要写中文字符时，一般在开头加 #
- 本文实例讲述了python函数局部变量用法。分享给大家供大家参考。具体分析如下：当你在函数定义内声明变量的时候，它们与函数外具有相同名称的其
- 可用下面提供的强制登录的程序，它也可以用来做会员注册的。security.asp<％bLoggedIn =&nb
- 以前写过《 10条影响CSS渲染速度的写法与建议》，今天放些数据出来，供参考；首先说明一点，CSS对网页的最后渲染出来的速度影响非
- 使用步骤：1、安装：npm i jquery-contextmenu --save-dev2、在main.js文件中引包 im
- 如下所示：#! /usr/bin/python3# coding = utf-8# from PyQt5 import QtGui,QtCo
- 先设定一个关系模型如下：from django.db import modelsclass Blog(models.Model): name
- 英文文档：class type(object)class type(name, bases, dict)With one argument,
- 本文实例讲述了php通过获取头信息判断图片类型的方法。分享给大家供大家参考。具体实现方法如下：$filename = '617.gi
- 记录了mysql 8.0.12 的安装配置方法，分享给大家。一、安装1.从网上下载MySQL8.0.12版本，下载地址2. 下载完成后解压我
- Vigenere 加密算法该密码由意大利密码学家 Giovan Battista Bellaso 于 1553 年发明，但几个世纪以来一直归
- Python中专门提供了telnetlib库，用来完成基于telnet协议的通信功能。python3下使用telnetlib模块连接网络设备
- CSS如何做细线表格？天天用Div，倒把CSS表格细线这个最基础的应用忘了。table { border-collapse:&nb
- 本文实例讲述了JS实现仿新浪微博发布内容为空时提示功能。分享给大家供大家参考。具体如下：这里使用JavaScript模拟新浪微博的一个功能，
- 准备工作（接上篇文章的示例也可以）：1. 在index.js文件中引入任一js文件import sum from './sum
- 我设了个排卖的起始时间然后设了一个结束时间现在要精确到小时比如提示 “离到期时间：1天XX小时”大家有什么想法吗？我就是在小时总是不能实现，
- 是否了解线程的同步和异步？线程同步：多个线程同时访问同一资源，等待资源访问结束，浪费时间，效率低线程异步：在访问资源时在空闲等待时同时访问其
- classList属性的方法：add();remove();toggle();描述，在一些页面我们需要使用两个按钮来回切换，如图：我们要使用
- Python信息抽取之乱码解决办法就事论事，直说自己遇到的情况，和我不一样的路过吧，一样的就看看吧信息抓取，用python,beautifu
