更新服务器列表不显示进度条,Ajax 请求服务器更新进度条

Ajax Progress Bar

var xmlHttp;

var key;

var bar_color = 'gray';//进度条的颜色

var span_id = "block";

var clear = " ";

function createXMLHttpRequest()//创建XMLHttpRequest对象

{

if(window.ActiveXObject)

{

xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");

}

else if(window.XMLHttpRequest)

{

xmlHttp = new XMLHttpRequest();

}

}

function go()

{

createXMLHttpRequest();//创建XMLHttpRequest对象

checkDiv();//显示滚动条

xmlHttp.onreadystatechange = callBack;//设置回调函数

var url = "/AjaxDemo/servlet/ProgressBarServlet?task=create";//请求的地址

var button = document.getElementById("go");

button.disabled = true;//设置按钮不可用

xmlHttp.open("get",url,true);//打开对服务器的连接

xmlHttp.send();//发送请求

}

function callBack()

{

if(xmlHttp.readyState == 4)

{

if(xmlHttp.status == 200)

{

setTimeout("pollServer()",500);//定时调用

}

}

}

function pollServer()

{

createXMLHttpRequest();

var url="/AjaxDemo/servlet/ProgressBarServlet?task=poll&key="+key;

xmlHttp.onreadystatechange = pollCallBack;

xmlHttp.open("GET",true);

xmlHttp.send();

}

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()",500);

}

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;

elem.style.backgroundColor = "white";

}

}

Ajax Progress Bar Example

Launch long-running process:

服务器端：

package cn.Ajax.test;

import java.io.IOException;

import java.io.PrintWriter;

import javax.servlet.ServletException;

import javax.servlet.http.HttpServlet;

import javax.servlet.http.HttpServletRequest;

import javax.servlet.http.HttpServletResponse;

@SuppressWarnings("serial")

public class ProgressBarServlet extends HttpServlet {

private int counter = 1;

/**

* The doGet method of the servlet.

*

* This method is called when a form has its tag value method equals to get.

*

* @param request the request send by the client to the server

* @param response the response send by the server to the client

* @throws ServletException if an error occurred

* @throws IOException if an error occurred

*/

public void doGet(HttpServletRequest request,HttpServletResponse response)

throws ServletException,IOException {

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+"";

}

PrintWriter out = response.getWriter();

response.setContentType("text/xml");

response.setHeader("Cache-Control","no-cache");

out.println("");

out.println(res);

out.println("");

out.close();

}

/**

* The doPost method of the servlet.

*

* This method is called when a form has its tag value method equals to post.

*

* @param request the request send by the client to the server

* @param response the response send by the server to the client

* @throws ServletException if an error occurred

* @throws IOException if an error occurred

*/

public void doPost(HttpServletRequest request,IOException {

doGet(request,response);

}

}

总结

以上是编程之家为你收集整理的Ajax 请求服务器更新进度条全部内容，希望文章能够帮你解决Ajax 请求服务器更新进度条所遇到的程序开发问题。

如果觉得编程之家网站内容还不错，欢迎将编程之家网站推荐给程序员好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。