使用Ajax实现页面的局部刷新
一.不依赖jquery时是这样的用法:
var xhr=new XMLHttpRequest(); xhr.onreadystatechange=function(event) { if(xhr.readyState==4&&xhr.status==200) { document.getElementById("line_count").innerHTML=xhr.responseText; } } xhr.open('Get','Count',true); xhr.send();
Count是web.xml中配置的,指向后端servlet文件,点击刷新执行该方法,局部修改line_count这个文本,
从而达到ajax局部刷新的目的
二.引入jquery.js,实现一个定时刷新在线人数,视频依旧播放的功能
index.jsp:
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@ page import="java.text.*" %> <%@ page import="java.util.*" %> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> <title>Insert title here</title> <script src="js/jquery-3.3.1.min.js"></script> <script src="js/bootstrap.min.js"></script> <script> function onQuery() { jQuery.ajax ( { method:"Get", url:"Count", success:function(data,textStatus,jqXHR) { $("#line_count").html(data); }, error:function(jqXHR,textStatus,errorThrown) { alert(errorThrown); } } ); } function timedCount() { onQuery(); t=setTimeout("timedCount()",1000) } $(document).ready(function(){ timedCount(); }); </script> </head> <body> <p> 当前共: <span id="line_count" sytle="color:red">0</span>在线人数</p> <a href="javascript:onQuery()">刷新</a> <br/> <video src="mp4/1.mp4" width=400 height=320 controls="controls"></video> </body> </html>
点击刷新按钮,会刷新line_count的文本,在html加载完毕会执行ready函数,启动一个自己实现的定时器
会一直定时刷新line_count的文本,jquery.timer.js也封装了一个timer,但这个例子中用的是用原生js自己实现的定时器
url:Count指向AjaxServlet.java
AjaxServlet.java——简单返回一个随机数:
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { Random aRandom=new Random(); int count=aRandom.nextInt(1000); PrintWriter out=response.getWriter(); out.write(String.valueOf(count)); }