使用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));

	}

巴特西

Ajax 用法简介

一.不依赖jquery时是这样的用法：

二.引入jquery.js，实现一个定时刷新在线人数，视频依旧播放的功能

效果：

最新文章

热门文章