`

纯ajax实现的滚动条

 
阅读更多

      这些日子,一直没有调好心态。对于以后究竟是考研,还是努力的工作,我终于下定决心了。先工作,等在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 = "&nbsp;&nbsp;&nbsp;"
			   //创建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">&nbsp;&nbsp;&nbsp;</span>
							<span id="block2">&nbsp;&nbsp;&nbsp;</span>
							<span id="block3">&nbsp;&nbsp;&nbsp;</span>
							<span id="block4">&nbsp;&nbsp;&nbsp;</span>
							<span id="block5">&nbsp;&nbsp;&nbsp;</span>
							<span id="block6">&nbsp;&nbsp;&nbsp;</span>
							<span id="block7">&nbsp;&nbsp;&nbsp;</span>
							<span id="block8">&nbsp;&nbsp;&nbsp;</span>
							<span id="block9">&nbsp;&nbsp;&nbsp;</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>

 唉,不能在这家公司傻逼下去了,要换一下了

分享到:
评论

相关推荐

    jquery 滚动条

    3. **jQuery插件**:虽然可以使用纯CSS实现基础的滚动条自定义,但更复杂的效果可能需要借助`jQuery`插件,例如`PerfectScrollbar`、`malihu custom scrollbar`等。这些插件提供了丰富的选项和方法,可以创建高度...

    纯ajax脚本实现省市联动+GridView固定表头+表头合并示例

    在这个"纯Ajax脚本实现省市联动+GridView固定表头+表头合并示例"中,我们将深入探讨几个关键的技术点。 首先,"省市联动"是网页中常见的一种功能,常用于地址选择或者用户信息填写。它通过Ajax(异步JavaScript和...

    15个带示例的jQuery滚动条插件

    4. **SimpleBar** - 这个插件旨在简化滚动条的实现,提供易于使用的API和良好的浏览器兼容性,适用于快速集成到项目中。 5. **malihu Custom Scrollbar** - 这是一个广泛使用的插件,具有丰富的定制选项,如滚动条...

    [Ajax]Ajax.rar_ajax

    2. **动态加载内容**:如滚动条到底部自动加载更多内容。 3. **地图应用**:拖动地图时,仅更新可视区域的数据。 4. **实时聊天**:用户发送消息后,无需刷新即可看到其他人的回复。 **四、Ajax中的数据格式** 1. ...

    AjAX CSS 小例子

    在压缩包中,"baidu google yahoo搜索.html"就是一个很好的例子,它展示了如何使用AJAX实现搜索引擎的即时搜索建议,用户在输入框中键入关键词时,页面会实时显示相关的搜索结果。 接下来是CSS,它是用于描述HTML或...

    JavaScript实现简易聊天对话框(加滚动条)

    本文详细介绍了如何使用JavaScript实现一个具有滚动条功能的简易聊天对话框。在聊天应用中,用户界面通常包括对话框以显示消息内容,以及发送消息的输入区域和按钮。在实现时,通常会遇到几个关键的技术点,包括...

    jQuery实现页面向下滚动超过一屏时会自动出现的置顶工具条效果.zip

    在网页设计中,为了提供更好的用户体验,经常需要实现一种效果:当用户滚动页面超过一屏时,顶部导航栏会固定在浏览器窗口的顶部,这种效果通常被称为“置顶工具条”或“固定顶部导航”。本教程将介绍如何使用jQuery...

    【纯JS表格分页代码】

    本资源提供了一个基于纯JavaScript实现的表格分页代码,它适用于静态数据的展示,主要功能是通过分页来控制表格中数据行的显示与隐藏,从而提高用户浏览效率和页面性能。 首先,我们来看“tabel纯分页效果.html”这...

    Javascript实现DIV滚动自动滚动到底部的代码

    `,这一行代码可以实现让DIV滚动条自动移动到最底部。 现在来详细解释这段代码: 1. `div.scrollTop`属性:这个属性定义或获取当前的垂直滚动位置。如果我们将其设置为一个具体的数值,浏览器就会将DIV滚动条移动...

    纯JS前端实现分页代码

    总之,纯JavaScript实现前端分页是一个涉及到HTML结构设计、JavaScript事件处理、AJAX请求、数据解析和DOM操作的过程。理解这个过程可以帮助开发者构建更加高效、可维护的前端应用。虽然这个例子可能并不完美,但它...

    html的上拉刷新 下拉加载

    这是通过监听滚动事件,结合JavaScript判断滚动条位置来实现的。例如,我们可以使用`window.scrollY`获取当前滚动条的位置,然后比较这个值与文档总高度`document.documentElement.scrollHeight`的关系。当达到特定...

    jquery实现的a标签锚点定位特效源码.zip

    除了`animate`函数,jQuery还提供了一些其他与滚动相关的函数,如`scroll()`用于监听滚动事件,`scrollTop()`用于获取或设置当前滚动条的位置,这些都可以结合使用来实现更复杂的锚点定位效果。 此外,为了优化用户...

    js实现web的翻页功能

    本文将深入探讨如何使用纯JavaScript(JS)实现Web前端的翻页功能,包括“首页”、“尾页”、“上一页”和“下一页”的功能。 首先,我们需要理解翻页的基本原理。在网页上展示数据时,我们通常不会一次性加载所有...

    jQuery定位滚动导航效果代码.zip

    同时,对于不支持jQuery的老式浏览器,可能需要提供备选方案,如使用纯JavaScript实现相同的功能。 总结来说,“jQuery定位滚动导航效果代码”是一个结合了HTML5、CSS和jQuery技术的项目,通过响应式的滚动导航,...

    JQuery&CSS;&CSS;+DIV实例大全.rar

    31.jQuery实现拖动滚动条的缩略图排列插件下载 32.jQuery实现焦点图片Flash自动平滑渐变效果 33.jQuery实现鼠标移到链接提示显示图片功能插件 34.jquery实现鼠标经过链接放大图片特效代码 35.jquery实用...

    自己整理的一些网站常用JS效果1

    8.超酷带纹理网页滚动条效果.html 9.纯CSS代码实现翻页焦点图效果.html 10.仿豆瓣分页原型.html 11.给放大的分页.html 12.关闭此页面时会提醒你加入书签.html 13.划过链接鼠标变手型.html 14.可供选择大小.html 15....

    scrollbar:这只是一个旧的 jquery 插件

    2. **事件绑定**:jQuery允许开发者方便地绑定各种事件,如`$(window).scroll(function() {...})`监听窗口滚动事件,实现滚动条的动态响应。 3. **CSS操作**:插件可能通过`.css()`方法更改滚动条的样式,如`$("#my...

    无限滚动香草

    2. **判断是否达到加载点**:计算滚动条的位置和页面的高度,以确定是否到达加载更多内容的阈值。 3. **发送Ajax请求**:当达到加载点,使用XMLHttpRequest或Fetch API向服务器发送请求,获取更多数据。 4. **处理...

Global site tag (gtag.js) - Google Analytics