jquery进度条_jQuery进度栏

jquery进度条

Introduction

介绍

A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer is "You can't." This is a restriction of the HTTP client / server protocol. The only time the server can send information to the client is in response to a request.  So it follows that we need a way for the client to request a progress report and a way for the server to send the progress report.  This article sets up the two parts of the application and builds them step-by-step so you can see exactly how this can be done.  We use jQuery and AJAX in a way that allows the client script to call the server-side script and to get back an indicator of progress.

一个经常被问到的问题是这样的：“我在后台运行一个很长的进程，我想在进程结束时提醒我的客户端。如何向浏览器发送消息？” 不幸的是，简短的答案是“你不能。” 这是HTTP客户端/服务器协议的限制。 服务器只能向客户端发送信息的时间是响应请求。 因此，我们需要一种方法，让客户端请求进度报告，并让服务器发送进度报告。 本文设置了应用程序的两个部分，并逐步构建了它们，因此您可以确切地了解如何完成此工作。 我们使用jQuery和AJAX的方式允许客户端脚本调用服务器端脚本并获取进度指示器。

The Visual Effect in the Browser

浏览器中的视觉效果

When we first load the client web page, we will have an area reserved for the progress bar.  As progress occurs (as indicated by the signal from the server) our progress bar will become visible and move across from left to right until the process is completed.  At the end, it will say "All Done" then it will fade from view and collapse out of the web page.  Here are screen-capture examples of the visual effects.  We used very bright colors for this example; your choice of size and color would be made with your design goals in mind.  These are settable via CSS.

首次加载客户端网页时，将为进度栏保留一个区域。 随着进度的发生（如服务器发出的信号所示），我们的进度条将变为可见，并从左向右移动直到该过程完成。 最后，它会说“ All Done”（全部完成），然后它会从视图中淡出并折叠出网页。 这是视觉效果的屏幕截图示例。 在此示例中，我们使用了非常鲜艳的颜色； 您选择尺寸和颜色时会考虑您的设计目标。 这些可以通过CSS设置。

Before the process starts:

在过程开始之前：

After the progress bar appears:

在进度条出现后：

As the progress bar continues to show greater and greater progress:

<