使用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 用法简介的更多相关文章

  1. jQuery的AJAX方法简介及与其他文件$符号冲突的解决办法

    一.重要的jQuery AJAX方法简介 $.load(url) 从服务器载入数据 $.get(url,callback) 从服务器请求数据,并执行回调函数 $.post(url,data,callb ...

  2. AJAX（一）AJAX的简介和基础

    本节简介(异步链接服务器对象)XMLHTTPRequest以及AJAX的简介. AJAX即“Asynchronous Javascript And XML”(异步JavaScript和XML). AJ ...

  3. Ajax 用法

    Ajax 用法 var total=100;                 var orderName='sssss';                 var orderDescrib='dddd ...

  4. IOS NSInvocation用法简介

    IOS NSInvocation用法简介 2012-10-25 19:59 来源:博客园 作者:csj007523 字号:T|T [摘要]在 iOS中可以直接调用某个对象的消息方式有两种,其中一种就是 ...

  5. 掌握 Ajax，第 1 部分: Ajax 入门简介

    转:http://www.ibm.com/developerworks/cn/xml/wa-ajaxintro1.html 掌握 Ajax,第 1 部分: Ajax 入门简介 理解 Ajax 及其工作 ...

  6. jQuery $.post $.ajax用法

    jQuery $.post $.ajax用法 jQuery.post( url, [data], [callback], [type] ) :使用POST方式来进行异步请求 参数: url (Stri ...

  7. [转]Jquery Ajax用法

    原文地址:http://www.php100.com/html/program/jquery/2013/0905/6004.html jQuery学习之jQuery Ajax用法详解 来源:   时间 ...

  8. JodaTime用法简介

    JodaTime用法简介 Java的Date和Calendar用起来简直就是灾难,跟C#的DateTime差距太明显了,幸好有JodaTime 本文简单罗列JodaTime的用法 package co ...

  9. Apache自带压力测试工具ab用法简介

    ab命令原理 ab命令会创建很多的并发访问线程,模拟多个访问者同时对某一URL进行访问.它的测试目标是基于URL的,因此,既可以用来测试Apache的负载压力,也可以测试nginx.lighthttp ...

随机推荐

  1. 异常处理记录: Unable to compile class for JSP

    出错信息截图: 经过搜索引擎的帮助, 发现这些引发异常的可能原因: 1. tomcat的版本必须大于等于JDK的版本 2. maven中的jar与tomcat中jar冲突 看看pom.xml, 果然j ...

  2. leetcode-第5周双周赛-1135-最低成本联通所有城市

    方法一: class Solution: def minimumCost(self, N: int, conections: List[List[int]]) -> int: def find( ...

  3. 解决CentOS“Zabbix discoverer processes 75% busy”的问题

    解决CentOS“Zabbix discoverer processes 75% busy”的问题 运维  立杰  4年前 (2014-08-11)  1104℃  0评论 在使用Zabbix过程中, ...

  4. 19-10-26-Night-D

    压表的技巧. ZJ一下: T1,考试不会哈夫曼树只压到$1MB$最后截掉了一部分. T2,直接暴力丢上去.$\Theta(N+\sqrt{N}\log N)$ T3,现场码出左右旋然后就不会了$QAQ ...

  5. light oj 1231 dp 多重背包

    #include <stdio.h> #include <string.h> #include <stdlib.h> #include <math.h> ...

  6. 杂项-公司：Apple

    ylbtech-杂项-公司:Apple 苹果公司(Apple Inc. )是美国的一家高科技公司.由史蒂夫·乔布斯.斯蒂夫·沃兹尼亚克和罗·韦恩(Ron Wayne)等人于1976年4月1日创立,并命 ...

  7. Pandas对于CSV的简单操作

    Pandas对于CSV的简单操作 最近在研究pandas对于csv文件的读取以及一些操作,网上的信息比较乱,写篇博客记录一下,毕竟自己写的才是最适合自己的用法. 首先我们应该都知道,pandas是一个 ...

  8. Python学习day44-数据库(单表及多表查询)

    figure:last-child { margin-bottom: 0.5rem; } #write ol, #write ul { position: relative; } img { max- ...

  9. Frame用navigate导航到新页面后导航条隐藏的方法

    设置Frame的NavigationUIVisibility="Hidden"

  10. HBase 表和Region