使用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. 如何在屏幕上查看命令的输出以及在Linux中写入文件

    在Linux中输出命令可以做很多事情(http://www.nanke0834.com) 您可以将命令的输出分配给变量,将其发送到另一个命令/程序以通过管道进行处理或将其重定向到文件以进行进一步分析. ...

  2. C++模拟实现Objective-C动态类型（附源码）

    在OC(Objective-C)里面有动态类型分为以下几类: -(BOOL)isKindOfClass:classObj 是否是classObj类或其子类 -(BOOL)isMemberOfClass ...

  3. day04 - linux常用命令、目录说明以及ubuntu解锁root用户，安装tree命令

    echo abcdefg >> aa.txt //向aa.txt文件末尾追加 abcdefg 字符串 1 基础命令: clear //清屏 whoami //查看当前所登录的用户 who ...

  4. limit方法也是模型类的连贯操作方法之一

    limit方法也是模型类的连贯操作方法之一,主要用于指定查询和操作的数量,特别在分页查询的时候使用较多.ThinkPHP的limit方法可以兼容所有的数据库驱动类的. 限制结果数量 例如获取满足要求的 ...

  5. 前端基础之BOM与DOM操作

    目录 BOM操作 navigator对象 screen对象 history对象 localtion对象 弹出框 计时 setTimeout() clearTimeout() setInterval() ...

  6. ros python

    https://www.ncnynl.com/archives/201611/1059.html python的节点需要对节点设置权限为可执行,在.py文件所在的路径执行如下命令 $ touch ta ...

  7. LUOGU P4777 【模板】扩展中国剩余定理（EXCRT）

    传送门 解题思路 扩展 $crt​$,就是中国剩余定理在模数不互质的情况下,首先对于方程 ​     $\begin{cases} x\equiv a_1\mod m_1\\x\equiv a_2\m ...

  8. 在Xsheel Linux上安装nodejs和npm

    最近window系统转向linux系统开发,linux系统的确适合程序员的开发. 作为前端安装了nodejs和npm,遇到了一些坑,赶紧记录下来 第一种安装方法:安装nodejs  : sudo  a ...

  9. CentOS使用rpm离线安装mariadb

    本文不再更新,可能存在内容过时的情况,实时更新请移步原文地址:CentOS使用rpm离线安装mariadb: 环境: CentOS Linux release 7.6.1810 (Core) mari ...

  10. 玩转xargs

    xargs命令可以把标准输入数据转换成命令行参数.也可以将单行或多行文本输入转换成其他格式,是构建单行命令的重要组件之一. xargs命令应该紧跟在管道操作符之后,以stdin作为主要的源数据流,使用 ...