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实现聊天室..................................................... 22 1.初步认识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 /> 用户密码:<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" /> <input type="button" value="验证用户名" /> <input type="text" id="myInfo1" style="border-width: 0; color: red;" /> <br /> 用户密码:<input type="password" name="password1" id="password1" /><br /> 用户邮箱:<input type="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" /> <input type="button" value="验证用户名" /> <input type="text" id="myInfo1" style="border-width: 0; color: red;" /> <br /> 用户密码:<input type="password" name="password1" id="password1" /><br /> 用户邮箱:<input type="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" /> <input type="button" value="验证用户名" /> <input type="text" id="myInfo1" style="border-width: 0; color: red;" /> <br /> 用户密码:<input type="password" name="password1" id="password1" /><br /> 用户邮箱:<input type="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需要解析才能设置到div var 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" /> <input type="button" value="验证用户名" /> <input type="text" id="myInfo1" style="border-width: 0; color: red;" /> <br /> 用户密码:<input type="password" name="password1" id="password1" /><br /> 用户邮箱:<input type="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方法处理ajax var 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" />
 ${change.content} </c:forEach> </textarea> </body> <!-- 必须引入库 --> <script type="text/javascript" src="/ALLJS/jquery-3.0.0.js"></script> <script type="text/javascript"> </script> </html>
Ajax从入门到精通
于 2024-05-01 10:23:16 首次发布