Ajax从入门到精通

AJAX无刷新交互
目录(单击跳转对应目录)
1.初步认识AJAX............................................................ 1
1.1AJAX原理和优点...................................................... 1
1.2实际使用............................................................ 2
1.3怎么解决问题的...................................................... 2
1.4三个经典案例........................................................ 2
2.返回数据................................................................. 8
2.1具体数据............................................................ 8
3.具体DEMO............................................................... 15
3.1请求遮罩展示效果的实现............................................. 15
3.2省市区联动......................................................... 17
3.3实现黄金价格每五秒变动............................................. 20
3.4AJAX实现聊天室..................................................... 221.初步认识AJAX
1.1AJAX原理和优点
①简单认识
A.Asynchronous Javascript And XM:异步的 JavaScript 和 XML
B.是七个技术的综合(js/xml/xstl/xhtml/dom/MmlHttpRequest/css),ajax是一个综合剂
C.ajax是一个与服务器端语言无关的技术(php/java/.net网站都可以用)
D.可以直接用的技术:灯箱遮罩效果/日程表
E.ajax可以给客户端返回三种格式的数据(文本格式/xml/json)
②为什么使用它
A.页面无刷新的动态数据交换[其他技术flash/java applet/iframe/ajax](数据是整体提交的/整个页面有刷新:如果页面局部要求时时刷新,另一个部分又要输入数据就有问题/用户体验查/占带宽)
③基本原理
A.传统的:一个请求对应一个响应  A页面发帖—>请求—>服务器—>响应—>A页面
B.ajax:创建ajax引擎对象[浏览器](XmlHttpRequest)   A页面发帖—>请求—>委托XmlHttpRequest对象去请求—>服务器—>响应—>XmlHttpRequest对象—>A页面
C.为什么通过委托XmlHttpRequest对象就可以异步呢?就像现实中老师讲课,如果老师自己买东西了,学生就不能听课了。
如果老师委托"助理:XmlHttpRequest对象"去买面包,老师就可以继续讲课,学生可以继续听课。
1.2实际使用
①谷歌的邮件/地图/日期/股票/动态数据更新。各大门户网站都在用
1.3怎么解决问题的
①动态加载数据[地址薄选择],按需取数据。
②改善用户体验(输入内容前提示/带进度条文件上传...)
③电子商务应用(购物车/邮件订阅...)
④访问第三方服务(访问搜索服务/rss阅读器)
⑤数据的局部刷新
1.4三个经典案例
①使用ajax完成用户名的验证(无刷新验证用户名)
A.实现了无刷新发送请求验证数据了。目前返回的是页面代码(后面要在指定div区域返回页面)管理业这么写可以实现单纯的返回数据。
<%@ page language="java" contentType="text/html; charset=utf-8"pageEncoding="utf-8"%>
<%String name = request.getParameter("name");if (name.equals("liu19911009")) {
%>用户名不可以用
<%} else {
%>用户名可以用
<%}
%>
B.使用get方式发出请求,如果提交的用户名不变化,浏览器将不会真的发请求,而是从缓存取数据。
—>解决之道url后代一个总是变化的参数,比如当前时间。/或者在服务器慧松结果的时候禁用缓存。no-cache
C.边输入边提示 οnkeyup="checkName" 在姓名栏加上即可,确定就是请求量过大。
D.post方式的请求,在前面的方式中稍微修改即可。最好用post方式,安全/避免乱码
<%@ page language="java" contentType="text/html; charset=utf-8"pageEncoding="utf-8"%>
<!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=utf-8">
<title>注册页面</title>
</head>
<body><form action="">用户名字:<input type="text" name="name" id="name" /> <input type="button"value="验证用户名" id="checkName" /> <input type="text" id="myInfo"style="border-width: 0; color: red;width: 1000px;" /> <br /> 用户密码:<inputtype="password" name="password" id="password" /><br /> 用户邮箱:<inputtype="text" name="email" /><br /> <input type="submit" value="用户注册" /></form><hr /><form action="">用户名字:<input type="text" name="name1" id="name1" /> <input type="button"value="验证用户名" /> <input type="text" id="myInfo1"style="border-width: 0; color: red;" /> <br /> 用户密码:<inputtype="password" name="password1" id="password1" /><br /> 用户邮箱:<inputtype="text" name="email1" /><br /> <input type="submit" value="用户注册" /></form>
</body>
<!-- 必须引入库 -->
<script type="text/javascript" src="/ALLJS/jquery-3.0.0.js"></script>
<script type="text/javascript">var myXmlHttpRequest;//设置成全局才都能访问//创建ajax引擎function createXmlHttpRequest(){var xmlHttpRequest;if(window.ActiveXObject){alert("IE");xmlHttpRequest=new ActiveXObject("Microsoft.XMLHTTP");}else{//alert("谷歌");xmlHttpRequest=new XMLHttpRequest();}return xmlHttpRequest;}//回调函数function deal(){//alert("处理函数被调用"+myXmlHttpRequest.readyState);//我要取出从Admin页面返回的数据if(myXmlHttpRequest.readyState==4){//取出值,根据返回信息的格式而定//alert("服务器返回"+myXmlHttpRequest.responseText);$("#myInfo").attr("value", myXmlHttpRequest.responseText);}}$(document).ready(function() {$("#checkName").click(function() {myXmlHttpRequest=createXmlHttpRequest();if(myXmlHttpRequest){//alert("创建ajax引擎成功");//通过myXmlHttpRequest对象发送请求到服务器的某个页面//第一个参数标识请求的方式get/post//第二个指定url,对哪个页面发出ajax请求(本质仍然是http请,但是无刷新了)//第三个参数true表示使用异步机制,如果是false表示不是异步处理/* var url="/ByBasicProject/OnlineChat/Admin.jsp?name="+$("#name").val();alert(url); *//* //打开一个请求myXmlHttpRequest.open("get",url, true);//指定回调函数,作用很大,在指定区域展示回来的页面,deal是个函数的名称myXmlHttpRequest.onreadystatechange=deal;//开始发送请求,如果是get请求填写null即可。如果是post请求则填入实际数据myXmlHttpRequest.send(null); */var url="/ByBasicProject/OnlineChat/Admin.jsp";//这是要发送的数据var data="name="+$("#name").val();myXmlHttpRequest.open("post",url, true);//指定urlencoded来发送的数据,这句话必须myXmlHttpRequest.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");myXmlHttpRequest.onreadystatechange=deal;myXmlHttpRequest.send(data);}});});
</script>
</html><%@ page language="java" contentType="text/html; charset=utf-8"pageEncoding="utf-8"%>
<!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=utf-8">
<title>注册处理页面</title>
</head>
<body><%String name = request.getParameter("name");if (name.equals("liu19911009")) {%><h5>用户名不可以用</h5><%} else {%><h5>用户名可以用</h5><%}%>
</body>
</html><%@ page language="java" contentType="text/html; charset=utf-8"pageEncoding="utf-8"%>
<!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=utf-8">
<title>注册页面</title>
</head>
<body><form action="">用户名字:<input type="text" name="name" id="name" /> <input type="button"value="验证用户名" id="checkName" /> <br /> 用户密码:<input type="password"name="password" id="password" /><br /> 用户邮箱:<input type="text"name="email" /><br /> <input type="submit" value="用户注册" /></form><hr /><form action="">用户名字:<input type="text" name="name1" id="name1" /> <inputtype="button" value="验证用户名" /> <input type="text" id="myInfo1"style="border-width: 0; color: red;" /> <br /> 用户密码:<inputtype="password" name="password1" id="password1" /><br /> 用户邮箱:<inputtype="text" name="email1" /><br /> <input type="submit"value="用户注册" /></form><div id="detail"style="width: 300px; height: 100px; background-color: yellow; float: left;"></div>
</body>
<!-- 必须引入库 -->
<script type="text/javascript" src="/ALLJS/jquery-3.0.0.js"></script>
<script type="text/javascript">var myXmlHttpRequest;//设置成全局才都能访问//创建ajax引擎function createXmlHttpRequest() {var xmlHttpRequest;if (window.ActiveXObject) {alert("IE");xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP");} else {//alert("谷歌");xmlHttpRequest = new XMLHttpRequest();}return xmlHttpRequest;}//回调函数function deal() {//alert("处理函数被调用"+myXmlHttpRequest.readyState);//我要取出从Admin页面返回的数据if (myXmlHttpRequest.readyState == 4) {//取出值,根据返回信息的格式而定//alert("服务器返回"+myXmlHttpRequest.responseText);//$("#myInfo").attr("value", myXmlHttpRequest.responseText);//为了不更改jsp页面,用div的innerHtml直接接受数据展示更好document.getElementById("detail").innerHTML = myXmlHttpRequest.responseText;}}$(document).ready(function() {$("#checkName").click(function() {myXmlHttpRequest = createXmlHttpRequest();if (myXmlHttpRequest) {//alert("创建ajax引擎成功");//通过myXmlHttpRequest对象发送请求到服务器的某个页面//第一个参数标识请求的方式get/post//第二个指定url,对哪个页面发出ajax请求(本质仍然是http请,但是无刷新了)//第三个参数true表示使用异步机制,如果是false表示不是异步处理/* var url="/ByBasicProject/OnlineChat/Admin.jsp?name="+$("#name").val();alert(url); *//* //打开一个请求myXmlHttpRequest.open("get",url, true);//指定回调函数,作用很大,在指定区域展示回来的页面,deal是个函数的名称myXmlHttpRequest.onreadystatechange=deal;//开始发送请求,如果是get请求填写null即可。如果是post请求则填入实际数据myXmlHttpRequest.send(null); */var url = "/ByBasicProject/OnlineChat/Admin.jsp";//这是要发送的数据var data = "name="+ $("#name").val();myXmlHttpRequest.open("post",url, true);//指定urlencoded来发送的数据,这句话必须myXmlHttpRequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded");//调用deal函数myXmlHttpRequest.onreadystatechange = deal;myXmlHttpRequest.send(data);}});});
</script>
</html>
2.返回数据
2.1具体数据
①文本Text(Html格式)
A.可以直接用
document.getElementById("detail").innerHTML = myXmlHttpRequest.responseText;/不用减少jsp代码了
②xml格式
A.首先要建立xml结尾的文件
B.访问xml文件位置即为url
C.访问到的数据一开始拿到是object
D.需要用myResponse.getElementsByTagName("yfb")[0].firstChild.nodeValue;这种方式得到值
E.把内容粘贴到文本框或者div内都可以的
F.优点:通用的格式/数据可以根据标记获取/利用dom完全掌握文档
<?xml version="1.0" encoding="UTF-8"?>
<ZTO><zzb>支持部</zzb><yfb>研发部</yfb>
</ZTO><%@ page language="java" contentType="text/html; charset=utf-8"pageEncoding="utf-8"%>
<!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=utf-8">
<title>注册页面</title>
</head>
<body><form action="">用户名字:<input type="text" name="name" id="name" /> <input type="button"value="验证用户名" id="checkName" /> <br /> 用户密码:<input type="password"name="password" id="password" /><br /> 用户邮箱:<input type="text"name="email" /><br /> <input type="submit" value="用户注册" /></form><hr /><form action="">用户名字:<input type="text" name="name1" id="name1" /> <inputtype="button" value="验证用户名" /> <input type="text" id="myInfo1"style="border-width: 0; color: red;" /> <br /> 用户密码:<inputtype="password" name="password1" id="password1" /><br /> 用户邮箱:<inputtype="text" name="email1" /><br /> <input type="submit"value="用户注册" /></form><div id="detail" style="width: 300px; height: 100px; background-color: yellow; float: left;"></div>
</body>
<!-- 必须引入库 -->
<script type="text/javascript" src="/ALLJS/jquery-3.0.0.js"></script>
<script type="text/javascript">var myXmlHttpRequest;//设置成全局才都能访问//创建ajax引擎function createXmlHttpRequest() {var xmlHttpRequest;if (window.ActiveXObject) {alert("IE");xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP");} else {//alert("谷歌");xmlHttpRequest = new XMLHttpRequest();}return xmlHttpRequest;}//回调函数function deal() {//alert("处理函数被调用"+myXmlHttpRequest.readyState);//我要取出从Admin页面返回的数据if (myXmlHttpRequest.readyState == 4) {//取出值,根据返回信息的格式而定//alert("服务器返回"+myXmlHttpRequest.responseText);//$("#myInfo").attr("value", myXmlHttpRequest.responseText);//为了不更改jsp页面,用div的innerHtml直接接受数据展示更好var myResponse=myXmlHttpRequest.responseXML;//返回是object需要解析才能设置到divvar zzb=myResponse.getElementsByTagName("zzb")[0].firstChild.nodeValue;var yfb=myResponse.getElementsByTagName("yfb")[0].firstChild.nodeValue;$("#detail").append(zzb+"<br/>");$("#detail").append(yfb);}}$(document).ready(function() {$("#checkName").click(function() {myXmlHttpRequest = createXmlHttpRequest();if (myXmlHttpRequest) {//alert("创建ajax引擎成功");//通过myXmlHttpRequest对象发送请求到服务器的某个页面//第一个参数标识请求的方式get/post//第二个指定url,对哪个页面发出ajax请求(本质仍然是http请,但是无刷新了)//第三个参数true表示使用异步机制,如果是false表示不是异步处理/* var url="/ByBasicProject/OnlineChat/Admin.jsp?name="+$("#name").val();alert(url); *//* //打开一个请求myXmlHttpRequest.open("get",url, true);//指定回调函数,作用很大,在指定区域展示回来的页面,deal是个函数的名称myXmlHttpRequest.onreadystatechange=deal;//开始发送请求,如果是get请求填写null即可。如果是post请求则填入实际数据myXmlHttpRequest.send(null); */var url = "/ByBasicProject/OnlineChat/Admin.xml";//这是要发送的数据var data = "name="+ $("#name").val();myXmlHttpRequest.open("post",url, true);//指定urlencoded来发送的数据,这句话必须myXmlHttpRequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded");//调用deal函数myXmlHttpRequest.onreadystatechange = deal;myXmlHttpRequest.send(data);}});});
</script>
</html>③json格式:javaScript Object Notation/是js的原生格式
A.json属性值也可以继续是json对象,属性值也可以是一个方法/利于调用
B.字符串转成json对象如何?var jsonStr="{'name':'蘑菇头'}";var tempJsonObject=eval("("+jsonStr+")");alert(tempJsonObject.name);
C.传输格式和xml很相似,但是更灵巧,不仅可以写在js结尾的,写在txt也可以的,那个更利于编写写那个。大部分都是json格式
{"name" : "陈翔","age" : 26,"country" : "中国","address":{"city":"合肥","provice":"安徽"}
}<%@ page language="java" contentType="text/html; charset=utf-8"pageEncoding="utf-8"%>
<!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=utf-8">
<title>注册页面</title>
</head>
<body><form action="">用户名字:<input type="text" name="name" id="name" /> <input type="button"value="验证用户名" id="checkName" /> <br /> 用户密码:<input type="password"name="password" id="password" /><br /> 用户邮箱:<input type="text"name="email" /><br /> <input type="submit" value="用户注册" /></form><hr /><form action="">用户名字:<input type="text" name="name1" id="name1" /> <inputtype="button" value="验证用户名" /> <input type="text" id="myInfo1"style="border-width: 0; color: red;" /> <br /> 用户密码:<inputtype="password" name="password1" id="password1" /><br /> 用户邮箱:<inputtype="text" name="email1" /><br /> <input type="submit"value="用户注册" /></form><div id="detail" style="width: 300px; height: 100px; background-color: yellow; float: left;"></div>
</body>
<!-- 必须引入库 -->
<script type="text/javascript" src="/ALLJS/jquery-3.0.0.js"></script>
<script type="text/javascript">var myXmlHttpRequest;//设置成全局才都能访问//创建ajax引擎function createXmlHttpRequest() {var xmlHttpRequest;if (window.ActiveXObject) {alert("IE");xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP");} else {//alert("谷歌");xmlHttpRequest = new XMLHttpRequest();}return xmlHttpRequest;}//回调函数function deal() {//alert("处理函数被调用"+myXmlHttpRequest.readyState);//我要取出从Admin页面返回的数据if (myXmlHttpRequest.readyState == 4) {//取出值,根据返回信息的格式而定//alert("服务器返回"+myXmlHttpRequest.responseText);//$("#myInfo").attr("value", myXmlHttpRequest.responseText);//为了不更改jsp页面,用div的innerHtml直接接受数据展示更好//var myResponse=myXmlHttpRequest.responseText;var jsonObject=eval("("+myXmlHttpRequest.responseText+")");var name=jsonObject.name;var country=jsonObject.country;$("#detail").append(name);$("#detail").append(country);}}$(document).ready(function() {$("#checkName").click(function() {myXmlHttpRequest = createXmlHttpRequest();if (myXmlHttpRequest) {//alert("创建ajax引擎成功");//通过myXmlHttpRequest对象发送请求到服务器的某个页面//第一个参数标识请求的方式get/post//第二个指定url,对哪个页面发出ajax请求(本质仍然是http请,但是无刷新了)//第三个参数true表示使用异步机制,如果是false表示不是异步处理/* var url="/ByBasicProject/OnlineChat/Admin.jsp?name="+$("#name").val();alert(url); *//* //打开一个请求myXmlHttpRequest.open("get",url, true);//指定回调函数,作用很大,在指定区域展示回来的页面,deal是个函数的名称myXmlHttpRequest.onreadystatechange=deal;//开始发送请求,如果是get请求填写null即可。如果是post请求则填入实际数据myXmlHttpRequest.send(null); */var url = "/ByBasicProject/OnlineChat/Admin.js";//这是要发送的数据var data = "name="+ $("#name").val();myXmlHttpRequest.open("post",url, true);//指定urlencoded来发送的数据,这句话必须myXmlHttpRequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded");//调用deal函数myXmlHttpRequest.onreadystatechange = deal;myXmlHttpRequest.send(data);}});});
</script>
</html>
3.具体DEMO
3.1请求遮罩展示效果的实现
①实现简单的遮罩效果(jquery+ajax的局部提交才可以的)
②实现排期跟进更新和登记的遮罩效果。
<%@ page language="java" contentType="text/html; charset=utf-8"pageEncoding="utf-8"%>
<!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=utf-8">
<title>注册页面</title>
</head>
<style type="text/css">
.shade{margin: 0;position: fixed;overflow: auto;top: 0;right: 0;bottom: 0;left: 0;z-index: 999;outline: 0;opacity: 0.5;background: #CDC9C9;display: none;
}
.show{display: none;position: absolute;top: 15%;left: 20%;width: 55%;height: 55%;padding: 20px;border: 5px solid #1C86EE;background-color: yellow;z-index: 1002;overflow: auto;
}
</style>
<body><input type="button" value="展示遮罩" id="checkName" /><div id="hiddenShadeDiv"></div><div id="hiddenShowDiv"></div>
</body>
<!-- 必须引入库 -->
<script type="text/javascript" src="/ALLJS/jquery-3.0.0.js"></script>
<script type="text/javascript">$("#checkName").click(function() {//使用load方法处理ajaxvar url = "/ProblemMessageSelect.action";$("#hiddenShowDiv").load(url, null);$("#hiddenShowDiv").show();$("#hiddenShadeDiv").show();});$("#hiddenShadeDiv").click(function() {//刷新下当前页面,达到清除展示div的作用,返回原来页面
//有更好的方法empty()可以改进location.reload();});
</script>
</html>
3.2省市区联动
①省的表,市的表关联一个省id外键,区的表关联一个市的id外键—>建议使用三张表,
不建议使用(自连接)。第八集23分钟
②省变化使得区改变为默认
③数据连接数据库
<%@ page language="java" contentType="text/html; charset=utf-8"pageEncoding="utf-8"%>
<!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=utf-8">
<title>请求页面</title>
</head>
<body><select id="省" οnchange="getCity()"><option>---省---</option><option value="浙江">浙江</option><option value="江苏">江苏</option></select><select id="市" οnchange="getArea()"><option>---城市---</option></select><select id="区"><option>---区---</option></select><br /><div id="detail"style="width: 300px; height: 100px; background-color: yellow; float: left;"></div>
</body>
<!-- 必须引入库 -->
<script type="text/javascript" src="/ALLJS/jquery-3.0.0.js"></script>
<script type="text/javascript">function getCity(){//切换省之前把区置为初始选择状态var url = "/ByBasicProject/OnlineChat/Admin.jsp";var sendData = {'省' : $("#省").val(),};$("#市").load(url, sendData);}function getArea(){var url = "/ByBasicProject/OnlineChat/Admin.jsp";var sendData = {'市' : $("#市").val()};$("#区").load(url, sendData);}
</script>
</html><%@page import="javax.swing.text.Document"%>
<%@ page language="java" contentType="text/html; charset=utf-8"pageEncoding="utf-8"%>
<!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=utf-8">
<title>处理页面</title>
</head>
<body><%//通过数据库取出省市区//设置无缓存response.setHeader("Cache-Control", "no-cache");//接受上个页面发送过来的数据String provice="";if(request.getParameter("省")!=null){provice = request.getParameter("省");}if(provice.equals("浙江")){%><select id="市" οnchange="getArea()"><option value="绍兴">绍兴</option><option value="宁波">宁波</option><option value="嘉兴">嘉兴</option><option value="丽水">丽水</option><option value="台州">台州</option></select><%}else if(provice.equals("江苏")){%><select id="市" οnchange="getArea()"><option value="南京">南京</option><option value="无锡">无锡</option><option value="徐州">徐州</option><option value="常州">常州</option><option value="苏州">苏州</option></select><%}%><%String city="";if(request.getParameter("市")!=null){city=request.getParameter("市");}System.out.println(city);if(city.equals("绍兴")){%><select id="区"><option value="越城区">越城区</option><option value="柯桥区">柯桥区</option><option value="上虞区">上虞区</option></select><%}else if(city.equals("南京")){%><select id="区"><option value="玄武区">玄武区</option><option value="秦淮区">秦淮区</option><option value="建邺区">建邺区</option><option value="鼓楼区">鼓楼区</option><option value="栖霞区">栖霞区</option></select><%}else if(city.equals("宁波")){%><select id="区"><option value="鄞州区">鄞州区</option></select><%}%>
</body>
</html>
3.3实现黄金价格每五秒变动
<%@ page language="java" contentType="text/html; charset=utf-8"pageEncoding="utf-8"%>
<!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=utf-8">
<title>请求页面</title>
</head>
<body id="myBody"><h1>每个五秒去更新一次数据</h1><table border="1" cellpadding="0" cellspacing="0"width="30%"><tr><td>市场</td><td>最新价格</td><td>涨跌</td></tr><tr><td id="伦敦">伦敦</td><td>788</td><td>102</td></tr><tr><td id="台湾">台湾</td><td>854</td><td>-103</td></tr><tr><td id="美国">美国</td><td>1024</td><td>168</td></tr></table>
</body>
<!-- 必须引入库 -->
<script type="text/javascript" src="/ALLJS/jquery-3.0.0.js"></script>
<script type="text/javascript">function updatePrice() {var url = "/ByBasicProject/OnlineChat/Admin.jsp";var sendData = {'台湾' : $("#台湾").text(),'伦敦' : $("#伦敦").text(),'美国' : $("#美国").text()};$("#myBody").load(url, sendData);}setInterval("updatePrice()", 5000);
</script>
</html><%@page import="java.util.ArrayList"%>
<%@page import="javax.swing.text.Document"%>
<%@ page language="java" contentType="text/html; charset=utf-8"pageEncoding="utf-8"%>
<!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=utf-8">
<title>处理页面</title>
</head>
<body><%//通过数据库取出省市区//设置无缓存response.setHeader("Cache-Control", "no-cache");//接受上个页面发送过来的数据ArrayList<String> cityList=new ArrayList<String>();String temp=request.getParameter("台湾");cityList.add(0, temp);temp=request.getParameter("美国");cityList.add(1, temp);temp=request.getParameter("伦敦");cityList.add(2, temp);//随机产生500-2000的数%><h1>每个五秒去更新一次数据</h1><table border="1" cellpadding="0" cellspacing="0"width="30%"><tr><td>市场</td><td>最新价格</td><td>涨跌</td></tr><%for(int i=0;i<cityList.size();i++){String tempCity=cityList.get(i);double numOne=Math.random()*1500+500;double numTwo=Math.random()*100+500;%><tr><td id="<%=tempCity %>"><%=tempCity %></td><td><%=numOne %></td><td><%=numTwo %></td></tr><%}%></table><%%>
</body>
</html>
①ajax是其中技术的整合,主要是js/jsp/css/jquery(xmlHttpRequest)->接受返回jsp形式的网页以及数据,来讲解局部刷新。
②ajax是一个服务器端无关的技术,php/java/.net技术/asp都支持的
③ajax可以返回xml/json/html(jsp)等格式的数据
④ajax是异步的js和xml
⑤实现无刷新数据交换技术:ajax/flash/java applet/iframe/框架
⑥主要用在哪里:做网站的基本都要用
⑦案例:用户名无刷新验证/json格式数据/省市区联动/黄金价格变动
3.4AJAX实现聊天室
①实现的思路:发送信息处理页面,接受消息索要处理页面。
②数据库的设计:信息表-messageId sender:发送人  receiver:接受人 sendTime发送时间 isGet:是否接受过了
③接受者每隔五秒到服务器去获取属于自己的信息。
④登陆人的信息保存到session中,方便随时提取。暂时先用传递替代下。
⑤防止同一个用户重复登陆。用户表:加个isLogin字段,如果登录成功则设置为1,再次登陆则提示已经登陆。
如果退出/session销毁了如何置回0的问题。
<%@ page language="java" contentType="text/html; charset=utf-8"pageEncoding="utf-8"%>
<!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=utf-8">
<title>登陆页面</title>
</head>
<body id="myBody"><h1>欢迎登陆</h1><form method="post"><table border="0" cellpadding="0" cellspacing="0"><tr><td>用户姓名</td><td><input type="text" name="name" id="name"/></td></tr><tr><td >用户密码</td><td><input type="password" name="password" /></td></tr><tr><td colspan="2"><input type="button" value="登陆系统" οnclick="updatePrice()"></td></tr></table></form>
</body>
<!-- 必须引入库 -->
<script type="text/javascript" src="/ALLJS/jquery-3.0.0.js"></script>
<script type="text/javascript">function updatePrice() {var url = "/ByBasicProject/OnlineChat/FriendList.jsp";var sendData ={'name' : $("#name").val()};$("#myBody").load(url, sendData);}
</script>
</html><%@page import="java.util.ArrayList"%>
<%@page import="javax.swing.text.Document"%>
<%@ page language="java" contentType="text/html; charset=utf-8"pageEncoding="utf-8"%>
<!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=utf-8">
<title>好友列表</title>
</head>
<body><h1>好友列表</h1><ul><li>陈翔</li><li>蘑菇头</li><li>润土</li><li>123</li><li>liu19911009</li></ul><input type="hidden" name="name" value=<%=request.getParameter("name")%> id="name" /><div id="myDiv"></div>
</body>
<!-- 必须引入库 -->
<script type="text/javascript" src="/ALLJS/jquery-3.0.0.js"></script>
<script type="text/javascript">$("li").mouseover(function() {$(this).css( "color", "red");});$("li").mouseout(function() {$(this).css("color", "black");});$("li").mousedown(function() {var url = "/ByBasicProject/OnlineChat/ChatRoom.jsp";var sendData = {'name':$("#name").val(),'tempName' : $(this).text()     };$("#myDiv").load(url, sendData);});
</script>
</html><%@page import="java.util.ArrayList"%>
<%@page import="javax.swing.text.Document"%>
<%@ page language="java" contentType="text/html; charset=utf-8"pageEncoding="utf-8"%>
<!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=utf-8">
<title>聊天页面</title>
</head>
<body><h1>聊天室(<%=request.getParameter("name")%>正在和<font color="red"><%=request.getParameter("tempName")%></font>聊天)</h1><div id="divTextArea"><textarea rows="20" cols="100" ></textarea></div><input type="hidden" name="name" value=<%=request.getParameter("name")%> id="name" /><input type="hidden" name="tempName" value=<%=request.getParameter("tempName")%> id="tempName" /><br /><input type="text" id="sendMessage" /><input type="button" value="发送" id="发送" />
</body>
<!-- 必须引入库 -->
<script type="text/javascript" src="/ALLJS/jquery-3.0.0.js"></script>
<script type="text/javascript">$("#发送").click(function() {//数据发送给指定页面var url = "/SendMessage.action";var sendData = {'content' : $("#sendMessage").val(),'sender':$("#name").val(),'receiver':$("#tempName").val()};$("#sendMessage").val("");$("#divTextArea").load(url, sendData);});function getAllMessage(){var url = "/getAllMessage.action";var sendData = {'content' : $("#sendMessage").val(),'sender':$("#name").val(),'receiver':$("#tempName").val()};$("#divTextArea").load(url, sendData);}setInterval("getAllMessage()", 5000);
</script>
</html><%@ page language="java" contentType="text/html; charset=UTF-8"pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<!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=utf-8">
<title>聊天页面</title>
</head>
<body><textarea rows="20" cols="100"><c:forEach items="${onlineChatList}" var="change"varStatus="mid">
${change.sender} <fmt:formatDate value="${change.sendTime}"pattern="yyyy-MM-dd HH:mm:ss" />&#10 ${change.content}</c:forEach></textarea>
</body>
<!-- 必须引入库 -->
<script type="text/javascript" src="/ALLJS/jquery-3.0.0.js"></script>
<script type="text/javascript"></script>
</html>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/5720.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

探索APP内测分发的全过程(APP开发)

什么是APP内测分发探索APP内测分发的全过程&#xff1f; APP内测分发是在应用程序开发过程中探索APP内测分发的全过程&#xff0c;开发者将应用程序的测试版或预发布版分发给特定用户进行测试、反馈和评估的一种方式。这是一个非常重要的环节&#xff0c;可以有效地提高应用的…

【右一的实操记录】全导航,持续更新...

文章目录 &#x1f4da;大数据管理与分析【实验】&#x1f4da;数据结构【实验】&#x1f4da;机器学习【实验】&#x1f4da;大数据安全【实验】&#x1f4da;信息检索【实验】&#x1f4da;爬虫【小实践】&#x1f4da;AIGC&#x1f4da;杂货铺 大部分是和电子笔记对应的实验…

详解SDRAM基本原理以及FPGA实现读写控制

文章目录 一、SDRAM简介二、SDRAM存取结构以及原理2.1 BANK以及存储单元结构2.2 功能框图2.3 SDRAM速度等级以及容量计算 三、SDRAM操作命令3.1 禁止命令&#xff1a; 4b1xxx3.2 空操作命令&#xff1a;4b01113.3 激活命令&#xff1a;4b00113.4 读命令&#xff1a;4b01013.5 写…

mac如何打开exe文件?如何mac运行exe文件 如何在Mac上打开/修复/恢复DMG文件

在macOS系统中&#xff0c;无法直接运行Windows系统中的.exe文件&#xff0c;因为macOS和Windows使用的是不同的操作系统。然而&#xff0c;有时我们仍然需要运行.exe文件&#xff0c;比如某些软件只有Windows版本&#xff0c;或者我们需要在macOS系统中运行Windows程序。 虽然…

如何安全的使用密码登录账号(在不知道密码的情况下)

首先&#xff0c;需要用到的这个工具&#xff1a; 度娘网盘 提取码&#xff1a;qwu2 蓝奏云 提取码&#xff1a;2r1z 1、打开工具&#xff0c;进入账号密码模块&#xff0c;如图 2、看到鼠标移动到密码那一栏有提示&#xff0c;按住Ctrl或者Alt点击或者双击就能复制内容&…

初识Vue-组件化开发(详解各个组件)

目录 一、组件介绍 1.概念 2.特点 3.作用 4.应用 5.分类 二、组件语法 1.定义挂载vue应用 2.注册全局组件 实例 1.自定义组件 2.计数器 3.组件的复用 4.局部组件 实例 5.Prop 6.动态Prop 7.Prop 验证 三、创建组件的关键概念和语法 1. 组件定义 2. 组件选…

mybatis批量保存工具类实用

一、代码 import org.apache.ibatis.session.ExecutorType; import org.apache.ibatis.session.SqlSession; import org.apache.ibatis.session.SqlSessionFactory; import org.slf4j.Logger; import org.slf4j.LoggerFactory; import org.springframework.jdbc.core.JdbcTemp…

正版Office-Word使用时却提示无网络连接请检查你的网络设置 然后重试

这是购买电脑时自带的已经安装好的word。看纸箱外壳有office标记&#xff0c;但是好像没有印系列号。 某天要使用。提示&#xff1a;无网络连接请检查你的网络设置。 经过网上高手的提示&#xff1a; 说要勾选勾选ssl3.0、TLS1.0、1.1、1.2。 我的截图 我电脑进去就缺1.2. …

PCIe总线-MPS MRRS RCB参数介绍(四)

1.概述 PCIe总线的存储器写请求、存储器读完成等TLP中含有数据负载&#xff0c;即Data Payload。Data Payload的长度和MPS&#xff08;Max Payload Size&#xff09;、MRRS&#xff08;Max Read Request Size&#xff09;和RCB&#xff08;Read Completion Boundary&#xff0…

PostgreSQL的pg_archivecleanup工具

PostgreSQL的pg_archivecleanup工具 pg_archivecleanup 是 PostgreSQL 中用于管理 WAL&#xff08;Write-Ahead Logging&#xff09;归档目录的工具。在使用基于归档的日志复制或持久化存储时&#xff0c;pg_archivecleanup 用来清理那些不再需要的归档日志文件&#xff0c;帮…

vue中的数据共享场景和数据共享方法总结

1、数据共享场景有哪些 页面之间共享数据&#xff1a; 不同页面之间需要共享数据时&#xff0c;可以通过 Vuex 状态管理库或路由参数等方式进行数据传递。例如&#xff0c;在路由参数中传递数据或将数据存储在 Vuex 中&#xff0c;在不同页面间进行数据交换。页面和组件之间共…

C++ 抽象机制

抽象机制 1. 虚函数 使用关键字virtual 声明的函数&#xff0c;意思是可能随后在其派生类中重新定义。 纯虚函数 在声明的末尾使用0 的函数&#xff0c;说明是纯虚函数。 抽象类 含有纯虚函数多的类称为抽象类(abstract class). 多态类型 如果一个类负责为其他一些类提供接…

unity入门——按钮点击了却无法调用函数

查阅了一番都没有解决问题&#xff0c;最后发现问题是由button的Onclick()事件绑定了代码脚本而不是游戏对象导致的。 如果Onclick()事件绑定的是代码脚本&#xff0c;则下拉框里没有函数&#xff0c;但是点击MonoScript后能手动填入函数名&#xff08;本以为这样就能实现调用…

State.initState() must be a void method without an `async` keyword错误解析

文章目录 报错问题报错的代码 错误原因解决方法解析 另外的方法 报错问题 State.initState() must be a void method without an async keyword如下图&#xff1a; 报错的代码 报错的代码如下&#xff1a; overridevoid initState() async{super.initState();await getConf…

openssl3.2 - exp - 使用默认的函数宏,在release版中也会引入__FILE__

文章目录 openssl3.2 - exp - 使用默认的函数宏&#xff0c;在release版中也会引入__FILE__概述笔记验证是否__FILE__在release版下也能用&#xff1f;将openssl编译成release版的&#xff0c;看看CRYPTO_free()是否只需要一个参数就行&#xff1f;将工程中的openssl相关的库换…

重定义大语言模型的记忆能力:对抗性压缩如何挑战现有测量法

DeepVisionary 每日深度学习前沿科技推送&顶会论文分享&#xff0c;与你一起了解前沿深度学习信息&#xff01; Rethinking LLM Memorization through the Lens of Adversarial Compression 引言&#xff1a;探索大型语言模型的记忆能力 在当今信息时代&#xff0c;大型…

Window(Qt/Vs)软件添加版本信息

Window&#xff08;Qt/Vs&#xff09;软件添加版本信息 文章目录 Window&#xff08;Qt/Vs&#xff09;软件添加版本信息VS添加版本信息添加资源文件添加版本定义头自动更新版本添加批处理脚本设置生成事件 Qt添加版本信息添加资源文件文件信息修改自动更新版本 CMake添加版本信…

React 中使用 TS

目录 1&#xff0c;搭建项目2&#xff0c;tsconfig.json 相关配置项1&#xff0c; lib2&#xff0c;module3&#xff0c;jsx 3&#xff0c;在 React 中使用 TS3.1&#xff0c;TS 可以解决的问题3,2&#xff0c;函数式组件3.3&#xff0c;类组件3.4&#xff0c;Props 的默认值方…

#ESP32S3R8N8建立工程(VSCODE)点亮LED

1.参考文档 【立创ESP32S3R8N8】IDF入门手册 - 飞书云文档 (feishu.cn)https://lceda001.feishu.cn/wiki/GOIlwwfbIi1SC3k8594cDeFVn8g 2.建立工程 3.运行效果 4.更改配置 5.插播 之前配置的环境是有问题的&#xff0c;就算有自动检测也要仔细检查&#xff0c;必须严格按照以…

VMware安装ubuntun虚拟机使用桥接模式无法上网问题解决

问题&#xff1a;最近准备使用VMware虚拟机搭建k8s集群服务&#xff0c;因为需要在同一个网段下&#xff0c;我使用桥接的方式&#xff0c;我发现主机在使用有线连接时虚拟机网络连接正常&#xff0c;但是使用无线网就显示连接不上网络。 解决方法 一、查看网络连接&#xff…