Ajax_servelt 实现页面自动刷新

最新推荐文章于 2023-04-12 10:10:12 发布
最新推荐文章于 2023-04-12 10:10:12 发布
阅读量539 收藏
点赞数
分类专栏： Ajax

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 οnlοad="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.运行效果

简14
关注
专栏目录
页面定时自动刷新代码实现
08-14
页面定时自动刷新代码实现，就是一些简单的页面刷新的例子，希望对大家有帮助。
Ajax+Servlet实现无刷新下拉联动效果
10-18
【Ajax+Servlet实现无刷新下拉联动效果】是一种常见的网页交互技术，主要用于提高用户体验，减少不必要的页面刷新。在本文中，我们将深入探讨如何利用Ajax和Servlet来实现这种功能。 首先，下拉联动的基本原理是在...
页面自动刷新代码大全
zisetoufa
05-11 477
页面自动刷新代码大全 1) 自动刷新页面 在 与 之间加入： 10表示间隔10秒刷新一次 2) window.location.reload(true); 如果是你要刷新某一个iframe就把window给换成frame的名字或ID号 3) window.navigate(”本页面url”); 4> function abc()...
页面自动刷新代码
Bingo_Me的天空
08-23 1874
  页面自动刷新代码大全，基本上所有要求自动刷新页面的代码都有，大家可以自由发挥做出完美的页面。1) 10表示间隔10秒刷新一次2)window.location.reload(true);如果是你要刷新某一个iframe就把window给换成frame的名字或ID号3)window.navigate("本页面url");4> function abc(){window.location.href
JSP实现自动刷新页面
joy_cz的专栏
03-12 1062
1。"Refresh","3");%>  2. 在"......"之间加上下面一句：       
自动刷新当前页面代码
u010497465的博客
07-21 1059
这里本文为大家介绍三种 js 刷新当前页面的方法： 方法1：reload() 方法 reload()方法用于刷新当前文档。 reload() 方法类似于你浏览器上的刷新页面按钮。 location.reload(); 方法2：replace() 方法 replace() 方法可用一个新文档取代当前文档。。 < html> < head> < meta charset...
dwr.rar_dwr_dwr ajax_dwr 实现 联动 标签
09-23
AJAX允许页面部分刷新，无需重新加载整个页面即可获取新数据。DWR通过提供一种透明的方式来调用服务器端的Java方法，使得AJAX开发更加直观。开发者可以像调用本地函数一样调用服务器上的方法，大大降低了AJAX的使用...
ajax+java servlet实现无刷新搜索实例(可用)
03-20
ajax+java servlet实现无刷新搜索实例(亲测可用) ，1.使用mysql数据库，已有sql语句；2.使用eclipse\MyEclipse导入项目即可；3.运行URL地址在doc/init.txt
ajax+servlet原生实现智能提示框
05-24
在这个"ajax+servlet原生实现智能提示框"的主题中，我们将深入探讨如何利用这两项技术来创建一个实时、动态的用户输入提示功能。 首先，让我们理解智能提示框的基本概念。在许多Web应用中，当用户在输入框中键入...
AJAX_JSON每秒刷新数据
01-13
AJAX (Asynchronous JavaScript and XML) 和 JSON (JavaScript Object Notation) 是Web开发中的核心技术，它们结合使用可以实现页面无刷新地实时更新数据，提供更好的用户体验。本篇将深入讲解如何利用AJAX和JSON每...
js自动刷新页面
10-12
js自动刷新页面
网页页面 自动刷新的3种代码
yaonie_csdn的专栏
05-05 1227
网页页面 自动刷新的3种代码 其实实现这个效果非常地简单，而且这个效果甚至不能称之为特效。你只要把如下代码加入你的网页中就可以了。 1.页面自动刷新：把如下代码加入区域中 ,其中20指每隔20秒刷新一次页面. 2.页面自动跳转：把如下代码加入区域中 ,其中20指隔20秒后跳转到http://www.jb51.net页面 3.页面自动刷新
实现网页页面 自动刷新的几种代码
Programmer_FuQiang的博客
08-14 3471
1.页面自动刷新：把如下代码加入&lt;head&gt;区域中&lt;meta http-equiv="refresh" content="10"&gt;                其中10指每隔10秒刷新一次页面. 2.页面自动跳转：把如下代码加入&lt;head&gt;区域中 &lt;meta http-equiv="refresh" content="10;url=h
网页自动刷新
你的小可爱的博客~
07-28 5135
网页刷新或组件刷新
页面自动刷新方法
最新发布
matteo_FH的博客
04-12 630
关于页面刷新的方法
Ajax请求Servlet返回JSON数据实现页面局部刷新
GIS_yuhua的博客
09-21 1319
我们在请求Servlet时，Servlet会将从数据库中查询到的数据封装成一个List数组，存储在request对象中，然后请求转发到另外一个页面，如以下代码使用request对象携带reportList转发到publication.jsp页面。 //1.将reportList数组存储在request对象中进行返回 request.setAttribute("reportLis...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值