这些日子，一直没有调好心态。对于以后究竟是考研，还是努力的工作，我终于下定决心了。先工作，等在IT公司混不下去了，再看看考研的事。之前决定考研是想通过读研来学到更多的东西，进而能拿到更高的工资；经过这段时间发生的一些事，让我明白，我这样一味盲目的追求使我很不幸福，甚至有点像发疯。在社会上更多的是人与人的交流，技术算是次要的……
今天看看还能不能用javascript的原生态去写一点东西（大学里很熟练的哦，工作一年多都成傻逼了）。发现居然还是写出来了。以下分享一下代码：
1。html界面
<!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';
var span_id = "block";
var clear = " "
//创建XMLHttpRequest
function createXMLHttpRequest() {
if (window.ActiveXObject) {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}else if (window.XMLHttpRequest) {
xmlHttp = new XMLHttpRequest();
}
}
//两秒中刷新一次滚动条
function goCallback() {
if (xmlHttp.readyState == 4) {
if (xmlHttp.status == 200) {
setTimeout("pollServer()", 2000);
}
}
}
function pollServer() {
createXMLHttpRequest();
var url = "servlet/ProgressBarServlet?task=poll&key=" + key;
xmlHttp.open("GET", url, true);
xmlHttp.onreadystatechange = pollCallback;
xmlHttp.send(null);
}
//成功时候在界面上刷新滚动条
function pollCallback() {
if (xmlHttp.readyState == 4) {
if (xmlHttp.status == 200) {
var percent_complete = xmlHttp.responseText;
//为什么用xmlHttp.responseText获取的服务器返回值会有空格呢
var index = processResult(percent_complete.trim());
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()", 2000);
} else {
document.getElementById("complete").innerHTML = "Complete!";
document.getElementById("go").disabled = false;
}
}
}
}
//更加返回结果的第一位数（比如：50，就是5）来确定进度条目前的进展情况。
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";
}
}
function go() {
createXMLHttpRequest();
checkDiv();
var url = "servlet/ProgressBarServlet?task=create";
var button = document.getElementById("go");
button.disabled = true;
xmlHttp.open("GET", url, true);
xmlHttp.onreadystatechange = goCallback;
xmlHttp.send(null);
}
</script>
</head>
<body>
<h1>
Ajax 滚动条例子
</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>
2。servlet代码
package com.lizw.process;
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;
public class ProgressBarServlet extends HttpServlet {
private int counter = 1;
/**
* Handles the HTTP <code>GET</code> method. *
*
* @param request
* servlet request *
* @param response
* servlet response
*/
protected 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>";
}
System.out.println("The res is : "+res);
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();
}
}
3.web.xml配置
<?xml version="1.0" encoding="UTF-8"?>
<web-app version="2.4"
xmlns="http://java.sun.com/xml/ns/j2ee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee
http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd">
<servlet>
<description>This is the description of my J2EE component</description>
<display-name>This is the display name of my J2EE component</display-name>
<servlet-name>ProgressBarServlet</servlet-name>
<servlet-class>com.lizw.process.ProgressBarServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>ProgressBarServlet</servlet-name>
<url-pattern>/servlet/ProgressBarServlet</url-pattern>
</servlet-mapping>
<welcome-file-list>
<welcome-file>index.jsp</welcome-file>
</welcome-file-list>
</web-app>
唉，不能在这家公司傻逼下去了，要换一下了
相关推荐
31.jQuery实现拖动滚动条的缩略图排列插件下载 32.jQuery实现焦点图片Flash自动平滑渐变效果 33.jQuery实现鼠标移到链接提示显示图片功能插件 34.jquery实现鼠标经过链接放大图片特效代码 35.jquery实用...
8.超酷带纹理网页滚动条效果.html 9.纯CSS代码实现翻页焦点图效果.html 10.仿豆瓣分页原型.html 11.给放大的分页.html 12.关闭此页面时会提醒你加入书签.html 13.划过链接鼠标变手型.html 14.可供选择大小.html 15....
[ConfigLine.java] 控制条类 [RoundBox.java] 限定选择控件 [MonthMaker.java] 月份表算法类 [Pallet.java] 调色板，统一配色类 Java扫雷源码 Java生成自定义控件源代码 2个目标文件 Java实现HTTP...
它包含多个高级导航组件：预设置数据时间范围，日期选择器、滚动条、平移、缩放功能。 主要优势（功能特点） browsers兼容性 Highstock 可以在所有的移动设备及电脑上的浏览器中使用，包括 iPhone，iPad 和 IE6 ...
除了通过滚动条或导航器控制放大和平移功能，你还可以通过鼠标和手指来进行这两个操作。 ajax方便加载外部数据 Highstock 的数据是 JavaScript 数组或对象，这些数据可以是本地的配置对象，独立的数据文件（JSON、...
内容索引:脚本资源,Ajax/JavaScript,图片切换 纯JS仿做土豆网豆单列表载入图片特效，这里把图片代替了视频，只为演示图片的效果，没有使用第三方的JS插件，因此Javascript代码比较多，参考价值比较高，点小图的时候...
如何保证页面刷新后的滚动条位置 清除网页历史记录，屏蔽后退按钮! 如何传值在2个页面之间 ：要求不刷新父页面，并且不能用Querystring传值 Asp.net地址转义（分析）加强版 Web的桌面提醒（Popup） Using the Popup ...
[ConfigLine.java] 控制条类 [RoundBox.java] 限定选择控件 [MonthMaker.java] 月份表算法类 [Pallet.java] 调色板，统一配色类 Java扫雷源码 Java生成自定义控件源代码 2个目标文件 Java实现HTTP...
jQuery详细教程，讲解很透彻， 一. jQuery 语法实例 $(this).hide() ... $("#test").hide() 演示 jQuery hide() 函数，隐藏 id="test" 的元素。 $("p").hide() 演示 jQuery hide() 函数，隐藏所有 <p> 元素。...