Ajax的惯用技巧（5）-实现进度条-AJAX教程-爱易网页

Ajax的惯用技巧（5）-实现进度条

日期：2014-05-16　浏览次数：20668 次

Ajax的常用技巧（5）---实现进度条

在应用程序的安装和下载过程中，进度条的使用已经是非常普遍了。进度条可以用来表识项目的完成进度，可以用百分比或数字表示，可以水平放置。利用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", u

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。

Ajax的惯用技巧（5）-实现进度条

相关资料更多>

推荐阅读更多>