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实现聊天室..................................................... 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" />&#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>
相关推荐
魏大帅。12 小时前
Axios 的 responseType 属性详解及 Blob 与 ArrayBuffer 解析
前端·javascript·ajax
子非鱼92113 小时前
【Ajax】跨域
javascript·ajax·cors·jsonp
超雄代码狂13 小时前
ajax关于axios库的运用小案例
前端·javascript·ajax
孤客网络科技工作室13 小时前
AJAX 全面教程:从基础到高级
android·ajax·okhttp
过期的H2O21 天前
【H2O2|全栈】JS进阶知识(四)Ajax
开发语言·javascript·ajax
生椰拿铁You1 天前
前端前置——ajax
前端·javascript·ajax
子非鱼9213 天前
【Ajax】原生Ajax与jQuery中的Ajax
xml·ajax·node.js·jquery
蜗牛学苑_武汉3 天前
浏览器中的事件循环
前端·javascript·chrome·ajax·软件工程·html5
awonw4 天前
[java][高级]Filter&Listener&Ajax
java·开发语言·ajax
supercool74 天前
Ajax学习
前端·学习·ajax