Java工作笔记-AJAX实现整体不变，局部更新（与整体刷新比较）
生活随笔
收集整理的這篇文章主要介紹了
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实现整体不变，局部更新（与整体刷新比较）的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Qt文档阅读笔记-QPropertyAn
- 下一篇： Qt学习笔记-web图片爬取器（webK