使用AJAX实现Web页面进度条的实例分享

发布时间：2020-12-15 23:27:35 所属栏目：百科来源：网络整理

导读：在应用程序的安装和下载过程中，进度条的使用已经是非常普遍了。进度条可以用来表识项目的完成进度，可以用百分比或数字表示，可以水平放置。利用Ajax技术创建进度条，功能显得更加强大的快捷。现在创建一个实例，以演示使用Ajax技术实现进度条。该实例同样

在应用程序的安装和下载过程中，进度条的使用已经是非常普遍了。进度条可以用来表识项目的完成进度，可以用百分比或数字表示，可以水平放置。利用Ajax技术创建进度条，功能显得更加强大的快捷。现在创建一个实例，以演示使用Ajax技术实现进度条。该实例同样可以分为客户端代码和服务端代码。

1，服务端代码

服务端代码主要实现一句客户端的请求信息，返回相应的百分比数字。打开记事本，输入下列代码：

<%! 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 + "";
}

// PrintWriter out = response.getWriter();
response.setContentType("text/xml");
response.setHeader("Cache-Control","no-cache");
out.println("");
out.println(res);
out.println("");
out.close();
%>

2，客户端代码本实例的客户端代码主要实现依据返回百分比数字显示进度条的状态。打开记事本，输入下列代码：

将上述代码保存，名称为JspprogressBar.html。在该文件中，JavaScript函数createXMLHttpRequest()主要用来创建XMLHttpRequest对象，go()函数完成想服务器端发送异步请求，该函数在网页加载时被调用，其主要作用就是通知服务器，并在客户端开始运行进度条。GoCallback()函数主要用于处理服务端的响应，并每隔2秒调用pollServer()函数也是用于向服务端发送异步请求，主要请求服务器端响应的百分数字。PollCallback()函数主要用于处理服务器端响应，即依据服务器端的返回的数字，指定进度条的显示状态。这里需要注意的是，goCallback()函数只执行一次，而PollCallback()函数可以执行多次，其余的三个函数都是实现进度条的辅助函数。

3，运行

将上述两个Jsp文件复制到JSP目录下。运行效果图如下：

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!