使用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. 2.初始化spark

    参考:  RDD programming guide http://spark.apache.org/docs/latest/rdd-programming-guide.html  SQL progr ...

  2. 在python3中的编码

    在python3中的编码 #_author:Administrator#date:2019/10/29import sysprint(sys.getdefaultencoding())#utf-8 打 ...

  3. UOJ450 复读机

    题意:n个位置,k种颜色.求有多少种方案使得每种颜色恰出现d的倍数次. 解:d=1就快速幂,n,k很小就DP,记得乘组合数来分配位置. d = 2 / 3的时候,考虑生成函数. f(x) = ∑[d ...

  4. 「题解」：windy数

    问题: windy数 时间限制: 1 Sec  内存限制: 512 MB 题面 题目描述 Windy 定义了一种 Windy 数:不含前导零且相邻两个数字之差至少为 的正整数被称为 Windy 数. ...

  5. DRF 序列化组件单增

    目录 自定义序列化(矬) Serializer类(方式繁琐) 底层序列化类 UserSerializer 视图序列化步骤 底层反序列化类 UserCreatSerializer 视图反序列化步骤 Mo ...

  6. javascript 释放变量

    JavaScript 释放变量 在Javascript是可以使用“delete”来手动删除变量,通过这样的方法让GC(Garbage collection)来回收内存,但在JS中并不是所有的变量都可以 ...

  7. Cesium官方教程9--粒子系统

    原文地址:https://cesiumjs.org/tutorials/Particle-Systems-Tutorial/ 粒子系统介绍 这篇教程带你学习Cesium的粒子相关API,比如如何在你的 ...

  8. IDEA(2018)连接MySQL数据库失败的解决方法（报错08001）

     解决方法: 将url改成: jdbc:mysql://localhost:3306/studentmanage?useSSL=true&serverTimezone=Hongkong& ...

  9. python 模拟键盘输入

    备忘录 import win32api import win32con win32api.keybd_event(17,0,0,0) #ctrl键位码是17 win32api.keybd_event( ...

  10. nginx+supervisor 前后端分离项目的发布流程

    [第一部分] 前端发布(vue项目),假设项目名为demo_vue Step1:编译打包前端项目 cd到demo_vue目录下, 执行cnpm run build:prod命令,生成disc文件夹 S ...