Ajax实现网页进度条解决方法-AJAX教程-爱易网页

Ajax实现网页进度条解决方法

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

Ajax实现网页进度条
HTML页面

HTML code


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></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 = "progressBar.ashx?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 = "progressBar.ashx?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;

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

Ajax实现网页进度条解决方法

相关资料更多>

推荐阅读更多>