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 ...
随机推荐
- 用C++Builder在Windows开始按钮上绘图制作方法
熟悉Windows操作系统的软件设计人员知道,在Win95/98/NT/2000中有一任务栏(Task Bar)程序,路径为:C:\WINDOWS\SYSTEM\SYSTRAY.EXE(假设你的Win ...
- Java中的String真的无法修改吗
Java中String一旦赋值将无法修改,每次对String值的修改都是返回新的String. 如何在不创建新的String对象的情况下,对String的值进行修改呢? String类中的包含一个字段 ...
- System.Web.Mvc.HttpUnauthorizedResult.cs
ylbtech-System.Web.Mvc.HttpUnauthorizedResult.cs 1.程序集 System.Web.Mvc, Version=5.2.3.0, Culture=neut ...
- CSS中关于多个class样式设置的不同写法
html中: <div class="containerA"> 这是AAAAAAAAAAAAAAAAAAAAAAA样式 <div class="cont ...
- Spring MVC(六)--通过URL传递参数
URL传递参数时,格式是类似这样的,/param/urlParam/4/test,其中4和test都是参数,这就是所谓的Restful风格,Spring MVC中通过注解@RequestMapping ...
- 2006-2007 ACM-ICPC | POJ3380 POJ3384 POJ3385 水题题解
// CF比赛链接:http://codeforces.com/gym/101650 // POJ链接:http://poj.org/searchproblem?field=source&ke ...
- hdu 1754 I Hate It （线段树）
原题链接:http://acm.hdu.edu.cn/showproblem.php?pid=1754 线段树的模板题,详细的都写在代码里了 //不知道为什么定义单个字符,用%c输入会超时,换成字符数 ...
- js时间操作getTime(),ios移动端真机上返回显示NAN
ios移动端,js时间操作getTime(),getFullYear()等返回显示NaN的解决办法及原因 在做移动端时间转化为时间戳时,遇到了一个问题,安卓手机上访问时,能拿到时间戳,从而正确转换时间 ...
- Django之模板语言(三）------>自定义filter
1.自定义filter: 1.在app01下面新建一个templatetags的python package包. 如果没有app01的话,可以通过命令行在manage中进行创建:python mana ...
- fstream文件打开模式
fstream:对于文件的操作很久两年前就开始使用了,但是仅仅为了达到满足自己需求的目的,就是要么是写,要么是读.从来没有对其进行详细的了解.自己也曾经想过花一点时间去总结一下,这个东西到底应该怎么用 ...