豆豆网 > 技术应用 > 程序设计 > Java > Ajax > 正文

Ajax基础教程（4）- 实现基本Ajax技术 4.5 显示进度条

豆豆网技术应用频道 2007年11月21日【字号：小中大】收藏本文

关键字： Ajax 搜索框 UpdatePanel XMLHttpRequest json AJAX入门

本文详细介绍Ajax基础教程（4）- 实现基本Ajax技术 4.5 显示进度条

　　无一例外地，几乎每个应用都会时不时地调用一个长时间运行的事务。如果你关心系统的可用性，就要确保用户能很容易地看到系统的状态。如果是一个胖客户应用，对于长时间运行事务的问题，解决办法很简单：只需显示一个进度条，以便用户知道目前所处状况。不过，在Ajax之前，要在Web应用中做到这一点很不容易。本节将使你了解如何使用Ajax为Web应用建立进度条。

　　在代码清单4-9所示的例子中，再次在pollCallback()方法中使用了setTimeout()，从而每隔2秒调用一次服务器。在processResult()方法中，只是从服务器查找已完成比例（百分数）的第一位数字，从而得出要将进度条中的哪些进度块着色（灰色）。

　　代码清单4-9 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;
　　var bar_color = 'gray';
　　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() {
　　createXMLHttpRequest();
　　checkDiv();
　　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 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 = "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 process:
　　 <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>

来源：CSDN 责编：豆豆技术应用

正在加载评论...