Js--ajax--原理解释 概述:异步刷新网页,不会刷新整个页面. Get原理: <%@ 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>Insert title here</title> <script> function sendGetAjax(){ //下面的代码可以不需要练习 但不可以使用IE 浏览器兼容 //1.获得ajax引擎 var xmlHttp = new XMLHttpRequest(); //2.设置回调函数--作用是 响应回来时 ajax引擎会调用回调函数 将数据返回 //回调函数将会被执行四次 xmlHttp.onreadystatechange = function(){ //判断 readyState 状态必须是4 表示响应结束 if(xmlHttp.readyState == 4 ){ //响应结束 不一定就是正确响应 //判断响应必须是成功 成功状态码是200 if(xmlHttp.status == 200){ //接受服务器的值 var textTemp = xmlHttp.responseText; alert(textTemp); } if(xmlHttp.status == 404){ alert("yyy"); } } } //3.打开连接 建立连接 //参数1:请求方式 //参数2:请求的路径 xmlHttp.open("get", "/ee66_day44/DemoServlet?username=jack2&nickname=rose2"); //4.发送 //参数表示 请求体 xmlHttp.send(null); } </script> </head> <body> <form action="/ee66_day44/DemoServlet" method="post"> <input type="text" name="username" value="jack"/> <input type="text" name="nickname" value="rose"/> <input type="submit"/> </form> <a href="javascript:void(0)" onclick="sendGetAjax()">点我发送ajax请求</a> </body> </html> Post原理: 跟get方式相似,但需要在3和4中间加一个设置请求头的代码. Jquery -- ajax(重点) Jquery:底层就是js 特性:兼容浏览器,api都是封装好的. Get方式: <!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>Insert title here</title> <script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-1.11.3.min.js"></script> <script> function sendGetAjax(){ //1.导入jquery的类库 //2.jquery的api提供工具类 /** url :请求的路径 params:请求参数 格式1:key=value&key=value... 格式2:{key:value,key:value..} js对象 fn : 回调函数 function(data){} data就是回调函数中服务器响应的数据 type : text 默认值 表示服务器响应的数据是文本 如果设置的是json 直接将字符串数据转换成对象 */ //$.get(url,params,fn,type); //$.get("/ee66_day44/DemoServlet"); //应用场景 服务器统计访问人数 //$.get("/ee66_day44/DemoServlet","username=jack2&nickname=rose2"); //$.get("/ee66_day44/DemoServlet",{"username":"jack3","nickname":"rose3"}); $.get("/ee66_day44/DemoServlet","username=jack2&nickname=rose2",function(data){ alert(data); },"text"); } </script> </head> <body> <form action="/ee66_day44/DemoServlet" method="post"> <input type="text" name="username" value="jack"/> <input type="text" name="nickname" value="rose"/> <input type="submit"/> </form> <a href="javascript:void(0)" onclick="sendGetAjax()">点我发送ajax请求</a> </body> </ html> Post : Post提交方式和get方式没有区别,参数一样,写法一样. 如果涉及乱码get和post处理是不一样,建议post 案例分析: 1.失去焦点时发送ajax请求. 2.编写函数. 3.发送ajax请求,请求中携带参数. 参数是username 4.编写servlet代码. 5.回调函数中处理响应数据 if(1 失败) { 用户名不可用,显示 可用隐藏 }else { 用户名不可用 隐藏 可用显示 } protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { //1.获得 String username = request.getParameter("username"); //2.处理 if("jack".equals(username)){ //失败 返回1 //3.响应 response.getWriter().print("1"); }else{ //成功 返回0 //3.响应 response.getWriter().print("0"); } } <script> //页面加载 $(function(){ //初始化 可用和不可用都需要隐藏 $("#FailedId").hide(); $("#SuccessId").hide(); //绑定事件 $("#username").blur(function(){ //获得参数 var usernameVal = $("#username").val(); //发送ajax请求 $.post("${pageContext.request.contextPath}/CheckServlet",{"username":usernameVal},function(data){ if("1"==data){ //失败 用户名不可用显示 可用隐藏 $("#SuccessId").hide(); $("#FailedId").show(); }else{ //成功 用户名不可用隐藏 可用显示 $("#SuccessId").show(); $("#FailedId").hide(); } }); }); }) </script> <div class="col-sm-4"> <span class="label label-success" id="SuccessId">用户名可用</span> <span class="label label-danger" id="FailedId">用户名不可用</span> </div> Json(重点): Json是一种数据格式,用于通信获得数据传递数据方便. Json对象: Object:格式 {key:value,key:value....} 使用map,对象,描述 Json数组: Object : 格式[obj,obj,obj...] 使用数组,list集合描述 数组中可以嵌套对象,对象可以嵌套数组. Js--json <script> //js对象 json 的 和value必须用双引号包括起来 如果是数字 boolean 变量是不需要双引号的 var obj = {"a":"b","c":"d"}; //alert(obj.c); //var obj = "{'a':'b','c':'d'}"; //alert(obj.a); //字符串 转换 对象 //1.eval可以将字符串转换成可执行的代码片段 //2.eval可以将字符串转换成对象 /* var objTemp = eval( "(" + obj +")" ); alert(objTemp.a); */ var arr = ["a" , "b" , 1 , true , obj]; alert(arr[4].a); var obj2 = {"abc":arr}; </script> 案例分析:自动联想功能 需求:在文本框中输入值,动态的联想数据库中数据填充在下拉框下. 1.联想时,数据库中所有全部联想(查询所有),js前台的细节. 2.加上条件联想(根据条件查询) */ 首页: 文本框输入内容 1.文本框添加事件(keydown按下,keypress按住,keyup弹起) 使用keyup弹起事件 2.发送ajax,携带参数searchWord 3.编写servlet 4.回调函数中获得数据 将一根div显示,再往框里加数据, <script> $(function(){ //1.给文本框绑定事件 $("#SearchId").keyup(function(){ //2.获得数据 var wordVal = $("#SearchId").val(); if(""==wordVal){ $("#completeShow").hide(); return; } //清空ul $("#showUI").html(""); //3.发送请求 $.post("${pageContext.request.contextPath}/SearchWordServlet",{"searchWord":wordVal},function(data){ //4.遍历 往div中添加数据 $(data).each(function(){ //this 表示 被遍历的当前对象 当前对象表示product List<Product> $("#showUI").append("<li class='list-group-item'><a href=''>"+this.pname+"("+this.pinyin+")"+"</a></li>"); }); //5.将div显示 $("#completeShow").show(); },"json"); }); }) </script> <div id="completeShow"> <ul class="list-group" id="showUI"> </ul> </div> 服务器:servlet 1.获得 获得searchWord 2.处理 service.findByWord(searchWord) 返回值List<类名> 3.响应 使用json-lib,将集合转换成json字符串 public class SearchWordServlet extends HttpServlet { protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { try { //0.乱码 request.setCharacterEncoding("utf-8"); response.setHeader("content-type", "text/html;charset=utf-8"); //1.获得 String word = request.getParameter("searchWord"); //2.处理 ProductService service = new ProductService(); List<Product> list = service.findByWord(word); //3.响应 String json = JSONArray.fromObject(list).toString(); response.getWriter().print(json); } catch (Exception e) { e.printStackTrace(); } } public List<Product> findByWord(String word) throws SQLException { QueryRunner queryRunner = new QueryRunner(C3P0Utils.getDataSource()); String sql =" SELECT * FROM product WHERE pname LIKE ? OR pinyin LIKE ? "; Object [] params = { "%"+word+"%","%"+word+"%" }; return queryRunner.query(sql, new BeanListHandler<Product>(Product.class), params); }