使用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. 廖雪峰Java11多线程编程-3高级concurrent包-2ReadWriteLock

    ReentrantLock保证单一线程执行 ReentrantLock保证了只有一个线程可以执行临界区代码: 临界区代码:任何时候只有1个线程可以执行的代码块. 临界区指的是一个访问共用资源(例如:共 ...

  3. SG函数博弈——poj2311

    关于SG函数的博弈 首先定义必败态 x : SG[x]=0 设任意一个状态y,到所有y能到达的状态连一条边,令这些后继为z y : SG[y]=mex(SG[z]) SG[y]==0 : y就是必败态 ...

  4. c语言学习笔记 - 指针和字符串

    前面学习了字符串是一种字符数组,又知道了指针变量和数组的关系,这里来看一下指针和字符串的关系. #include <stdio.h> int main(void){ char str = ...

  5. codeforces 514E-Darth Vader and Tree

    题意:有个无限大的有根树,每个节点都有N个孩子,每个孩子距离父亲节点的距离为di.求距离根节点距离<=x的节点个数. 思路:注意观察数据范围,每一个d[i]均小于等于100所以我们可以设dp[i ...

  6. day 47 前端基础之BOM和DOM

      前端基础之BOM和DOM   前戏 到目前为止,我们已经学过了JavaScript的一些简单的语法.但是这些简单的语法,并没有和浏览器有任何交互. 也就是我们还不能制作一些我们经常看到的网页的一些 ...

  7. 第一周——clone项目到本地

    公司使用的是git进行version control,代码托管在gitlab. 按照公司规范注册了gitlab账号, 漫长的等待clone到本地~ 然而,还是有问题,jar包下载不完全(公司网速dow ...

  8. Ubuntu安装QQ、微信、微信开发者工具、搜狗输入法

    wine 待补充……

  9. js中控制流管理的四种方法

    引自http://es6.ruanyifeng.com/#docs/generator#yield--表达式 1.常用的回调方法 step1(function (value1) { step2(val ...

  10. IDEA设置maven项目的默认配置

    IDEA设置maven项目的默认配置 问题描述 很多刚使用idea的人,用其创建maven工程时会遇到一个问题,明明给项目设置了新的maven配置(使用阿里镜像源或者自定义maven版本),但是重新打 ...