`

ajax+servlet实现自动刷新

 
阅读更多

http://www.java3z.com/cwbwebhome/article/article8/81381.html?id=3866

 

1.实现思路

在ajax回调函数中用方法setTimeout("load()", 1000)，这样就会每隔1秒自动去请求新的信息，实现自动刷新的功能。

2.实例

(1)index.jsp

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
	String path = request.getContextPath();
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<head>
		<title>ajax+servlet实现自动刷新页面</title>
 <mce:script type="text/javascript"><!--
  function $(id){
      return document.getElementById(id);
  }
  var xmlHttp;
  //根据浏览器创建xmlHttpRequest对象
  function getXmlHttpRequest() {
  //针对FireFox,Mozillar,Opera,Safari,IE7,IE8
  if(window.XMLHttpRequest) 
　　    return new XMLHttpRequest();
  //针对IE5，IE5.5，IE6
  else if (window.ActiveXObject){  
       //两个可以用于创建XMLHTTPRequest对象的控件名称,保存在一个JS数组中。
       var activexName = ["MSXML2.XMLHTTP","Microsoft.XMLHTTP"];
       for(var i = 0; i<activexName.length; i++){
           //取出一个控件名进行创建，如果成功就终止循环
           try{
              return new ActiveXObject(activexName[i]);
              break;
           }catch(e){
           return null;
           }
       }
       }       
  }
  function load(){
           xmlHttp=getXmlHttpRequest();
             var url="servlet/GetMp3Info";
           // 注册回调函数,只写函数名，不能写括号，写括号表示调用函数
           xmlHttp.onreadystatechange = getResult;
           // 确定发送请求的方式和URL以及是否同步执行下段代码
           xmlHttp.open("GET", url, true);
           //发送数据，开始和服务器进行交互
           xmlHttp.send(null);
  }
  //回调函数
  function getResult(){
      if (xmlHttp.readyState == 4) { // 判断对象状态
　　          if (xmlHttp.status == 200) { // 信息已经成功返回，开始处理信息
         var text=xmlHttp.responseXML;
         var name=text.getElementsByTagName("name")[0].firstChild.nodeValue;
         var number=text.getElementsByTagName("number")[0].firstChild.nodeValue;
         $("name").innerHTML=name;
         $("number").innerHTML=number;
         setTimeout("load()", 1000);
　　      } else { 
　　                alert("请求的出错啦!");
　　     }
　　}
  }
  
// --></mce:script>
</head>
	<body onload="load()">
		<form>
			<table>
				<thead>
					<tr>
						<th colspan="2">
													</th>
					</tr>
				</thead>
				<tbody>
					<tr>
						<td>名称</td>
						<td id="name"></td>
					</tr>
					<tr>
					    <td>数量</td>
					    <td id="number"></td>
					</tr>
				</tbody>
			</table>
		</form>
	</body>
</html>

 

(2)GetMp3Info.java(servlet)

 

import java.io.IOException;
import java.io.PrintWriter;
import java.util.Random;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class GetMp3Info extends HttpServlet {
	public void doGet(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		response.setContentType("text/xml;charset=utf-8");
		response.setCharacterEncoding("utf-8");
		response.setHeader("Cache-Control","no-cache");
		String name[]={"索尼","清华紫光","纽曼","步步高"};
        String str="";
        str+="<mp3>";
        str+="<name>"+name[new Random().nextInt(name.length)]+"</name>";
        str+="<number>"+new Random().nextInt(1000)+"</number>";
        str+="</mp3>";
        System.out.println("str="+str);
        response.getWriter().write(str);
        response.getWriter().flush();
	}
	public void doPost(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		doGet(request,response);
	}
}
 

(3)web.xml

 

<?xml version="1.0" encoding="UTF-8"?>
<web-app version="2.5" 
	xmlns="http://java.sun.com/xml/ns/javaee" 
	xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
	xsi:schemaLocation="http://java.sun.com/xml/ns/javaee 
	http://java.sun.com/xml/ns/javaee/web-app_2_5.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>GetMp3Info</servlet-name>
    <servlet-class>GetMp3Info</servlet-class>
  </servlet>
  <servlet-mapping>
    <servlet-name>GetMp3Info</servlet-name>
    <url-pattern>/servlet/GetMp3Info</url-pattern>
  </servlet-mapping>
  <welcome-file-list>
    <welcome-file>index.jsp</welcome-file>
  </welcome-file-list>
</web-app>
 

3.运行效果

 

 

 

 

分享到：
| 如何编译运行servlet
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    JSP+Ajax+Servlet 自动完成类似谷歌百度搜索

    本项目是关于构建一个使用JSP、Ajax和Servlet技术实现的自动完成搜索功能，类似于谷歌或百度搜索引擎的用户体验。这个功能在用户输入关键字时，后台会实时查询数据库并返回相关的建议搜索词，提高了搜索效率和用户...

    Ajax+servlet实现搜索提示列表效果

    在Java Web开发中，"Ajax + Servlet 实现搜索提示列表效果"是一个常见的需求，它能够提升用户在输入查询时的体验。Ajax（Asynchronous JavaScript and XML）是一种在无需重新加载整个网页的情况下，能够更新部分网页...

    ajax+java servlet实现无刷新搜索实例(可用)

    ajax+java servlet实现无刷新搜索实例(亲测可用) ，1.使用mysql数据库，已有sql语句；2.使用eclipse\MyEclipse导入项目即可；3.运行URL地址在doc/init.txt

    ajax+servlet原生实现智能提示框

    在这个"ajax+servlet原生实现智能提示框"的主题中，我们将深入探讨如何利用这两项技术来创建一个实时、动态的用户输入提示功能。 首先，让我们理解智能提示框的基本概念。在许多Web应用中，当用户在输入框中键入...

    ajax+json+servlet下载

    总结来说，"ajax+json+servlet下载"的实现涉及以下几个步骤： 1. 前端通过Ajax发起请求获取文件列表。 2. Servlet读取文件夹内容，将文件信息转化为JSON并返回。 3. 前端解析JSON，显示文件列表，用户选择要下载的...

    AJAX+JSP+Servlet+MyBatis实现客户关系管理系统.zip

    《AJAX+JSP+Servlet+MyBatis实现客户关系管理系统》 在现代企业运营中，客户关系管理（CRM）系统扮演着至关重要的角色。它帮助企业有效地管理客户数据，优化销售流程，提升客户服务，以及增强业务决策。本项目是...

    jquery+ajax+json+servlet实例源码

    这个实例源码的学习价值在于，它将前端的jQuery与后端的Servlet结合，通过AJAX和JSON实现了数据的双向交互，这在实际的Web开发中非常常见。通过深入研究这个实例，开发者可以提升对这些技术的理解和应用能力。同时，...

    ajax+servlet两级动态级联下拉框

    本项目“ajax + servlet 两级动态级联下拉框”旨在演示如何使用AJAX（异步JavaScript和XML）技术和Servlet进行交互，以实现在选择第一个下拉框的值后，第二个下拉框自动更新并显示相关数据。以下是对这个项目的详细...

    Ajax+Servlet实现无刷新下拉联动效果

    【Ajax+Servlet实现无刷新下拉联动效果】是一种常见的网页交互技术，主要用于提高用户体验，减少不必要的页面刷新。在本文中，我们将深入探讨如何利用Ajax和Servlet来实现这种功能。 首先，下拉联动的基本原理是在...

    文字过滤（ajax+jquery+servlet）

    本示例中的"文字过滤（ajax+jquery+servlet）"项目，就是利用Ajax、jQuery和Servlet来实现这样一个功能，它能在用户提交评论前自动检查并替换特定文字，例如将“人”字换成“我”。 **Ajax技术** Ajax...

    jsp+servlet+ajax省市区三级联动

    在这个"jsp+servlet+ajax省市区三级联动"项目中，我们将探讨如何利用这三种技术协同工作来实现这一功能。 首先，JSP（JavaServer Pages）是一种动态网页技术，允许开发者在HTML代码中嵌入Java代码，以服务器端脚本...

    ajax+servlet/struts/json

    在IT领域，Ajax（Asynchronous JavaScript and XML）是一种在无需刷新整个网页的情况下更新部分网页内容的技术，极大地提升了用户体验。Servlet是Java服务器端编程的核心技术，用于处理HTTP请求和响应。Struts是一个...

    零基础学Java_Web开发：JSP+Servlet+Struts+Spring+Hibernate+Ajax

    第十六章的PPT将讲解Ajax的基本原理，以及如何在JavaScript中实现局部刷新和异步数据交换。 通过以上技术的学习，开发者可以构建出高效、模块化的Web应用，并具备应对复杂业务场景的能力。这个资料集合为初学者提供...

    maven+servlet+jsp+bean的demo

    在这个demo中，可能有一个使用Ajax发送请求到Servlet，Servlet处理请求后，再通过Ajax返回数据到前端，从而实现无刷新的页面交互。 总结一下，这个"maven+servlet+jsp+bean的demo"项目展示了JavaWeb开发的基础流程...

    ajax+jsp草稿自动保存（含文档）

    Ajax是一种前端技术，它允许网页在不刷新整个页面的情况下与服务器进行数据交换，从而实现页面的部分更新。核心原理是通过JavaScript创建XMLHttpRequest对象，向服务器发送异步请求，并处理服务器返回的数据。这使得...

    extjs4+servlet+json+soundmanager2实现定时刷新报警(原创)

    标题 "extjs4 + servlet + json + soundmanager2 实现定时刷新报警" 涉及的是一个基于Web的实时报警系统开发技术，其中包含了多个关键组件和技术。让我们逐一深入探讨这些知识点。 1. **EXTJS4**：EXTJS是一个用...

    Buffalo+servlet实现验证码.doc

    在Java Web开发中，验证码是一种常见的安全机制，用于防止自动化的机器人或者恶意用户进行非法操作，例如防止垃圾邮件、刷票等。本示例通过使用Buffalo框架和Servlet来实现一个简单的图形验证码功能。下面将详细介绍...

    JSP+Servlet写的聊天室

    这个小项目旨在创建一个基本的在线聊天平台，用户可以在其中实时交流，查看其他在线用户，并且页面能够自动刷新以显示新的消息。 JSP（Java Server Pages）是Java技术的一种，主要用于创建动态网页。在JSP中，HTML...

Magicbox
Global site tag (gtag.js) - Google Analytics