AJAX 進(jìn)度條實(shí)現(xiàn)代碼
更新時(shí)間：2009年09月28日 20:39:37 作者：
AJAX 進(jìn)度條實(shí)現(xiàn)代碼，基于java后來(lái)，大家可以學(xué)習(xí)下。
效果如下：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Ajax Progress Bar</title>
<script type="text/javascript">
var xmlHttp;
var key;
var bar_color = 'gray';//進(jìn)度條的顏色
var span_id = "block";
var clear = " ";
function createXMLHttpRequest()//創(chuàng)建XMLHttpRequest對(duì)象
{
if(window.ActiveXObject)
{
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
else if(window.XMLHttpRequest)
{
xmlHttp = new XMLHttpRequest();
}
}
function go()
{
createXMLHttpRequest();//創(chuàng)建XMLHttpRequest對(duì)象
checkDiv();//顯示滾動(dòng)條
xmlHttp.onreadystatechange = callBack;//設(shè)置回調(diào)函數(shù)
var url = "/AjaxDemo/servlet/ProgressBarServlet?task=create";//請(qǐng)求的地址
var button = document.getElementById("go");
button.disabled = true;//設(shè)置按鈕不可用
xmlHttp.open("get",url,true);//打開對(duì)服務(wù)器的連接
xmlHttp.send();//發(fā)送請(qǐng)求
}
function callBack()
{
if(xmlHttp.readyState == 4)
{
if(xmlHttp.status == 200)
{
setTimeout("pollServer()",500);//定時(shí)調(diào)用
}
}
}
function pollServer()
{
createXMLHttpRequest();
var url="/AjaxDemo/servlet/ProgressBarServlet?task=poll&key="+key;
xmlHttp.onreadystatechange = pollCallBack;
xmlHttp.open("GET",url,true);
xmlHttp.send();
}
function pollCallBack()
{
if(xmlHttp.readyState == 4)
{
if(xmlHttp.status == 200)
{
var percent_complete = xmlHttp.responseXML.getElementsByTagName("percent")[0]
.firstChild.data;//從服務(wù)器端獲得響應(yīng)信息
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";
}
}
</script>
</head>
<body>
<h1>Ajax Progress Bar Example</h1>
Launch long-running process:
<input type="button" value="Launch" id="go" onclick="go()"/>
<p>
<table align="center">
<tbody>
<tr>
<td>
<div id="progressBar" style="padding:2px;border:solid black 2px;visibility:hidden">
<span id="block1"> </span>
<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>
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. <br>
*
* 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 = "<key>1</key>";
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>"+percent+"</percent>";
}
PrintWriter out = response.getWriter();
response.setContentType("text/xml");
response.setHeader("Cache-Control", "no-cache");
out.println("<response>");
out.println(res);
out.println("</response>");
out.close();
}
/**
* The doPost method of the servlet. <br>
*
* 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, HttpServletResponse response)
throws ServletException, IOException {
doGet(request, response);
}
}
復(fù)制代碼 代碼如下:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Ajax Progress Bar</title>
<script type="text/javascript">
var xmlHttp;
var key;
var bar_color = 'gray';//進(jìn)度條的顏色
var span_id = "block";
var clear = " ";
function createXMLHttpRequest()//創(chuàng)建XMLHttpRequest對(duì)象
{
if(window.ActiveXObject)
{
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
else if(window.XMLHttpRequest)
{
xmlHttp = new XMLHttpRequest();
}
}
function go()
{
createXMLHttpRequest();//創(chuàng)建XMLHttpRequest對(duì)象
checkDiv();//顯示滾動(dòng)條
xmlHttp.onreadystatechange = callBack;//設(shè)置回調(diào)函數(shù)
var url = "/AjaxDemo/servlet/ProgressBarServlet?task=create";//請(qǐng)求的地址
var button = document.getElementById("go");
button.disabled = true;//設(shè)置按鈕不可用
xmlHttp.open("get",url,true);//打開對(duì)服務(wù)器的連接
xmlHttp.send();//發(fā)送請(qǐng)求
}
function callBack()
{
if(xmlHttp.readyState == 4)
{
if(xmlHttp.status == 200)
{
setTimeout("pollServer()",500);//定時(shí)調(diào)用
}
}
}
function pollServer()
{
createXMLHttpRequest();
var url="/AjaxDemo/servlet/ProgressBarServlet?task=poll&key="+key;
xmlHttp.onreadystatechange = pollCallBack;
xmlHttp.open("GET",url,true);
xmlHttp.send();
}
function pollCallBack()
{
if(xmlHttp.readyState == 4)
{
if(xmlHttp.status == 200)
{
var percent_complete = xmlHttp.responseXML.getElementsByTagName("percent")[0]
.firstChild.data;//從服務(wù)器端獲得響應(yīng)信息
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";
}
}
</script>
</head>
<body>
<h1>Ajax Progress Bar Example</h1>
Launch long-running process:
<input type="button" value="Launch" id="go" onclick="go()"/>
<p>
<table align="center">
<tbody>
<tr>
<td>
<div id="progressBar" style="padding:2px;border:solid black 2px;visibility:hidden">
<span id="block1"> </span>
<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>
復(fù)制代碼 代碼如下:
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. <br>
*
* 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 = "<key>1</key>";
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>"+percent+"</percent>";
}
PrintWriter out = response.getWriter();
response.setContentType("text/xml");
response.setHeader("Cache-Control", "no-cache");
out.println("<response>");
out.println(res);
out.println("</response>");
out.close();
}
/**
* The doPost method of the servlet. <br>
*
* 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, HttpServletResponse response)
throws ServletException, IOException {
doGet(request, response);
}
}
您可能感興趣的文章:
- HTML5 Ajax文件上傳進(jìn)度條如何顯示
- php ajax實(shí)現(xiàn)文件上傳進(jìn)度條
- 基于HTML5 Ajax實(shí)現(xiàn)文件上傳并顯示進(jìn)度條
- js HTML5 Ajax實(shí)現(xiàn)文件上傳進(jìn)度條功能
- PHP+apc+ajax實(shí)現(xiàn)的ajax_upload上傳進(jìn)度條代碼
- 基于HTML5 Ajax文件上傳進(jìn)度條如何實(shí)現(xiàn)（jquery版本）
- js ajax加載時(shí)的進(jìn)度條代碼
- ajax 異步上傳帶進(jìn)度條視頻并提取縮略圖
- 基于ajax實(shí)現(xiàn)文件上傳并顯示進(jìn)度條
- php+ajax實(shí)現(xiàn)帶進(jìn)度條的大數(shù)據(jù)排隊(duì)導(dǎo)出思路以及源碼
- ajax提交加載進(jìn)度條示例代碼
- ajax+php打造進(jìn)度條代碼[readyState各狀態(tài)說(shuō)明]
- ajax+php打造進(jìn)度條 readyState各狀態(tài)
- 使用AJAX實(shí)現(xiàn)Web頁(yè)面進(jìn)度條的實(shí)例分享
相關(guān)文章
聊一聊數(shù)據(jù)請(qǐng)求中Ajax、Fetch及Axios的區(qū)別
axios、fetch和ajax的區(qū)別在網(wǎng)絡(luò)上存在很多文章,下面這篇文章也是給大家介紹了關(guān)于數(shù)據(jù)請(qǐng)求中Ajax、Fetch及Axios區(qū)別的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-02-02
最近二天。項(xiàng)目做完了。閑著沒事做就自己寫了一點(diǎn)東西。在寫的過(guò)程中。發(fā)現(xiàn)利用服務(wù)器的文本框去查找用戶的相關(guān)信息的時(shí)刻總要去刷新頁(yè)面。2009-06-06
這篇文章主要介紹了如何成為AJAX高手2007-01-01
Ajax實(shí)現(xiàn)簡(jiǎn)單下拉選項(xiàng)效果【推薦】
下面小編就為大家?guī)?lái)一篇Ajax實(shí)現(xiàn)簡(jiǎn)單下拉選項(xiàng)效果【推薦】。小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，一起跟隨小編過(guò)來(lái)看看吧2016-04-04
Ajax調(diào)用restful接口傳送Json格式數(shù)據(jù)的方法
這篇文章主要介紹了Ajax調(diào)用restful接口傳送Json格式數(shù)據(jù)的方法的相關(guān)資料，非常不錯(cuò)，具有參考借鑒價(jià)值，感興趣的朋友一起看下吧2016-07-07
Ajax被認(rèn)為是(Asynchronous(異步) JavaScript And Xml的縮寫）。現(xiàn)在，允許瀏覽器與服務(wù)器通信而無(wú)須刷新當(dāng)前頁(yè)面的技術(shù)都被叫做Ajax2016-11-11
ajax實(shí)現(xiàn)用戶名校驗(yàn)的傳統(tǒng)和jquery的$.post方式(實(shí)例講解)
下面小編就為大家分享一篇ajax實(shí)現(xiàn)用戶名校驗(yàn)的傳統(tǒng)和jquery的$.post方式的實(shí)例講解，具有很好的參考價(jià)值，希望對(duì)大家有所幫助2017-12-12
使用Ajax方法實(shí)現(xiàn)Form表單的提交及注意事項(xiàng)
這篇文章主要介紹了使用Ajax方法實(shí)現(xiàn)Form表單的提交及注意事項(xiàng),需要的朋友可以參考下2017-07-07
AJAX 用戶注冊(cè)時(shí)的應(yīng)用實(shí)例
我所舉的這個(gè)例子是一個(gè)企業(yè)用戶注冊(cè)時(shí)的一個(gè)應(yīng)用，當(dāng)用戶注冊(cè)時(shí)檢查用戶名和企業(yè)名是否可用，以前的做法是在旁邊加一個(gè)按鈕，點(diǎn)擊“檢查”，就向服務(wù)器發(fā)出請(qǐng)求，然后等待……服務(wù)器返回信息，繼續(xù)操作。2008-12-12
基于HTML5 Ajax文件上傳進(jìn)度條如何實(shí)現(xiàn)（jquery版本）
本文給大家介紹基于html5 ajax文件上傳進(jìn)度條是如何實(shí)現(xiàn)的，涉及到html5新增加的formdata對(duì)象的使用，對(duì)html5文件上傳進(jìn)度條感興趣的朋友一起學(xué)習(xí)吧2015-11-11