Ajax 用法简介
使用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的AJAX方法简介及与其他文件$符号冲突的解决办法
一.重要的jQuery AJAX方法简介 $.load(url) 从服务器载入数据 $.get(url,callback) 从服务器请求数据,并执行回调函数 $.post(url,data,callb ...
- AJAX（一）AJAX的简介和基础
本节简介(异步链接服务器对象)XMLHTTPRequest以及AJAX的简介. AJAX即“Asynchronous Javascript And XML”(异步JavaScript和XML). AJ ...
- Ajax 用法
Ajax 用法 var total=100; var orderName='sssss'; var orderDescrib='dddd ...
- IOS NSInvocation用法简介
IOS NSInvocation用法简介 2012-10-25 19:59 来源:博客园 作者:csj007523 字号:T|T [摘要]在 iOS中可以直接调用某个对象的消息方式有两种,其中一种就是 ...
- 掌握 Ajax，第 1 部分: Ajax 入门简介
转:http://www.ibm.com/developerworks/cn/xml/wa-ajaxintro1.html 掌握 Ajax,第 1 部分: Ajax 入门简介 理解 Ajax 及其工作 ...
- jQuery $.post $.ajax用法
jQuery $.post $.ajax用法 jQuery.post( url, [data], [callback], [type] ) :使用POST方式来进行异步请求 参数: url (Stri ...
- [转]Jquery Ajax用法
原文地址:http://www.php100.com/html/program/jquery/2013/0905/6004.html jQuery学习之jQuery Ajax用法详解 来源: 时间 ...
- JodaTime用法简介
JodaTime用法简介 Java的Date和Calendar用起来简直就是灾难,跟C#的DateTime差距太明显了,幸好有JodaTime 本文简单罗列JodaTime的用法 package co ...
- Apache自带压力测试工具ab用法简介
ab命令原理 ab命令会创建很多的并发访问线程,模拟多个访问者同时对某一URL进行访问.它的测试目标是基于URL的,因此,既可以用来测试Apache的负载压力,也可以测试nginx.lighthttp ...
随机推荐
- python库参考学习网址
https://github.com/china-testing/python-api-tesing 这里有很多python库参考
- 2016.10.7初中部上午NOIP普及组比赛总结
2016.10.7初中部上午NOIP普及组比赛总结 这次的题还可以,重新入了比赛的前十. 进度: 比赛:90+10+70+30=200 改题:AC+AC+AC+AC=AK 找试场 这题很简单,但是被欺 ...
- 【Codeforces Round #424 (Div. 2) D】Office Keys
[Link]:http://codeforces.com/contest/831/problem/D [Description] 有n个人,它们都要去一个终点,终点位于p; 但是,在去终点之前,他们都 ...
- Object.keys()应用
<script type="text/javascript"> var person={ firstName:"David", lastName:& ...
- javaweb的几种开发模式
1.MVC模式基础 1.1.MVC模式简介 MVC是一种架构型模式,它本身并不引入新的功能,只是用来指导我们改善应用程序的架构,使得应用的模型和视图相分离,从而达到更好的开发和维护效率.在MVC模式中 ...
- 转：Wireshark基本介绍和学习TCP三次握手
源地址:http://www.cnblogs.com/TankXiao/archive/2012/10/10/2711777.html 之前写过一篇博客:用 Fiddler 来调试HTTP,HTTPS ...
- 《DSP using MATLAB》Problem 7.38
代码: %% ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ %% Output In ...
- python 描述器
语法简析 一般来说,描述器(descriptor)是一个有”绑定行为”的对象属性(object attribute),它的属性访问被描述器协议方法重写.这些方法是 __get__(). __set__ ...
- ES6之数值的扩展学习
引自:http://es6.ruanyifeng.com/#docs/number 二进制和八进制表示法 ES6 提供了二进制和八进制数值的新的写法,分别用前缀0b(或0B)和0o(或0O)表示. 0 ...
- 解决Navicat 报错:1130-host is not allowed MySQL不允许从远程访问的方法
ERROR 1130: Host '192.168.1.3' is not allowed to connect to thisMySQL server 解决方法: 1. 改表法.可能是你的帐号不允许 ...