Во время установки и загрузки приложений использование стержней прогресса стало очень распространенным явлением. Прогресс может быть использован для определения прогресса завершения проекта, может быть представлен процентами или числами и может быть размещена горизонтально. Используя технологию Ajax для создания баров прогресса, функция становится более мощной и быстрой.
Теперь создайте экземпляр, чтобы продемонстрировать реализацию баров прогресса с использованием технологии AJAX. Этот экземпляр также можно разделить на код клиента и код сервера.
1. Код сервера
Код сервера в основном реализует предложение информации о запросе клиента и возвращает соответствующий процентный номер. Откройте блокнот и введите следующий код:
<%@ page contentype = "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"; счетчик = 1; } else {String процент = ""; Switch (счетчик) {случай 1: процент = "10"; перерыв; Случай 2: процент = "23"; перерыв; Случай 3: процент = "35"; перерыв; Случай 4: процент = "51"; перерыв; Случай 5: процент = "64"; перерыв; Случай 6: процент = "73"; перерыв; Случай 7: процент = "89"; перерыв; Случай 8: процент = "100"; перерыв; } counter ++; res = "<prot>" + процент + "</процент>"; } // printWriter out = response.getWriter (); response.setContentType ("text/xml"); response.setheader («Контроль кэша», «без каша»); out.println ("<sonsect>"); out.println (res); out.println ("</response>"); out.close (); %>Сохраните вышеуказанный код с именем ProgressBar.jsp. В этом файле объявляется счетчик переменной и присваивается значение 1, которое является основой для панели прогресса для возврата процентного числа. Ниже используйте объект запроса, чтобы получить значение задачи переменной, передаваемой клиентом. Если значение создается, это означает, что план прогресса должен быть воссоздан, а значение счетчика установлено на 1; Если задача не создается, процентное число будет возвращено на основе значения счетчика, а операция будет завершена, а значение счетчика будет добавлено в 1.
2. Клиентский код
Клиент -код этого примера в основном реализует статус панели прогресса на основе процентного числа доходности. Откройте блокнот и введите следующий код:
<html> <Head> <Title> JSP+Ajax Progress Bar </title> <script type = "text/javascript"> var xmlhttp; var bar_color = 'blue'; var span_id = "желтый"; 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 = опрос"; xmlhttp.open ("Get", url, true); xmlhttp.onreadystatechange = pollcallback; xmlhttp.send (null); } function pollcallback () {if (xmlhttp.readyState == 4) {if (xmlhttp.status == 200) {var onty_complete = xmlhttp.responsexml.getelementsbytagname ("процент") [0] .firstchild.data; var index = processResult (процент_компет); 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 = процент_комплета + "%"; }} if (index <9) {setTimeout ("pollServer ()", 2000); } else {document.getElementById ("overse"). innerHtml = "Веб -сайт был загружен!"; }}}}} function processResult (процент_комплета) {var ind; if (процент_комплета.length == 1) {ind = 1; } else if (процент_комплета.length == 2) {ind = процент } else {ind = 9; } return ind; } function checkdiv () {var progress_bar = document.getElementbyid ("projectbar"); if (progress_bar.style.visibility == "visible") {clearbar (); document.getElementbyId ("overse"). 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; elem.style.backgroundcolor = "белый"; }} </script> </head> <body onload = "go ();"> <h1 align = center> Веб -сайт загружается, пожалуйста, подождите </h1> <p> <таблица Align = "center"> <Tbody> <tr> <td> <div id = "progressbar". <span id="block2"> </span> <span id="block3"> </span> <span id="block4"> </span> <span id="block5"> </span> <span id="block6"> </span> <span id="block7"> </span> <span id="block8"> </span> <span id="block9"> </span> </div> </td></tr> <tr> <td align = "center" id = "complete"> </td> </tr> </tbody> </table> </body> </html>Сохраните приведенный выше код с именем jspprogressbar.html. В этом файле функция javascript createxmlhttprequest () в основном используется для создания объекта xmlhttprequest. Функция go () хочет отправить асинхронный запрос на сервере. Функция вызывается при загрузке веб -страницы. Его основная функция - уведомить сервер и начать запуск панели прогресса на клиенте. Функция gocallback () в основном используется для обработки ответа сервера, и вызывает функцию OplServer () каждые 2 секунды. Он также используется для отправки асинхронных запросов на сервер, в основном запрашивая процент ответа сервера. Функция pollcallback () в основном используется для обработки ответов на стороне сервера, то есть для указания состояния отображения панели прогресса на основе номера, возвращаемого на стороне сервера. Здесь следует отметить, что функция gocallback () выполняется только один раз, в то время как функция pollcallback () может быть выполнена несколько раз, а другие три функции - это вспомогательные функции, которые реализуют планку прогресса.
3. Беги
Скопируйте два приведенных выше файла JSP в каталог JSP. Операция визуализации следующие: