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 ...
随机推荐
- CF891D Sloth
题意:给你一棵树,你选择删掉一条边,再加上一条边(也要保证为树),问最后树上的节点能够两两完美匹配的加删边方案数? n<=5e5. 标程: #include<cstdio> #inc ...
- 二分图匹配——poj1469
关于本题二分图的匹配关系始终是加单向边用左边去匹配右边,match表示的是右边的人匹配的对应的左边的点 /* 关于本题二分图的匹配 链接的关系始终是单向边 用左边去匹配右边,match表示的是右边的人 ...
- display和position以及其余标签的使用
今天主要学习了两大标签display和position:中文名字是显示和位置,这两个元素在前端的学习还是很重要的,因为在css的布局里面会经常用到这两种元素. 还有一些其余的标签例:margin,pa ...
- swoole是如何实现任务定时自动化调度的?
https://www.muzilong.cn/article/117 开发环境 环境:lnmp下进行试验. 框架:laravel5 问题描述 这几天做银行对帐接口时,踩了一个坑,具体需求大致描述一下 ...
- PAT甲级——【牛客练习题1002】
题目描述 Given an integer with no more than 9 digits, you are supposed to read it in the traditional Chi ...
- Data too long for column
一篇文章的正文,需要很多字数,默认就是255,不够 @Lob @Basic @Type(type = "text") @Column(name = "detail&quo ...
- PKU 百练OJ Arbitrage
http://bailian.openjudge.cn/practice/2240/ #include <iostream> #include <string> #includ ...
- vs 快捷键 (空格显示 绿点, Tab 显示箭头)
VS 快捷键 (空格显示 绿点, Tab 显示箭头) VS 有用的快捷键 : Ctrl + r, ctrl + w, 切换空格示.
- 跟我一起在Win10中用VMware安装Ubuntu
VMware下安装Ubuntu 打开VMware,创建虚拟机: 点击运行虚拟机,报错为 解决办法为 大功告成,我们已经在Win10中用VMware安装Ubuntu了
- 在mac下怎么配置web环境(php)
1, 安装PHP+apach+mysql(xampp) 2, 在目录下建一个新文件夹 : 我是在Users/个人目录/workspace 3, 打开/Applications/XAMPP/xamp ...