Question

我在小提琴上取得了成功：http://jsfiddle.net/donhuvy/hfq4ycvs/

但是当我在本地运行它（文件 progress_bar.html ）时，没有任何事情发生。

<!DOCTYPE html>

<html>
<head>
    <title>progress bar...</title>
    <style type="text/css">
        .progress {
            display: block;
            text-align: center;
            width: 0;
            height: 3px;
            background: red;
            transition: width .3s;
        }

        .progress.hide {
            opacity: 0;
            transition: opacity 1.3s;
        }
    </style>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script>
        $(function () {
            var data = [];
            for (var i = 0; i < 100000; i++) {
                var tmp = [];
                for (var i = 0; i < 100000; i++) {
                    tmp[i] = 'hue';
                }
                data[i] = tmp;
            }
            ;

            $.ajax({
                xhr: function () {
                    var xhr = new window.XMLHttpRequest();
                    xhr.upload.addEventListener("progress", function (evt) {
                        if (evt.lengthComputable) {
                            var percentComplete = evt.loaded / evt.total;
                            console.log(percentComplete);
                            $('.progress').css({
                                width: percentComplete * 100 + '%'
                            });
                            if (percentComplete === 1) {
                                $('.progress').addClass('hide');
                            }
                        }
                    }, false);
                    xhr.addEventListener("progress", function (evt) {
                        if (evt.lengthComputable) {
                            var percentComplete = evt.loaded / evt.total;
                            console.log(percentComplete);
                            $('.progress').css({
                                width: percentComplete * 100 + '%'
                            });
                        }
                    }, false);
                    return xhr;
                },
                type: 'POST',
                url: "/echo/html",
                data: data,
                success: function (data) {
                }
            });
        });


    </script>

</head>
<body>

<div class="progress"></div>

</body>
</html>

Answer 1

因为AJAX总是提出请求＆amp;等待来自服务器的响应，我们必须将HTML文件放到Web服务器（Apache HTTP服务器或NGINX），AJAX才会运行。

为什么我的源代码不起作用？

1 个答案: