Ajax_创建自动刷新页面

最新推荐文章于 2023-03-17 13:25:15 发布
最新推荐文章于 2023-03-17 13:25:15 发布
阅读量69 收藏
点赞数
分类专栏： Ajax技术应用 文章标签： Ajax Cache JSP JavaScript OS ViewUI

JSP部分：

<%@ page language="java" import="java.util.*" pageEncoding="gbk"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>

   <title>My JSP 'index.jsp' starting page</title>
   <meta http-equiv="pragma" content="no-cache">
   <meta http-equiv="cache-control" content="no-cache">
   <meta http-equiv="expires" content="0">
   <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
   <meta http-equiv="description" content="This is my page">
  
   <script type="text/javascript">
　　var xmlHttp;
　　function createXMLHttpRequest(){
   　　if (window.ActiveXObject) {
   　　   xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
   　　}
   　　else if (window.XMLHttpRequest) {
   　   xmlHttp = new XMLHttpRequest();
   　　}
　　}

　　function doStart() {
   　　createXMLHttpRequest();
   　　var url = "DynamicUpdateServlet?task=reset";
   　　xmlHttp.open("GET", url, true);
   　　xmlHttp.onreadystatechange = startCallback;
   　　xmlHttp.send(null);
　　}

　　function startCallback() {
   　　if (xmlHttp.readyState == 4) {
    　　if (xmlHttp.status == 200) {
     　　setTimeout("pollServer()", 5000);
     　　refreshTime();
    　　}
   　　}
　　}

　　function pollServer() {
   　　createXMLHttpRequest();
   　　var url = "DynamicUpdateServlet?task=foo";
   　　xmlHttp.open("GET", url, true);
   　　xmlHttp.onreadystatechange = pollCallback;
   　　xmlHttp.send(null);
　　}

　　function refreshTime(){
   　　var time_span = document.getElementById("time");
   　　var time_val = time_span.innerHTML;
   　　var int_val = parseInt(time_val);
   　　var new_int_val = int_val - 1;
   　　if (new_int_val > -1) {
    　　setTimeout("refreshTime()", 1000);
    　　time_span.innerHTML = new_int_val;
   　　} else {
   　　   time_span.innerHTML = 5;
   　　}
　　}

　　function pollCallback() {
   　　if (xmlHttp.readyState == 4) {
    　　if (xmlHttp.status == 200) {
     　　var message =xmlHttp.responseXML.getElementsByTagName("message")[0].firstChild.data;
     　　if (message != "done") {
      　　var new_row = createRow(message);
      　　var table = document.getElementById("dynamicUpdateArea");
      　　var table_body =table.getElementsByTagName("tbody").item(0);
      　　var first_row =table_body.getElementsByTagName("tr").item(1);
      　　table_body.insertBefore(new_row, first_row);
      　　setTimeout("pollServer()", 5000);
      　　refreshTime();
     　　}
     }
   　　}
　　}

　　function createRow(message) {
   　　var row = document.createElement("tr");
   　　var cell = document.createElement("td");
   　　var cell_data = document.createTextNode(message);
   　　cell.appendChild(cell_data);
   　　row.appendChild(cell);
   　　return row;
　　}
　　</script>
</head>
<body>
   <h1>
    Ajax Dynamic Update Example
   </h1>
   This page will automatically update itself:
   <input type="button" value="Launch" id="go" οnclick="doStart();" />
   <p>
    Page will refresh in
    <span id="time">5</span> seconds.
   <p>
   <table id="dynamicUpdateArea" align="left">
    <tbody>
     <tr id="row0">
      <td></td>
     </tr>
    </tbody>
   </table>
</body>
</html>

Servlet部分：

public class DynamicUpdateServlet extends HttpServlet {

private int counter = 1;

public void doGet(HttpServletRequest request, HttpServletResponse response)
    throws ServletException, IOException {
   this.doPost(request, response);
}

public void doPost(HttpServletRequest request, HttpServletResponse response)
    throws ServletException, IOException {
   String res = "";
   String task = request.getParameter("task");
   String message = "";
   if (task.equals("reset")) {
    counter = 1;
   } else {
    switch (counter) {
    case 1:
     message = "Steve walks on stage";
     break;
    case 2:
     message = "iPods rock";
     break;
    case 3:
     message = "Steve says Macs rule";
     break;
    case 4:
     message = "Change is coming";
     break;
    case 5:
     message = "Yes, OS X runs on Intel - has for years";
     break;
    case 6:
     message = "Macs will soon have Intel chips";
     break;
    case 7:
     message = "done";
     break;
    }
    counter++;
   }
   res = "<message>" + message + "</message>";
   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();
}

}

fsgsdfghdfh
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Ajax基本应用---自动刷新页面
Stark_JC的博客
08-05 3020
本篇主要介绍了用Ajax实现自动刷新页面的实现步骤，以及一些问题的解释。
如何设置ajax自动刷新,Ajax创建自动刷新页面
weixin_35538624的博客
08-06 1033
1.dynamicUpdate.htmlAjax Dynamic Updatevar xmlHttp;function createXMLHttpRequest() {if (window.ActiveXObject) {xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");}else if (window.XMLHttpRequest) {xmlHtt...
如何用ajax实现页面自动刷新,Ajax实现页面自动刷新实例解析
weixin_42503223的博客
08-06 1627
Ajax实现页面自动刷新实例解析 内容精选换一换用户已创建桶并上传了网站文件。域名后缀目前支持的范围为2~6个英文大小写字母。开启CDN加速后，可配置网站加速、文件下载加速和点播加速。详细应用场景请参见应用场景。通过CDN实现OBS文件下载加速的详细配置方法请参见最佳实践。CDN加速需收费，具体请参见CDN价格说明。同时OBS提供更加优惠的回源流量包，可以减少CDN加速场景下获取数据时云解析服务支...
java ajax 定时刷新当前页面_Ajax实现页面自动刷新实例解析
weixin_31635881的博客
03-04 650
AJAX 是一种用于创建快速动态网页的技术。接下来通过本文给大家介绍Ajax实现页面自动刷新实例解析，感兴趣的朋友一起看看吧Ajax简介：AJAX即“Asynchronous Javascript And XML”(异步JavaScript和XML)，是指一种创建交互式网页应用的网页开发技术。AJAX = 异步 JavaScript和XML(标准通用标记语言的子集)。AJAX 是一种用于创建快速动...
ajax _局部刷新获取数据
yuroll的博客
03-17 334
yuroll
ajax 数据周期 刷新,ajax页面自动刷新
weixin_39846898的博客
08-06 259
ajax页面自动刷新 内容精选换一换华为云帮助中心，为用户提供产品简介、价格说明、购买指南、用户指南、API参考、最佳实践、常见问题、视频帮助等技术文档，帮助您快速上手使用华为云服务。通常出于维护目的，您可能需要重启数据库实例。例如：对于某些运行参数修改，需要重启单个实例使之生效。您可通过控制台对主实例和只读实例执行重启操作。关系型数据库支持单个实例重启和批量实例重启。如果数据库实例处于“异常”状...
java使用ajax异步刷新_ajax异步刷新请求数据
weixin_31497453的博客
02-24 416
AJAX是与服务器交换数据的艺术，它在不重载全部页面的情况下，实现了对部分网页的更新。AJAX = 异步 JavaScript 和 XML(Asynchronous JavaScript and XML)。简短地说，在不重载整个网页的情况下，AJAX 通过后台加载数据，并在网页上进行显示。原生的ajax是比较难写的，对底层原理要求相对较高，而jQuery经过封装，将ajax封装了，使用起来就比较简...
ajax的自动加载数据库,ajax自动刷新数据库
weixin_32211599的博客
08-06 256
ajax自动刷新数据库 内容精选换一换云监控服务可以对文档数据库服务的运行状态进行日常监控。您可以通过管理控制台，直观地查看文档数据库服务的各项监控指标。由于监控数据的获取与传输会花费一定时间，因此，云监控显示的是当前时间5～10分钟前的监控状态。如果您的实例刚刚创建完成，请等待5～10分钟后查看监控数据。文档数据库实例正常运行。故障或已删除的文档数据库实例或节点，无法查看其通常出于维护目的，您可...
java ajax 定时刷新当前页面_Ajax的常用技巧---实现自动刷新页面.
weixin_28761455的博客
02-13 491
网页自动刷新功能在web网站上已经屡见不鲜了，如即时新闻信息，股票信息等，都需要不断获取最新信息。在传统的web实现方式中，想要实现类似的效果，必须进行整个页面的刷新，在网络速度受到一定限制的情况下，这种因为一个局部变动而牵动整个页面的处理方式显得有些得不偿失。Ajax技术的出现很好的解决了这个问题，利用Ajax技术可以实现网页的局部刷新，只更新指定的数据，并不更新其他的数据。现在创建一个实例，以...
AJAX-页面无需刷新技术
zm17671443092的博客
08-22 2319
AJAX-页面无需刷新技术 一 什么是ajax？ 1.1.Ajax即“Asynchronous Javascript And XML”(异步JavaScript 和XML)，是指一种创建交互式网页应用的网页开发技术。Ajax=异步JavaScript和XML（标准通用标记语言的子集）。通过在后台与服务器进行少量数据交换,Ajax可以使用网页实现异步更新。 这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新（ 无刷新技术）。传统的网页（不使用Ajax）如果需要更新内容，必须重载整个网页页面。
Ajax实现页面自动刷新实例解析
12-11
Ajax简介： AJAX即“Asynchronous Javascript And XML”（异步JavaScript和XML）...传统的网页（不使用 AJAX）如果需要更新内容，必须重载整个网页页面。 html部分： <!DOCTYPE html> <html lang="en"> <
ssah.rar_ajax_struct ajax_struct+spring
09-14
在本项目中，AJAX可能被用来实现动态加载数据、无刷新提交表单等功能，提高系统的响应速度和用户交互性。 2. **Structs**： Structs是一个基于MVC（Model-View-Controller）模式的Java Web应用程序框架，简化了...
dwr.rar_ajax_ajax jar
09-24
AJAX（Asynchronous JavaScript and XML）是一种在无需刷新整个网页的情况下，能够更新部分网页的技术。它通过在后台与服务器进行少量数据交换，使网页实现异步更新，从而极大地提升了用户体验。 **主要知识点：** ...
ajax动态创建自动刷新页面
03-11
实现自动刷新页面 本例实现页面自动刷新的效果，该页面的内容如图5-4所示，在该页面中将根据数据库中存储的最新数据信息更新页面中热卖商品的信息，但是对这些信息的修改并不会导致整个页面的刷新。 实际的Web应用中...
harmonyos应用开发者高级认证.docx
07-06
HarmonyOS应用开发者高级认证是检验开发者是否具备HarmonyOS高级应用开发能力的重要标准。以下是对HarmonyOS应用开发者高级认证的详细解析： 一、认证概述 HarmonyOS应用开发者高级认证要求开发者掌握鸿蒙的核心概念和端云一体化开发、数据、网络、媒体、并发、分布式、多设备协同等关键技术能力，具备独立设计和开发鸿蒙应用能力。通过这一认证，开发者能够系统地提升自己在HarmonyOS应用开发领域的技能水平，为未来的职业发展打下坚实基础。 二、认证流程 注册与实名认证：首先，开发者需要在华为开发者官方网站注册账号并进行实名认证。这是获取认证资格的前提条件。 课程学习：认证前，开发者需要参加HarmonyOS应用开发者高级认证的培训课程。这些课程涵盖了HarmonyOS的核心概念、开发技术、分布式应用开发、UI设计等关键内容。开发者可以通过线上或线下的方式进行学习，确保自己掌握所需的知识和技能。 参加考试：完成课程学习后，开发者可以报名参加HarmonyOS应用开发者高级认证考试。考试内容主要涵盖所学课程的重点知识和技能，通过考试即可获得认证资格。
SAP数字化转型.pptx
07-06
SAP数字化转型.pptx
iso12233数码相机分辨率测量标准.pdf
07-07
iso12233数码相机分辨率测量标准.pdf
Java软件开发实战 Java基础与案例开发详解 10-5 finally关键字 共7页.pdf
最新发布
07-07
完整版：https://download.csdn.net/download/qq_27595745/89522468 【课程大纲】 1-1 什么是java 1-2 认识java语言 1-3 java平台的体系结构 1-4 java SE环境安装和配置 2-1 java程序简介 2-2 计算机中的程序 2-3 java程序 2-4 java类库组织结构和文档 2-5 java虚拟机简介 2-6 java的垃圾回收器 2-7 java上机练习 3-1 java语言基础入门 3-2 数据的分类 3-3 标识符、关键字和常量 3-4 运算符 3-5 表达式 3-6 顺序结构和选择结构 3-7 循环语句 3-8 跳转语句 3-9 MyEclipse工具介绍 3-10 java基础知识章节练习 4-1 一维数组 4-2 数组应用 4-3 多维数组 4-4 排序算法 4-5 增强for循环 4-6 数组和排序算法章节练习 5-0 抽象和封装 5-1 面向过程的设计思想 5-2 面向对象的设计思想 5-3 抽象 5-4 封装 5-5 属性 5-6 方法的定义 5-7 this关键字 5-8 javaBean 5-9 包 package 5-10 抽象和封装章节练习 6-0 继承和多态 6-1 继承 6-2 object类 6-3 多态 6-4 访问修饰符 6-5 static修饰符 6-6 final修饰符 6-7 abstract修饰符 6-8 接口 6-9 继承和多态 章节练习 7-1 面向对象的分析与设计简介 7-2 对象模型建立 7-3 类之间的关系 7-4 软件的可维护与复用设计原则 7-5 面向对象的设计与分析 章节练习 8-1 内部类与包装器 8-2 对象包装器 8-3 装箱和拆箱 8-4 练习题 9-1 常用类介绍 9-2 StringBuffer和String Builder类 9-3 Rintime类的使用 9-4 日期类简介 9-5 java程序国际化的实现 9-6 Random类和Math类 9-7 枚举 9-8 练习题 10-1 java异常处理 10-2 认识异常 10-3 使用try和catch捕获异常 10-4 使用throw和throws引发异常 10-5 finally关键字 10-6 getMessage和printStackTrace方法 10-7 异常分类 10-8 自定义异常类 10-9 练习题 11-1 Java集合框架和泛型机制 11-2 Collection接口 11-3 Set接口实现类 11-4 List接口实现类 11-5 Map接口 11-6 Collections类 11-7 泛型概述 11-8 练习题 12-1 多线程 12-2 线程的生命周期 12-3 线程的调度和优先级 12-4 线程的同步 12-5 集合类的同步问题 12-6 用Timer类调度任务 12-7 练习题 13-1 Java IO 13-2 Java IO原理 13-3 流类的结构 13-4 文件流 13-5 缓冲流 13-6 转换流 13-7 数据流 13-8 打印流 13-9 对象流 13-10 随机存取文件流 13-11 zip文件流 13-12 练习题 14-1 图形用户界面设计 14-2 事件处理机制 14-3 AWT常用组件 14-4 swing简介 14-5 可视化开发swing组件 14-6 声音的播放和处理 14-7 2D图形的绘制 14-8 练习题 15-1 反射 15-2 使用Java反射机制 15-3 反射与动态代理 15-4 练习题 16-1 Java标注 16-2 JDK内置的基本标注类型 16-3 自定义标注类型 16-4 对标注进行标注 16-5 利用反射获取标注信息 16-6 练习题 17-1 顶目实战1-单机版五子棋游戏 17-2 总体设计 17-3 代码实现 17-4 程序的运行与发布 17-5 手动生成可执行JAR文件 17-6 练习题 18-1 Java数据库编程 18-2 JDBC类和接口 18-3 JDBC操作SQL 18-4 JDBC基本示例 18-5 JDBC应用示例 18-6 练习题 19-1 。。。
php ajax 自动刷新,怎么用ajax实现提交评论并自动刷新
06-01
要实现提交评论并自动刷新，可以通过以下步骤使用 AJAX： 1. 创建一个包含评论表单和显示评论的 HTML 页面。 2. 在页面中添加一个用于触发 AJAX 请求的提交按钮。 3. 使用 AJAX 发送评论数据到服务器。可以使用 jQuery 的 $.ajax() 函数来实现。具体来说，可以使用以下代码： ``` $.ajax({ type: "POST", url: "submit_comment.php", data: $("#comment_form").serialize(), success: function() { // 处理成功响应 }, error: function() { // 处理错误响应 } }); ``` 其中，submit_comment.php 是用于处理提交评论的 PHP 脚本，#comment_form 是包含评论表单的表单元素的 ID。 4. 在服务器端处理提交评论的逻辑，并将结果返回给客户端。例如，可以将提交的评论保存到数据库中。 5. 在 AJAX 请求成功后，使用 JavaScript 更新评论列表。例如，可以使用以下代码： ``` $.ajax({ type: "POST", url: "get_comments.php", success: function(data) { $("#comment_list").html(data); }, error: function() { // 处理错误响应 } }); ``` 其中，get_comments.php 是用于获取评论列表的 PHP 脚本，#comment_list 是显示评论的元素的 ID。 6. 将以上步骤封装到一个函数中，并在页面加载时调用该函数。同时，可以使用 setInterval() 函数定时调用该函数，以实现自动刷新评论列表的效果。例如，可以使用以下代码： ``` function refreshComments() { $.ajax({ // 发送评论数据到服务器 }).done(function(){ // 更新评论列表 }); } $(document).ready(function() { // 页面加载时刷新评论列表 refreshComments(); // 每隔 10 秒钟自动刷新评论列表 setInterval(refreshComments, 10000); }); ``` 这样就可以实现提交评论并自动刷新的效果了。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值