Java工作笔记-AJAX实现整体不变，局部更新（与整体刷新比较）

old.js：整体刷新页面，才能实现数据刷新

new.js：点击刷新按钮，就可以刷新

目录结构图如下：

源码如下：

HelloServlet.java

package my;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 HelloServlet extends HttpServlet {/*** Constructor of the object.*/public HelloServlet() {super();}/*** Destruction of the servlet. <br>*/public void destroy() {super.destroy(); // Just puts "destroy" string in log// Put your code here}/*** The doGet method of the servlet. <br>** This method is called when a form has its tag value method equals to get.* * @param request the request send by the client to the server* @param response the response send by the server to the client* @throws ServletException if an error occurred* @throws IOException if an error occurred*/public void doGet(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {int n = new UserStat().count();String replyText = String.valueOf(n);response.setContentType("text/plain");response.setCharacterEncoding("UTF-8");PrintWriter out = response.getWriter();out.write(replyText);out.close();}/*** The doPost method of the servlet. <br>** This method is called when a form has its tag value method equals to post.* * @param request the request send by the client to the server* @param response the response send by the server to the client* @throws ServletException if an error occurred* @throws IOException if an error occurred*/public void doPost(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {response.setContentType("text/plain");response.setCharacterEncoding("UTF-8");PrintWriter out = response.getWriter();out.write("Not Supported");out.close();}/*** Initialization of the servlet. <br>** @throws ServletException if an error occurs*/public void init() throws ServletException {// Put your code here}
}

UserStat.java

package my;public class UserStat {public int count(){return (int)(Math.random() * 1000);}
}

new.jsp

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html><head><base href="<%=basePath%>"><title>My JSP 'new.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"><!--<link rel="stylesheet" type="text/css" href="styles.css">--><link rel="stylesheet" href="bootstrap/css/bootstrap.min.css"><script src="jquery/jquery.js"></script><script src="bootstrap/js/bootstrap.min.js"></script></head><script >function trace( msg ){    try{ console.log(msg); } catch(err){ }}function onQuery(){jQuery.ajax({          method: "GET",            url: "servlet/HelloServlet",success: function(data, textStatus, jqXHR){$("#userCount").html(data);},error: function( jqXHR, textStatus, errorThrown){trace( "error: " + errorThrown );  }});}// 页面加载后的初始化工作$(document).ready( function(){});</script><body><div class="container"><p> 当前共 <span id="userCount"> 0 </span> 人在线 </p><a href="javascript: onQuery()"> 刷新 </a></div></body>
</html>

old.jsp

<%@page import="my.UserStat"%>
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html><head><base href="<%=basePath%>"><title>My JSP 'old.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"><!--<link rel="stylesheet" type="text/css" href="styles.css">--><%UserStat us = new UserStat();String userCount = String.valueOf(us.count());%></head><body><p> 当前共 <span id="userCount"> <%= userCount %> </span> 人在线 </p><div>视频窗口</div></body>
</html>

Java工作笔记-AJAX实现整体不变，局部更新（与整体刷新比较）相关推荐

Java工作笔记-JPA中Repository新增自定义更新操作
这里因为某种自定义业务,需要自己写sql语句进行更新. 或者某方言集不能用,需要对其进行手都更新. 对此记录下. 对应代码如下: @Repository public interface Table1 ...
MySQL工作笔记-使用事件和存储过程定时更新某表数据
目录基本概念演示及源码基本概念因为要看某展示软件的效果,上午用了Qt实时对表进行更新操作! 这是非常low的表现.其中的一个原因就是效率问题! Qt工作笔记-Qt连接Mysql数据库,检索及修 ...
Java学习笔记（二）不定时更新
Java语言画图 package cn.witksy.dev;import javax.imageio.ImageIO; import java.awt.*; import java.awt.imag ...
Java工作笔记-使用jquery.timer.js实现数据自动刷新
程序运行截图如下: 程序结构如下: 源码如下: HelloServlet.java package my;import java.io.IOException; import java.io.Prin ...
Java工作笔记/Java面试题/Java八股文/Java常用API
码农工具包 hutool工具 hutool工具类判断各种类型数据 <!-- https://mvnrepository.com/artifact/cn.hutool/hutool-all --& ...
Java工作笔记-类型转换的一种思路（前后端分离、反射）
这里主要是一种思路,前端可能会发送ajax请求.这个内容是json数据.这里面的数据可能全部是以字符串为主. 通常可以通过反射进行改变,如下的代码: 如下要转换成这些类型不然当时候赋值的时候就麻烦了 ...
Java工作笔记-@Value注解的使用（可用于配置文件）
目录基本概念代码与实例程序打包下载基本概念 @Value:注入配置文件中的内容.只要是spring的注解类(service,compotent, dao等)中都可以. @Component:泛 ...
java工作笔记019---java8新特性判断非null
技术交流QQ群[JAVA,C,.NET,BigData,AI]:170933152 对于null的处理,可以下面这样做: Optional.ofNullable(str).orElse(new Str ...
Java工作笔记-使用CXF接入及创建WebService
这里我采用Spring Boot进行项目启动. 关于CXF要添加的Maven: <dependency><groupId>org.apache.cxf</groupId& ...

Java工作笔记-AJAX实现整体不变，局部更新（与整体刷新比较）

Java工作笔记-AJAX实现整体不变，局部更新（与整体刷新比较）相关推荐

最新文章

热门文章