我想通过ajax实现当前后台运行进度的百分比,有二个问题请教大家。

shi_hang_nk 2007-03-26 07:41:15
1.在从后台取数据的时候,如何能够只取一个数值,不需要html标记

2.数据取回来后,如何在页面上动态改变某处的文字

不好意思,我对ajax和html不太熟,问题都很初级。
...全文
411 6 打赏 收藏 转发到动态 举报
写回复
用AI写文章
6 条回复
切换为时间正序
请发表友善的回复…
发表回复
hater 2007-03-30
  • 打赏
  • 举报
回复
1.在从后台取数据的时候,如何能够只取一个数值,不需要html标记
后台页面,比如是a.asp
只输出你想要的数值
比如
response.write 123

你的a.asp页面输出什么,ajax就取得什么。所以你输出时没必要加html标记。如果是多数据,可以用json或xml.个人更推荐json.你搜一下就知道了

2.数据取回来后,如何在页面上动态改变某处的文字
我的名字是:<Span id="UserName"></Span>
<Script Language=JavaScript>
<!--
strUserName = "hater"; //此值可以用ajax从返回页面中取得
var objSpan = document.getElementById("UserName");
objSpan.innerHTML = strUserName; //或innerText,具体你去搜一下。innerhtml支持html标记
//-->
</Script>
onebody 2007-03-27
  • 打赏
  • 举报
回复
function xyUpdateToPosition(pPosition) { /*将progress更新到pPositionλ位置(表示长度),其中,min<pPosition<max*/
try {
var max = this.max;
var min = this.min;
var e = document.all(this.xyProgressID);
if (pPosition < min || pPosition > max) {
return -1;
}
var len = this.width;
var pos = ((pPosition - min) / (max - min)) * len;
eProgress = e.children(0).children(0);
if (pos >= this.width) {
eProgress.style.width = this.width - 4;
this.currPos = pos;
} else if (pos <= 0) {
eProgress.style.width = 0;
this.currPos = pos;
} else {
eProgress.style.width = pos;
this.currPos = pos;
}
return this.currPos;
} catch(e) {
alert(e.description);
return -1;
}
}
function xyUpdatePersent(pPersent) { /*从当前位置增加或减少(+\-)pPersent%(html进度条长度),pPersent大于零:增加,否则可以小于零,减少*/
try {
var e = document.all(this.xyProgressID);
e = e.children(0).children(0);
var len = this.width;
var pos = this.currPos;
len = len * pPersent / 100;
pos += len;
if (pos > this.width || pos < 0) {
return -1;
}
e.style.width = pos;
this.currPos = pos;
return this.currPos;
} catch(e) {
alert(e.description);
return -1;
}
}
function xyUpdateToPersent(pPersent) { /*从当前位置增加或减少到pPersent%(html进度条长度)*/
try {
var e = document.all(this.xyProgressID);
e = e.children(0).children(0);
var len = this.width;
var pos = len * pPersent / 100;
if (pos > this.width || pos < 0) {
return -1;
}
e.style.width = pos;
this.currPos = pos;
return this.currPos;
} catch(e) {
alert(e.description);
return -1;
}
}

function xyNewID() {
var d = new Date();
var t = "oDraw_" + d.getTime().toString();
return t;
}
//-->
</script>
</head>

<body bgcolor="#C0D2EC" leftmargin="0" topmargin="0">
<div id="message" style="position:absolute; left:5px; top:5px; width:400px; height:20px; z-index:1"><font size="2">信息:
<label id="messageContent"></label>
</font></div>

<div id="Layer1" style="position:absolute; left:5px; top:50px; width:300px; height:42px; z-index:2">
<p><font size="2">
已上传:
<label id="readTotalSize"></label>
共:
<label id="totalSize"></label>
</font></p>
</div>
<html:hidden name="accessoryForm" property="funid"/>
<script language="javascript" type="text/javascript">
var proName = (new Date()).getTime();
var progressBar = new xyProgressLG(proName);
progressBar.SetProgressLeft(5);
progressBar.SetProgressTop(25);
progressBar.SetProgressWidth(300);
progressBar.SetProgressHeight(20);
progressBar.SetProgressBackColor("white");
progressBar.SetProgressForeColor("blue");
progressBar.SetProgressTextFontColor("red");
progressBar.SetProgressMax(300);
progressBar.SetProgressMin(0);
setMessageContent("正在连接...");
window.setInterval("GetProgressDetail()", 1000);
// window.setTimeout("GetProgressDetail()", 1000);
</script>
</body>
</html>
onebody 2007-03-27
  • 打赏
  • 举报
回复
function xySetProgressTop(pStyleTop) { //设置top值ֵ
try {
var e = document.all(this.xyProgressID);
e.style.top = pStyleTop;
} catch(e) {
alert(e.description);
}
}
function xySetProgressLeft(pStyleLeft) { //设置left值
try {
var e = document.all(this.xyProgressID);
e.style.left = pStyleLeft;
} catch(e) {
alert(e.description);
}
}
function xySetProgressWidth(pWidth) { //设置width值
try {
var e = document.all(this.xyProgressID);
e.style.width = pWidth;
eOuter = e.children(0);
eOuter.style.width = pWidth;
this.width = pWidth;
} catch(e) {
alert(e.description);
}
}
function xySetProgressHeight(pHeight) { //设置height值
try {
var e = document.all(this.xyProgressID);
e.style.height = pHeight;
eOuter = e.children(0);
eInner = e.children(0).children(0);
eOuter.style.height = pHeight;
eInner.style.height = pHeight - 4;
this.height = pHeight;
} catch(e) {
alert(e.description);
}
}
function xySetProgressBorderColor(pColor) { //设置外边框架border的color值
try {
var e = document.all(this.xyProgressID);
e = e.children(0);
e.style.border = "1px solid " + pColor;
} catch(e) {
alert(e.description);
}
}
function xySetProgressForeBorderColor(pColor) { //设置内边框border的color值
try {
var e = document.all(this.xyProgressID);
e = e.children(0).children(0);
e.style.border = "1px solid " + pColor;
} catch(e) {
alert(e.description);
}
}
function xySetProgressBackColor(pColor) { //设置外边框背景色
try {
var e = document.all(this.xyProgressID);
e = e.children(0);
e.style.background = pColor;
} catch(e) {
alert(e.description);
}
}
function xySetProgressForeColor(pColor) { //设置内边框行进条色
try {
var e = document.all(this.xyProgressID);
e = e.children(0).children(0);
e.style.background = pColor;
} catch(e) {
alert(e.description);
}
}


function xyEnableProgressText(bEnable) { //是否显文字的开关,默认为true,显示
try {
var e = document.all(this.xyProgressID);
eText = e.children(1);
if (bEnable) {
eText.style.display = "none";
} else {
eText.style.display = "";
}
var pos = e.style.width;
var sel = eText.style.width;
pos = (pos - sel) / 2;
eText.style.left = pos;
} catch(e) {
alert(e.description);
}
}
function xySetProgressTextFontSize(pSize) { //设置显示文字的大小
try {
var e = document.all(this.xyProgressID);
e = e.children(1);
e.style.fontSize = pSize;
} catch(e) {
alert(e.description);
}
}
function xySetProgressTextFontColor(pColor) { //设置显示文字的颜色
try {
var e = document.all(this.xyProgressID);
e = e.children(1);
e.style.color = pColor;
} catch(e) {
alert(e.description);
}
}
function xySetProgressTextFontFamily(pFamily) { //设置显示文字的字体
try {
var e = document.all(this.xyProgressID);
e = e.children(1);
e.style.fontFamily = pFamily;
} catch(e) {
alert(e.description);
}
}
function xySetProgressMax(pMax) { //进度条表示的最大长度
this.max = pMax;
}
function xySetProgressMin(pMin) { //进度条表示的最小长度
this.min = pMin;
}
function xySetProgressTextValue(pText) { //设置显示文字的内容
try {
var e = document.all(this.xyProgressID);
e = e.children(1);
e.innerHTML = pText;
}
catch(e) {
alert(e.description);
}
}
function xyUpdatePosition(pPosition) { /*将progress增加或减少pPosition(表示长度),其中,0<pPosition<max*/
try {
var max = this.max;
var min = this.min;
var e = document.all(this.xyProgressID);
if (pPosition > max) {
return -1;
}
var len = this.width;
var pos = this.currPos + (pPosition / (max - min)) * len;
var eProgress = e.children(0).children(0);
if (pos >= this.width) {
eProgress.style.width = this.width - 4;
this.currPos = pos;
} else if (pos <= 0) {
eProgress.style.width = 0;
this.currPos = pos;
} else {
eProgress.style.width = pos;
this.currPos = pos;
}
return this.currPos;
} catch(e) {
alert(e.description);
return -1;
}
}
onebody 2007-03-27
  • 打赏
  • 举报
回复
返回进度值的JSP文件:

<%@ page contentType="text/html; charset=utf-8" language="java"%>
<%!
HttpSession ses;
%>
<%
ses=request.getSession();
String funid=(String) request.getParameter("funid");

if(funid!=null){
Integer uploadSize =(Integer) ses.getAttribute("uploadSize"+funid);
Integer totalSize = (Integer) ses.getAttribute("totalSize"+funid);
out.println("<detail-start>");
out.println(""+"||"
+""+"||"
+"0"+"||"
+uploadSize.toString()"||"
+totalSize.toString()+"||"
+""+"||"
+"");
out.println("</detail-start>");
}

%>



进度条显示JSP文件:
<%@ page contentType="text/html; charset=utf-8" language="java" %>
<%@ taglib uri="/tags/struts-html" prefix="html" %>
<%@ taglib uri="/tags/struts-bean" prefix="bean" %>
<%@ taglib uri="/tags/struts-logic" prefix="logic" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>

<%
response.setHeader("pragma", "no-cache");
response.setHeader("cache-control", "no-cache");
response.setDateHeader("Expires", 0);
%>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>上传进度</title>
<script language="javascript" type="text/javascript">
function round(number, X) {
// rounds number to X decimal places, defaults to 2
X = (!X ? 2 : X);
return Math.round(number * Math.pow(10, X)) / Math.pow(10, X);

}

function formatBy(bytes) {
var sunit = "";
var res = 0;
if (bytes > (1024 * 1024 * 1024))
{
res = (bytes / (1024 * 1024 * 1024));
// g
sunit = "G";
}
else if (bytes > (1024 * 1024))
{
res = (bytes / (1024 * 1024));
// m
sunit = "M";
}
else if (bytes > (1024))
{
res = (bytes / (1024));
// k
sunit = "K";
}
else
{
res = bytes;
sunit = "B";
}
return round(res) + " " + sunit;

}

function GetProgressDetail()
{
// var funid = (new Date()).getTime();
// alert("1");
var funid = document.getElementById("funid").value;
window.status = "1";

//alert(funid);
var detail = new ActiveXObject("Microsoft.XMLHTTP");
// detail.setRequestHeader('cache-control','no-cache');
detail.open("GET", <%="\""+response.encodeURL("accessoryServlet?funid=")+"\""%>+funid , false);
detail.send();
var detail_info = detail.responseText;
var start = detail_info.indexOf("<detail-start>");
var end = detail_info.indexOf("</detail-start>");
if (start != -1 && end != -1) {
detail_info = detail_info.substring(start + 14, end);
var detail_info_array = detail_info.split("||");
var fileName = detail_info_array[0];

// if (fileName.length > 15) fileName = fileName.slice(fileName.length - 16);
if (fileName != "") setMessageContent(fileName);
progressBar.UpdateToPersent(detail_info_array[3]);
progressBar.SetProgressTextValue(detail_info_array[3] + "%");
setUploadDetail("", detail_info_array[2], detail_info_array[1]);
}
// window.setTimeout("GetProgressDetail()", 1000);
}
function closeWindow() {
//window.dialogArguments.document.execCommand("Stop");
// window.clearInterval("GetProgressDetail()");
window.close();
}
function setMessageContent(mes) {
document.all.messageContent.innerHTML = mes;
}
function setUploadDetail(speed, readTotalSize, totalSize) {
//document.all.speed.innerText = speed;
document.all.readTotalSize.innerText = formatBy(readTotalSize);
document.all.totalSize.innerText = formatBy(totalSize);
}
//以下为进度条对象代码
function xyProgressLG(xyID) {

this.xyProgressID = 'oProgress' + Math.random().toString().substr(2, 10) + xyID;
this.max = 0;
this.min = 0;

this.width = 100;
this.height = 20;
this.currPos = 0;
this.outerBorderColor = "#C0D2EC";
this.outerBackColor = "white";
this.innerBorderColor = "";
this.innerBackColor = "white";
this.TextColor = "blue";

this.SetProgressTop = xySetProgressTop;
this.SetProgressLeft = xySetProgressLeft;
this.SetProgressWidth = xySetProgressWidth;
this.SetProgressHeight = xySetProgressHeight;
this.SetProgressBorderColor = xySetProgressBorderColor;
this.SetProgressForeBorderColor = xySetProgressForeBorderColor;
this.SetProgressBackColor = xySetProgressBackColor;
this.SetProgressForeColor = xySetProgressForeColor;
this.EnableProgressText = xyEnableProgressText;
this.SetProgressTextFontSize = xySetProgressTextFontSize;
this.SetProgressTextFontColor = xySetProgressTextFontColor;
this.SetProgressTextFontFamily = xySetProgressTextFontFamily;
this.SetProgressTextValue = xySetProgressTextValue;

this.SetProgressMax = xySetProgressMax;
this.SetProgressMin = xySetProgressMin;
this.UpdatePosition = xyUpdatePosition;
this.UpdateToPosition = xyUpdateToPosition;
this.UpdatePersent = xyUpdatePersent;
this.UpdateToPersent = xyUpdateToPersent;

xyProgressInit(this.xyProgressID);
return this.xyProgressID;
}

function xyProgressInit(xyID) {
var div = document.createElement("div");
div.id = xyID;
div.style.position = "absolute";
div.style.left = "100px";
div.style.top = "100px";
document.body.appendChild(div);

var pro = document.createElement("div");
pro.style.position = "absolute";
pro.style.left = "0px";
pro.style.top = "0px";
pro.style.fontSize = "0px";
pro.style.width = "100px";
pro.style.height = "20px";
pro.style.border = "1px solid black";
pro.style.background = "white";
pro.style.zIndex = "100";
div.appendChild(pro);

var proInner = document.createElement("div");
proInner.id = xyID + "_Inner";
proInner.style.position = "absolute";
proInner.style.left = "1px";
proInner.style.top = "1px";
proInner.style.fontSize = "0px";
proInner.style.width = "0px";
proInner.style.height = "16px";
proInner.style.border = "1px solid black";
proInner.style.background = "white";
pro.style.zIndex = "102";
pro.appendChild(proInner);

var text = document.createElement("div");
text.style.position = "absolute";
text.style.left = "47%";
text.style.top = "2px";
text.style.fontSize = "14px";
text.style.width = "40px";
text.style.height = "16px";
text.style.zIndex = "103";
text.style.color = "blue";
text.style.fontWeight = "bolder";
div.appendChild(text);
}
star2up 2007-03-27
  • 打赏
  • 举报
回复
用javascript
shaipe 2007-03-27
  • 打赏
  • 举报
回复
哇,好例子,我这边没有JSp的环境,不然我一定测试一下...

http://www.lbsxp.com

52,798

社区成员

发帖
与我相关
我的任务
社区描述
Web 开发 Ajax
社区管理员
  • Ajax
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧